React useInfiniteQuery & useQuery caching issue

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,
});

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"] });
    },
  });

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

TanStack•14mo ago•

2 replies

conventional-black

React useInfiniteQuery & useQuery caching issue

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,
});

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"] });
    },
  });

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

React useInfiniteQuery & useQuery caching issue

Similar Threads

React useInfiniteQuery & useQuery caching issue

Similar Threads

Similar Threads

Similar Threads