NextJS and PersistQueryClientProvider

[bartekczyz]

Hello everyone :)

Here's my use-case: I need some of my queries to be persisted using sync storage persister (authentication data), all other queries doesn't have to be persisted. I figured I can use multiple providers to achieve it, however when I use only one provider - PersistQueryClientProvider I get error.

In _app.tsx I do

function MyApp({ Component, pageProps }: Props) {
  return (
    <PersistQueryClientProvider client={persistQueryClient} persistOptions={{ persister }} context={persistContext}>
      <Hydrate state={pageProps.dehydratedState}>
        <ReactQueryDevtools initialIsOpen={false} />
        <Component {...pageProps} />
      </Hydrate>
    </PersistQueryClientProvider>
  );
}

but I'm getting error - Error: No QueryClient set, use QueryClientProvider to set one.

versions

"@tanstack/query-core": "4.7.1",
"@tanstack/query-sync-storage-persister": "4.7.1",
"@tanstack/react-query": "4.7.1",
"@tanstack/react-query-devtools": "4.7.1",
"@tanstack/react-query-persist-client": "4.7.1",
"next": "12.3.1",
"typescript": "4.4.4"

What am I doing wrong? Thank you in advance

[TkDodo]

PersistQueryClientProvider internally creates a QueryClientProvider and forwards the props to it. So when you create one with context={persistContext}, all consumers would need to use the custom context as well. This is certainly not what you want - custom context is not meant for this scenario I believe.

I need some of my queries to be persisted using sync storage persister (authentication data), all other queries doesn't have to be persisted

The easiest way to do this is to "tag" your queries that you want to persist, either via the queryKey or via the meta field:

useQuery({ queryKey: [type: 'todos', { persist: true }], queryFn })

useQuery({ queryKey: [type: 'todos' ], queryFn, meta: { persist: true }})

and then filter them down via shouldDehydrateQuery on the persistOptions:

<PersistQueryClientProvider
  client={queryClient}
  persistOptions={{
    persister,
    dehydrateOptions: {
      shouldDehydrateQuery: (query) =>
        query.state.status === 'success' && !!query.meta?.persist,
    },
  }}
>

[bartekczyz]

Thanks Dominik, you're right, as always! 😅