Theo's Typesafe Cult•2y ago

TRPC useQuery keeps refetching when switching pages? How can I cache the data on the client?

I recently migrated my project from CRA + React Query to T3 stack. I'm finding that on my client, all my queries called using useQuery are not being cached correctly. The whole React Query cache gets wiped when I go to a different page. In CRA this wasn't an issue, the query was cached until I invalidated it or it ran out of cache time. I'm not sure if there's an option I need to pass to the useQuery calls? Example call:

  const customerTransactionData = api.customerTransactionRouter.search.useQuery(
    { keyword })

  const customerTransactionData = api.customerTransactionRouter.search.useQuery(
    { keyword })

Thanks in advance.

1 Reply

DYELbrahOP•2y ago

Hey guys, my issue was that I had initially setup React query manually before installing TRPC on my T3 app (I hadn't set it up initially), since I had basically two query client providers, it was causing cache issues.

Gaming

Programming

TRPC useQuery keeps refetching when switching pages? How can I cache the data on the client?