How to access queryClient to invalidate cache?

In my Next app, I am initializing

queryClient

queryClient

queryClient

queryClient from

_app.tsx

_app.tsx

. I have some instances where I want to invalidate cache (for example when I mutate data). From the docs (v5) it seems that the only way to do this is through

queryClient

queryClient

queryClient

queryClient.

What do you think of something like this, is it okay? It bugs me that I am importing something from

_app.tsx

_app.tsx

, at the same time I am not sure how to do otherwise.

export const queryClient = new QueryClient();

function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

export const queryClient = new QueryClient();

function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

export const queryClient = new QueryClient();

function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

export const queryClient = new QueryClient();

function App({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

export default App;

Thank you!

How to access queryClient to invalidate cache?

Similar Threads

Similar Threads

Similar Threads