invalidate infinite queries is too fast with use mutation hook

[ccreusat]

Hello,

I didn't open a bug because I'm not sure it is ...

Dependencies :
"react": "18.2.0"
"vite": "4.1.1"
"@tanstack/react-query": "4.26.1"

Let me explain what I'm trying to do :

• Fetching data with the use useinfinitequery hook 🆗
• I need to delete a resource and I use useMutation hook 🆗
• I call invalidateQueries to refetch the data onSuccess but it doesn't update...
  • I have to invalidate again through ReactQuery devtools
  • I have to refresh my page...
  • I have to CTRL+S in my IDE (VSCode), Hot Reload (ViteJS) will do the trick...

When I use the mutation, my request to delete the resource is sent and the invalidateQueries too.. I'm thinking it's happening too fast because if I call invalidateQueries inside a setTimeout of 1000ms it's working.

Example :

const { data, isLoading, fetchNextPage, isFetching } = useInfiniteQuery({
    queryKey: [
      "context",
    ],
    queryFn: async () => await fetchData,
    getNextPageParam: (lastPage) =>
      lastPage.pagination.startIdx + lastPage.pagination.pageSize ?? undefined,
  });

useMutation hook :

const deleteFolder = useMutation({
  mutationFn: async () => await deleteFolder(params),
  onSuccess: () => queryClient.invalidateQueries(["context"]),
});

Using deleteFolder:

<button onClick={() => deleteFolder.mutate()}>Delete Folder</button>

params comes from local state and gives one or many IDs to delete resource(s)

If I add the setTimeout, it's working but I don't like this hack..

const deleteFolder = useMutation({
  mutationFn: async () =>
    await deleteFolder(params),
  onSuccess: () => {
    setTimeout(async () => {
      return await queryClient.invalidateQueries(["context"]);
    }, 1000);
  },
});

Is it possible to wait the server ?
Is it normal ?
Do I have to perform optimistic update and not waiting for the server ?
Is invalidateQueries needs to be await ? (async / await)

🙏🏼 Thank you for your help !

[clementcreusat]

Update :
With optimistic update on onSuccess, I will not use invalidateQueries because it refetch the previous data.. I think there is something wrong or some pending time between mutation request on server and refetch...

So just doing optimistic update without invalidate works. It updates my data and if I come back or refresh my page, data is up to date..

Would be nice to know if I'm doing something wrong or not with invalidateQueries... here is the latest example :

const [params, setParams] = useState({...});

const queryKey = ["context"];
const createFolder = useMutation({
    mutationFn: async () =>
      await createFolder(params),
    onSuccess: async (data) => {
      await queryClient.cancelQueries({ queryKey });
      const previousData = queryClient.getQueryData<ISearchResults>(queryKey);

      if (previousData) {
        return queryClient.setQueryData<
          InfiniteData<ISearchResults> | undefined
        >(queryKey, (prev) => {
          if (prev) {
            return {
              ...prev,
              pages: prev?.pages.map((page) => {
                return {
                  ...page,
                  folders: [...page.folders, data],
                };
              }),
            };
          }
          return undefined;
        });
      }
    },
    onSettled: () => {
      console.log("settled, invalidating");
      // queryClient.invalidateQueries({ queryKey });
    },
  });