ReactJs: invalidateQueries not working after useMutation

Question

I am trying to learn react.js with @tanstack/react-query and so far things are working fine.

However, I am trying to use invalidateQueries to clear the existing cache after insert, update, etc. to fetch the fresh data from the server. But, its not working.

I have already tried various solutions found after googling, but still not success.

main.tsx

import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
...

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 10 * (60 * 1000), // 10 mins
            refetchOnMount: false,
        },
    },
});

ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <QueryClientProvider client={queryClient}>
            ...
        </QueryClientProvider>
    </React.StrictMode>,
);

edit.tsx

const update = async (data: any) => {
    ...
};

export default () => {
    const queryClient = useQueryClient();

    ...

    const { mutate, isLoading } = useMutation({
        mutationFn: update,
        onError: ({ response }) => setErrors(showErrors(response.data)),
        onSuccess: () => {
            queryClient.invalidateQueries([modules.accountTypes.cacheKey]);

            navigate(PATH);
        },
    });

    ...
};

could you share the query you wrote for fetching/mutating data with key modules.accountTypes.cacheKey — Ravi Yadav
– Ravi Yadav, Commented Mar 14, 2024 at 11:05

Amirreza · Accepted Answer · 2024-03-14 12:11:59Z

1

I tried your code using @tanstack/react-query v5 and It worked. Here is the code I tested:

Query

function MyQuery() {
  const { isLoading, isError, error, data } = useQuery({
    queryKey: ["accountTypes"],
    queryFn: () =>
      fetch("https://jsonplaceholder.typicode.com/posts?_limit=5").then(
        (res) => {
          console.log('Query is called.');
          return res.json();
        }
      ),
  });

...

Mutation

function MyMutation() {
  const queryClient = useQueryClient();

  const navigate = useNavigate();

  const { isPending, isError, error, data, mutate } = useMutation({
    mutationFn: () =>
      fetch("https://jsonplaceholder.typicode.com/photos?_limit=5").then(
        (res) => res.json()
      ),
    onError: ({ response }) => setErrors(showErrors(response.data)),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["accountTypes"] });
      navigate("/my-path");
    },
  });

...

You can also try making onSuccess an async function, put await before queryClient.invalidateQueries and see what happens.

answered Mar 14, 2024 at 12:11

Amirreza

272 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Mr.Singh Over a year ago

My react-query version is 4, let me try on 5.

Amirreza Over a year ago

If you want to stick to the v4, Adding return before the invalidate function may also help. Saw this as a solution in another question.

Mr.Singh Over a year ago

Ok, could you please post the link of that question..? So I can have a look.

Amirreza Over a year ago

Here you are: link

Mr.Singh Over a year ago

Thank you @Amirreza. I looked at the posted link and though, adding return may provide the solution, it will also prevents the redirection code from executing, written after. Therefore, I chose to upgraded from v4 to v5 and it worked. Many thanks again..:)

|

Collectives™ on Stack Overflow

ReactJs: invalidateQueries not working after useMutation

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related