useMutation with @tanstack/react-query doesn't refresh component

Question

When i use useMutate from tanstack/react-query, my useQuery doesn't get updated.

const {
    isLoading,
    error: queryError,
    data: queryData,
  } = useQuery({
    queryKey: ["data"],
    queryFn: async () => {
      try {
        const dataRes = await axios.get("http://localhost:3000/Interface");
        console.log(dataRes);
        return dataRes.data;
      } catch (error) {
        console.error(error);
        return null;
      }
    },
  });

  const { isPending, mutate, error, data } = useMutation({
    mutationKey: ["data"],
    mutationFn: async () => {
        const response = await axios.post(
          "http://localhost:3000/Interface",
          postData,
          { headers },
        );
        return response.data;
    },
    onSuccess: () => {
      console.log('onSuccess');
      return   queryClient.invalidateQueries(['data']);
    }
  });

Even if i try to return invalidateQueries with onSuccess, it doesn't work. I've checked others post but it didn't resolve my issue. Somehow, if i change tab in the browser, it got updated.

Thank you in advance for any answer.

I tried to return invalidateQueries with onSuccess on useMutation.

Your setup looks correct to me. Can you paste a complete example (and a codesandbox) for us to be able try it out? — Slava Knyazev
– Slava Knyazev, Commented Feb 16, 2024 at 19:31
"Somehow, if i change tab in the browser, it got updated." this is an unrelated feature of tanstack query. See refetchOnWindowFocus. — Slava Knyazev
– Slava Knyazev, Commented Feb 16, 2024 at 19:32
@SlavaKnyazev i can't since it's a massive project and can't install dependencies in codesandbox. I tried to mutate with useEffect, refetch manually from the useQuery. Nothing seems to works. I think i should close this post. — Bardhok Ajvazi
– Bardhok Ajvazi, Commented Feb 17, 2024 at 13:54
@SlavaKnyazev Edit: i make it refetch using useQuery work with the help of a button. But when i try to refetch using functions or mutation, it doesn't work. — Bardhok Ajvazi
– Bardhok Ajvazi, Commented Feb 17, 2024 at 14:27
To effectively answer questions, you need to provide a minimal reproducible example stackoverflow.com/help/minimal-reproducible-example. Fork my example here: replit.com/@knyzorg/react-query-demo-so#src/App.jsx — Slava Knyazev
– Slava Knyazev, Commented Feb 18, 2024 at 1:09

Adam Jenkins · Accepted Answer · 2024-02-20 00:34:33Z

1

Just so you know, mutationKey has no relation to queryKey - doesn't matter if they're the same, they have nothing to do with each other.

invalidateQueries is the correct thing to do, but it looks like you're using the wrong parameter, it should be an object with a property of queryKey instead of the queryKey itself.

queryClient.invalidateQueries({queryKey: ['data']});

See the docs

edited Feb 20, 2024 at 0:34

answered Feb 20, 2024 at 0:20

Adam Jenkins

56.3k13 gold badges85 silver badges113 bronze badges

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

Comments

Nay · Accepted Answer · 2024-04-19 23:40:49Z

0

Or you can try:

onSuccess: () => {
     queryClient.refetchQueries({ queryKey: ['data'] })
  }

answered Apr 19, 2024 at 23:40

Nay

7271 gold badge8 silver badges14 bronze badges

Comments

KHAWAR SHEHZAD · Accepted Answer · 2024-09-25 06:30:36Z

export const useContactListQuery = (page = 1, search = '') => {
  const auth = useAuth();
  return useQuery({
    queryKey: ["contacts", page, search],
    queryFn: async () => {

      const response = await api.get("/api/common/contacts/", {
        params: {
          page: page,
          pageSize: 10,
          search: search,
        },
        headers: { 'Authorization': `Bearer ${auth.token}` }
      });
      return response.data;
    },
  });
};

Step1: first Import this hook:

import { useContactListQuery } from "../../hooks/GetRequest";

Step 2: Declaring the Hook Look Like this.

  const { data, isLoading, isError, error } = useContactListQuery(page, search);

Step 3:

const contacts = data?.results || [];
const totalRecords = data?.pagination?.total || 0;
const pageSize = data?.pagination?.pageSize || 10;

Step 4:

{contacts.map((data, index) => (  ....
)}

Collectives™ on Stack Overflow

useMutation with @tanstack/react-query doesn't refresh component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related