Refetching queries does not work - React Query

Question

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
      },
    },
  );
};

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();
  };

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,
  });
};

App.tsx

const App: React.FC<AppProps> = ({}) => {
  const queryClient = new QueryClient();
  if (__DEV__) {
    import('react-query-native-devtools').then(({addPlugin}) => {
      console.log('addPlugin');
      addPlugin({queryClient});
    });
  }

 
  useEffect(() => {
    RNBootSplash.hide({fade: true}); // fade
  }, []);


  return (
    <GestureHandlerRootView style={{flex: 1}}>
      <QueryClientProvider client={queryClient}>
        <BottomSheetModalProvider>
          <AppContainer />
        </BottomSheetModalProvider>
      </QueryClientProvider>
    </GestureHandlerRootView>
  );
};

export default App;

--

EDIT

So after using the react-query-native-devtools Debug tool, I can't see any query in the first tab recorded in the debugger! Although the data fetched well.

So I guess that's why the refetch did not work in this case!

Any query in the first tab I can't refetch it again

Steps to reproduce:

• open App - Active Tab (first tab)
• check the status of the queries
• nothing recorded in the debugger
• Navigate to any other screen/tab
• Check the status of queries

all screen queries recorded in the debugger

Answer 1

Per https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable:

If you move the client creation into the App component, and your component re-renders for some other reason (e.g. a route change), your cache will be thrown away

In most of the cases you are wrapping your whole app with the query client provider and creating a new instance of the QueryClient object. When your app re-render then a new instance of the query client object will be created with new cache. You can solve that issue by preserving the object inside a state like below:

const [queryClient] = React.useState(() => new QueryClient())

instead of just doing this :

const queryClient = new QueryClient() .