stormy-gold

Refetching queries does not work

I'm trying to refetch some queries after one success but it's not working! I used two ways to handle it by using refetchQueries() / invalidateQueries() 1- onSuccess callback

export const useMutateAcceptedOrder = () => {
  const queryClient = useQueryClient();
  return useMutation(
    ['AcceptedOrder'],
    (bodyQuery: AcceptedOrderProps) => acceptOrder(bodyQuery),
    {
      onSuccess: () => {
        console.log('success, refetch now!');
        queryClient.invalidateQueries(['getNewOrders']); // not work
        queryClient.refetchQueries(['getNewOrders']); // not work
      },
      onError: () => {
        console.error('err');
        queryClient.invalidateQueries(['getNewOrders']); // not work
      },
    },
  );
};

export const useMutateAcceptedOrder = () => {
  const queryClient = useQueryClient();
  return useMutation(
    ['AcceptedOrder'],
    (bodyQuery: AcceptedOrderProps) => acceptOrder(bodyQuery),
    {
      onSuccess: () => {
        console.log('success, refetch now!');
        queryClient.invalidateQueries(['getNewOrders']); // not work
        queryClient.refetchQueries(['getNewOrders']); // not work
      },
      onError: () => {
        console.error('err');
        queryClient.invalidateQueries(['getNewOrders']); // not work
      },
    },
  );
};

second way

 const {mutateAsync: onAcceptOrder, isLoading} = useMutateAcceptedOrder();
 const acceptOrder = async (orderId: string) => {
    const body = {
      device: 'iPhone',
      version: '1.0.0',
      location_lat: '10.10',
      location_lng: '10.10',
      orderId: orderId,
      os: Platform.OS,
      source: 'mobile',
      token: userInfo.token,
    };
    await onAcceptOrder(body);
    queryClient.refetchQueries(['getNewOrders']); // not work
    queryClient.invalidateQueries(['getActiveOrders']); // not work
    handleClosetModalPress();
  };

 const {mutateAsync: onAcceptOrder, isLoading} = useMutateAcceptedOrder();
 const acceptOrder = async (orderId: string) => {
    const body = {
      device: 'iPhone',
      version: '1.0.0',
      location_lat: '10.10',
      location_lng: '10.10',
      orderId: orderId,
      os: Platform.OS,
      source: 'mobile',
      token: userInfo.token,
    };
    await onAcceptOrder(body);
    queryClient.refetchQueries(['getNewOrders']); // not work
    queryClient.invalidateQueries(['getActiveOrders']); // not work
    handleClosetModalPress();
  };

sample of query I wanted to refetch after the success

export const useNewOrders = (bodyQuery: {token: string | null}) => {
  console.log('token>>', bodyQuery.token);
  return useQuery(['getNewOrders'], () => getNewOrders(bodyQuery), 
  {
    enabled: bodyQuery.token != null,
  });
};

export const useNewOrders = (bodyQuery: {token: string | null}) => {
  console.log('token>>', bodyQuery.token);
  return useQuery(['getNewOrders'], () => getNewOrders(bodyQuery), 
  {
    enabled: bodyQuery.token != null,
  });
};

8 Replies

stormy-goldOP•3y ago

After using Debug tool react-query-native-devtools I have bottom tabs any query in the first screen is not recorded in the debug tool!!

stormy-goldOP•3y ago

Video: https://www.veed.io/view/47449fb9-c883-4740-9475-748563dcc086?source=compressor-sharing

Anonymous

VEED

VEED - Project Name

Make stunning videos with a single click. Cut, trim, crop, add subtitles and more. Online, no account needed. Try it now, free. VEED

stormy-goldOP•3y ago

When I change the default tab to the second one and navigate from tab 2 to tab 1, I can see all tab 1 queries executed in the debugger

sensitive-blue•3y ago

Is there already a query in the cache with key ‘getNewOrders’ when you do the mutation?

adverse-sapphire•3y ago

because I'm seeing enabled here: If the query is not enabled, it will not be targeted by refetchQueries / invalidateQueries. The only way to refetch a disabled query is by using refetch returned from useQuery. if your query is enabled, it should work.

stormy-goldOP•3y ago

@mark salsbery no @TkDodo 🔮 But the enabled is true (the token already exists)! and the data comes from the API "if you saw the video" it also not be targeted by refetchQueries / invalidateQueries? And now i delete the enabled and still, the issue exists! Nothing was recorded in the debugger, and refetchQueries / invalidateQueries not works

adverse-sapphire•3y ago

could be one of those issues: https://tkdodo.eu/blog/react-query-fa-qs#why-are-updates-not-shown otherwise, please show a reproduction.

React Query FAQs

Answering the most frequently asked React Query questions

sensitive-blue•3y ago

@Anas Without a matched key already cached then I wouldn’t expect reFetch or invalidate to do anything…useQuery should work though 😉

Gaming

Programming

Refetching queries does not work

Did you find this page helpful?