How do I use invalidateQueries outside of a component in SSR environment?

[hwookim]

I'm using it this way to have different queryClients for different clients.

export const createQueryClient = () =>
  new QueryClient({
    queryCache: new QueryCache({
      onError: (error) => {
        console.error(error);
      },
    }),
    defaultOptions: {
      queries: {
        useErrorBoundary: true,
        refetchOnWindowFocus: false,
      },
      mutations: {
        useErrorBoundary: true,
      },
    },
  });

export const getServerSideProps: GetServerSideProps = async (ctx) => {
  const queryClient = createQueryClient();

  return {
    props: {
      dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
    },
  };
};

If it weren't for SSR, I could simply create a global queryClient and use that queryClient.invalidateQueries.
But I'm not sure how to use invalidateQueries outside of the component (in an environment where useQueryClient isn't available).

I want to use invalidateQueries when certain functions are called inside zustand's store.

[TkDodo]

not sure if a zustand store should be coupled to a queryClient, but if you want that, you need to wrap zustand with zutand/context and pass the queryClient to it as a "prop"

https://github.com/pmndrs/zustand#react-context

[hwookim]

It would be nice if there was a way to do it directly with import or something, but....
I created a zustand store in context for SSR, so I'll have to apply that way.
Thanks for the answer!