Client Query Invalidation does not invalidate server side caches

[MokDevelopment]

Describe the bug

When creating a queryClient outside my getServerSideProps (next.js) I am able to cache queries on the server, giving visitors of the app the ability to request a cached api fetch which is not made for every client again and again.

This works- however when trying to invalidate the cache via
queryClient.invalidateQueries() within

1. a server side api function I am not able to invalidate the queryClient. Seems as the reference to the queryClient is not the same. I am using new queryCient() instead of useQueryClient as it is not available for for non react components.
2. Also when trying to invalidate the queryClient on the client (browser) I am able to force a refetch for this particular user / client - but every other new request will get the old version cached by the server.

So how do I invalidate cached queries made by node.js then? Can this be done server side or client side?
Is there a useQueryClient variant for non react components?

I am not sure if this is a bug or was never planned to be working.

api/invalidate.ts:

import { QueryClient } from 'react-query';

import { NextApiRequest, NextApiResponse } from "next"

const queryClient = new QueryClient();

export default async function handler(
  request: NextApiRequest,
  response: NextApiResponse
) {

  try { 
    // Get QueryClient from the context
    queryClient.invalidateQueries()

    return response.json({status:'ok'})
  }
}

examplePage.tsx:

const queryClient = new QueryClient()
export async function getServerSideProps(context) {
//preview mode - make an authenticated request
    await queryClient.prefetchQuery(
      [KEY_ARTICLE_LISTING, { id, locale }],
      () => fetchListingWithAuth({ locale, context, path }),
      { staleTime: Infinity }
    )
}

Your minimal, reproducible example

not created so far as 1st needs clarification

Steps to reproduce

1. Create a next.js project
2. Prefetch on the server
3. try to invalidate the cache

Expected behavior

Caches get invalidated

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

osx 12.1
"react-query": "^3.39.2",
"react": "^18.2.0",
"next": "^12.1.4",

react-query version

3.39.2

TypeScript version

No response

Additional context

No response

[TkDodo]

I don't really know what nextJs does with variables created on the server, outside of getServerSideProps. I guess this also depends on how it is deployed - for example, edge functions probably behave differently.

The docs state that you should:

Create a new QueryClient instance inside of your request handler. This ensures that data is not shared between different users and requests.

So I would say support for what you're trying to do is at best undocumented.

There is also a discussion here where the idea was to create the client inside getServerSideProps, and then persist it to redis with the persister plugins:

• Custom CacheProvider for queryClient in Server-Side environment (Next.js) #3563

[MokDevelopment]

@TkDodo Thanks for ur input Dominik.
I could not find any solutions regarding this topic. What I found is this stackOverFlow post here:
https://stackoverflow.com/questions/73307822/server-side-api-response-caching-with-react-query-and-next-js

[slava-lu]

I guess it also depends with what you mean that invalidateQueries doesn't work. Invalidation just marks queries as stale and refetches those that have active observers. Observers are created via useQuery so on the server, you have none. So if you'd expect invalidateQueries to refetch the queries, this wouldn't happen.

you can use refetchQueries though, that always refetches...

It would be very useful feature if queryClient.fetchQuery sees stale data, it refetches.

[TkDodo]

It would be very useful feature if queryClient.fetchQuery sees stale data, it refetches.

It does that? You just need to provide a staleTime to fetchQuery. This is documented here: https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchquery

[TkDodo]

@MokDevelopment the way most people are using fetches on the server is to just fetch per request, in getServerSideProps. That will seed the client side cache. This is not ideal but a limitation of nextJs that will likely get better with the new router / layouts rfc.

If you want caching on the server, please see the discussion about persisting the cache somewhere
If you want on the fly invalidation like ISR, you'd need to create an endpoint that you can hit that will then invalidate the cache. pretty much what is documented here: https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration#using-on-demand-revalidation

[slava-lu]

It would be very useful feature if queryClient.fetchQuery sees stale data, it refetches.

It does that? You just need to provide a staleTime to fetchQuery. This is documented here: https://tanstack.com/query/v4/docs/reference/QueryClient#queryclientfetchquery
well, it does not work for me in next.js when putting the queryClient outside of the getServerSideProps. It ignores the stale time and does not refetch.

[TkDodo]

well, it does not work for me in next.js when putting the queryClient outside of the getServerSideProps. It ignores the stale time and does not refetch.

show a reproduction?