How to access queryClient to invalidate cache?

In my Next app, I am initializing

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

.

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;

Thank you!

TanStack•3y ago•

4 replies

dry-scarlet

How to access queryClient to invalidate cache?

In my Next app, I am initializing

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

.

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;

Thank you!

How to access queryClient to invalidate cache?

Similar Threads

How to access queryClient to invalidate cache?

Similar Threads

Similar Threads

Similar Threads