queryCache.find() is undefined

Question

I am having a problem with react query. When I delete an item from my list with mutation, I need to refresh the page to see the change. And when I try queryCache.find('key') I get undefined. Also I dont have a method queryCache.refetchQueries() (saw that on a tutorial but it seems its depr. )

Here is my code:

const { data, status, error, refetch } = useQuery('posts', fetchPosts);

 const queryCache = new QueryCache();
 const query = queryCache.find('posts');

 console.log(query); // undefined

Here is a mutation:

 const mutation = useMutation(deletePost, {
        onSuccess:  () => {
            // can I here somehow do a refetch?
        }
    });

    const deleteOne = async (id: string) => {
      mutation.mutate(id)
    }

Why am I getting undefined and how to solve the problem?

Answer 1

Which version of react-query are you working with? In v3, which is the latest major version, you will need to work with queryClient instead of queryCache:

const queryClient = useQueryClient()
const posts = queryClient.getQueryData('posts')

for refetches after mutation, it's generally best to use:

queryClient.invaliateQueries("posts")

This is also how it's shown in the docs: invalidations-from-mutations