Invalidate query in clientAction/clientLoader in Remix

[pedro199288]

I have implemented react query with SSR in Remix following this guide: https://tanstack.com/query/latest/docs/framework/react/guides/ssr#full-remix-example and using this package https://github.com/maplegrove-io/use-dehydrated-state as recommended in the guide.

However, I'm encountering an issue with invalidating query data on a Remix clientAction. Here is an example:

  export const clientAction = async ({
    serverAction,
    params,
  }: ClientActionFunctionArgs) => {
    const serverResponse = await serverAction<typeof action>();
    queryClient.invalidateQueries({ <-- this dons't work
      queryKey: ["anyKey"]
    });
    // ...rest of the code with client side redirection in it
  }

That doesn't work because because queryClient is not available inside the clientAction (it is inside a useState state as recommended in the guide). The queryClient can be used in react code with useQueryClient, but it can't be inside a clientAction. Any approach/suggestion to solve this? Thanks in advance! 😄

[TkDodo]

If you use SSR, you can't really create a global queryClient because that would be shared between requests. You can do what we recommend for nextJs:

function makeQueryClient() {
  return new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 60 * 1000,
      },
    },
  })
}

let browserQueryClient: QueryClient | undefined = undefined

function getQueryClient() {
  if (typeof window === 'undefined') {
    // Server: always make a new query client
    return makeQueryClient()
  } else {
    // Browser: make a new query client if we don't already have one
    if (!browserQueryClient) browserQueryClient = makeQueryClient()
    return browserQueryClient
  }
}

[pedro199288]

Thanks for the quick response, unfortunately it doesn't seem to work for my case. Let me explain:

I'm creating the queryClient as you mentioned in a useState in my root component:

const [queryClient] = React.useState(() => getQueryClient());

This queryClient has all the data the app needs to work (it is prefetched on root loader)

Then I import the getQueryClient (exported from root) in the clientLoader where I want to invalidate some of that prefetched data in root loader, but in the loader, the queryClient does not have the same data as the queryClient used with useQueryClient() hook. If I do queryClient.getQueryData in both queryClients, the one with the hook contains the data, and the one in the client loader does not.

[TkDodo]

if you use the code I shared above, you don't need to put the client in state:

const queryClient = getQueryClient()

should be enough. Then, put that client into the QueryClientProvider. After that, what you read with useQueryClient should be the same as calling getQueryClient() in a clientLoader.