React Query: Problem with invalidating (refetching) my query data

Question

I am new to React Query, I've read the documents and trying to implement it in my project. My problem is this: when I mutate a data in my queries which I'm mapping and rendering in the component, the mutation happens but the list (my query) doesn't update unless with a refresh. I can't find out what am I doing wrong. here is my code,
My query:

const queryClient = useQueryClient();

 const { isFetching, data, error, isLoading } = useQuery('dataList', async () => {
    const res = await api.get_vouchers({ orderby: 'created_at desc', top: '50' });
    return res.data;
  });

My mutation: (The currentVoucher state is local and get set whenever an item in the list get clicked)

 const patchVoucher = async () => {
    await api.patch_voucher_enabled_code({ voucherCode: currentVoucher.code });
  };

  const voucherMutation = useMutation(patchVoucher, {
    onSuccess: () => {
      return queryClient.invalidateQueries('dataList');
    },
  });

and finally on my button's onClick where I fire mutation:

 onClick={() => {
          voucherMutation.mutate();
        }}

I even tried the optimistic update, in that scenario my optimistic mutation worked well and the list was updated but when the code arrived to "queryClient.invalidateQueries('dataList')", the data changed to before mutation version. It caused me to see the mutated list for a second and then gone.

Abraham Izadi · Accepted Answer · 2022-01-16 08:04:08Z

1

I found out what was my problem finally: We have a cache for our apis, and that prevented the react query to make a new request. so I sent a param to the api when I'm calling it as below:

    const res = await api.get_vouchers({ orderby: 'created_at desc', top: '50', cache: false });

answered Jan 16, 2022 at 8:04

Abraham Izadi

516 bronze badges

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

Collectives™ on Stack Overflow

React Query: Problem with invalidating (refetching) my query data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related