correct-apricot

How to access queryClient to invalidate cache?

In my Next app, I am initializing queryClient from _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. What do you think of something like this, is it okay? It bugs me that I am importing something from _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;