How to use the cozy-client.useQuery function in cozy-client

const RecurrenceBundlePage = ({ params }) => {
  const recurrenceCol = useQuery(recurrenceConn.query, recurrenceConn)

  const bundleId = params.bundleId
  const bundle = useDocument(RECURRENCE_DOCTYPE, bundleId)

  if (isCollectionLoading(recurrenceCol) && !hasBeenLoaded(recurrenceCol)) {
    return 
  }

  return (
    <>
      
      {bundle ?  : null}
      {bundle ?  : null}
    
  )
}

const RecurrencePage = () => {
  const { data: transactions, fetchStatus } = useQuery(
    transactionsConn.query,
    transactionsConn
  )

  const loading = fetchStatus === 'loading' && transactions.length === 0

  const [rulesConfig, setRulesConfig, clearSavedConfig] = useStickyState(
    defaultConfig,
    'banks.recurrence-config'
  )

  const handleResetConfig = useCallback(() => {
    clearSavedConfig()
    setRulesConfig(defaultConfig)
  }, [clearSavedConfig, setRulesConfig])

const TransactionRecurrenceEditor = ({
  transaction,
  beforeUpdate,
  afterUpdate
}) => {
  const { t } = useI18n()
  const client = useClient()

  const current = transaction.recurrence.data
  const currentId = current && current._id
  const recurrenceCol = useQuery(recurrenceConn.query, recurrenceConn)

  const { data: allRecurrences } = recurrenceCol

  const recurrenceOptions = useMemo(
    () =>
      allRecurrences
        ? [makeNewRecurrenceOption(t)].concat(
            allRecurrences.map(makeOptionFromRecurrence)
          )
        : null,
    [allRecurrences, t]
  )

  const handleSelect = async recurrenceChoice => {
    if (beforeUpdate) {
      await beforeUpdate()

const BundleTransactions = ({ bundle }) => {
  const transactionsConn = bundleTransactionsQueryConn({ bundle })
  const { isMobile } = useBreakpoints()
  const { t } = useI18n()
  const transactionCol = useQuery(transactionsConn.query, transactionsConn)

  if (isCollectionLoading(transactionCol) && !hasBeenLoaded(transactionCol)) {
    return 
  }

  const transactions = transactionCol.data

  const TransactionRow = isMobile
    ? BundleTransactionMobile
    : TransactionRowDesktop
  const Wrapper = isMobile ? BundleMobileWrapper : BundleDesktopWrapper

  return (
    <>
      
        {transactions.length === 0 ? (

const SearchPage = ({ router }) => {
  const { t } = useI18n()
  const [search, setSearch] = useState(router.params.search || '')
  const handleChange = ev => {
    setSearch(ev.target.value)
  }

  let { data: transactions } = useQuery(
    transactionsConn.query,
    transactionsConn
  )

  transactions = transactions || []

  const searchSufficient = isSearchSufficient(search)
  if (searchSufficient) {
    transactions = transactions.filter(makeSearch(search))
  }

  return (
    <div>
      
      <header>
        </header></div>

const RecurrencesPage = ({ router }) => {
  const { isMobile } = useBreakpoints()
  const bundleCol = useQuery(recurrenceConn.query, recurrenceConn)
  const { data: rawBundles } = bundleCol
  const bundles = sortBundlesForViewing(rawBundles)

  const { t } = useI18n()
  const BundlesWrapper = isMobile ? BundleMobileWrapper : BundlesTable

  return (
    <>
      
      <header>
        {!isMobile ? (
          &lt;&gt;
            
              </header>