Expo: Displayed data is stale

[mansum6]

Describe the bug

Expo, React Native: Data still stale after mutation and query invalidation.

Situation: I mutate data displayed on the current screen and then invalidate queries in the 'onSettled' or the 'onSuccess' section.
Problem: Stale data still displayed on the current screen, unless i navigate away from the page and come back.

  const { data, isLoading, isError, refetch } = useQuery(
    'getAllCategories',
    getAllCategories,
    {
      onSuccess: (data) => {
        setSearchResults(Object.values(data));
      },
    }
  );
  const deleteCategoryMutation = useMutation(
    (id) => {
      deleteCategory({ categoryID: id, saveItems: true });
    },
    {
      onSettled: async () => {
        await queryClient.invalidateQueries(['getAllCategories']);
        refetch();
      },
    }
  );

Your minimal, reproducible example

NA

Steps to reproduce

NA

Expected behavior

NA

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

Windows 10,
"react-query": "^3.39.1",
"expo": "~45.0.0",
"react-native": "0.68.2",

react-query version

^3.39.1

TypeScript version

No response

Additional context

No response

[TkDodo]

well, without knowing what your backend is doing, it just seems to me that:

    (id) => {
      deleteCategory({ categoryID: id, saveItems: true });
    },

fires off a mutation, but doesn't wait for deleteCategory to finish. That indicates that onSuccess is called immediately, invalidating the query. That will in turn refetch the query, but the deletion has not yet happened, thus you'll get back the same result from the backend.

Of course, this is just a guess with incomplete information, but have you tried actually returning a Promise from the mutationFn?

Also, moving to discussion, because there is no bug without a reproduction.

[mansum6]

Ok. I changed mutation to async await , which resolved the issue.

  const deleteCategoryMutation = useMutation(
    **async** (id) => {
      **await** deleteCategory({ categoryID: id, saveItems: true });
    },
    {
      onSettled: async () => {
        await queryClient.invalidateQueries('getAllCategories');
      },
    }
  );

I was under the impression that react-query handled all async operation. and none of the async mutation examples use async await.
https://react-query.tanstack.com/guides/mutations

[TkDodo]

The examples return the promise. Async / await is just syntactic sugar...