React useInfiniteQuery & useQuery caching issue

[ktriviso]

Hi, my React app is using both useQuery and useInfiniteQuery. When using react-query-devtools, I can see the cache is being set and cleared with no issues for queries that used useQuery to fetch the data. But any data fetched using useInfiniteQuery is not setting the cache and I am not able to use invalidateQueries to clear it either. We were previously using a SUPER old version of React query (not Tanstack) and this pattern was working.

I have tried various different solutions with no luck. Below is the exact scenario I am trying to solve for and my current implementation.

Scenario:
Query list of orders. In a modal, delete an order and invalidate the query so that it refreshes and the list of orders does not contain the deleted order. Important to note, the modal does not have access to the useInfiniteQuery refetch method.

Current code:
List page - using this solution, I can see the cache is set in react-query-devtools but it's inactive

const {
  data,
  hasNextPage,
  fetchNextPage,
  isFetching,
  status,
  refetch,
} = useInfiniteQuery({
  queryKey: ["get_orders"],
  queryFn: ({ pageParam = 1 }) =>
  callBackend(ENDPOINT, { method: "GET" }),
  staleTime: 0,
  getNextPageParam: (d, _) => {
    const { current_page, total_pages } = d;
    d.nextCursor;
    // POSSIBLE FIX FOR CACHE NOT BEING SET
    cache.setQueryData(["get_orders"], d);
    return current_page < total_pages ? current_page + 1 : undefined;
  },
  getPreviousPageParam: (d, _) => d.prevCursor,
});

Delete modal

  const mutation = usePalomaMutation(ENDPOINT, "post", null, {
    onSuccess: (res) => {
      cache.invalidateQueries({ queryKey: ["get_orders"] });
    },
  });

[ktriviso]

Update - I was finally able to figure it out. I was able to have the infinite query caching working just fine inside a sandbox environment and realized the issue was with server side rendering which caused the app to re-create the initial QueryClient instance over and over.