重新获取查询不起作用 - React Query

Question

我试图在一次成功后重新获取一些查询，但它不起作用！

我用了两种方法来处理它：使用refetchQueries()/invalidateQueries()

1-onSuccess回调

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

第二种方式

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

我想在成功后重新获取的查询示例

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

应用程序.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;

--

编辑

所以使用react-query-native-devtools调试工具后，我在调试器中记录的第一个选项卡中看不到任何查询！尽管数据获取得很好。

所以我想这就是为什么在这种情况下重新获取不起作用！

第一个选项卡中的任何查询我都无法再次重新获取

重现步骤：

• 打开应用程序 - 活动选项卡（第一个选项卡）
• 检查查询的状态
• 调试器中没有记录任何内容
• 导航到任何其他屏幕/选项卡
• 检查查询的状态

调试器中记录的所有屏幕查询

Answer 1

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

如果您将客户端创建移动到 App 组件中，并且您的组件由于某些其他原因（例如路由更改）重新渲染，您的缓存将被丢弃：

需要queryClient这样初始化：

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