我试图在一次成功后重新获取一些查询,但它不起作用!
我使用了两种方法来处理它:使用refetchQueries()
/invalidateQueries()
1-成功时回调
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,
});
};
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;
--
- 编辑**
所以在使用react-query-native-devtools
调试工具后,我在调试器中的第一个标签页中看不到任何查询记录!尽管数据提取得很好。
所以我想这就是为什么在这种情况下重取不起作用!
第一个选项卡中的任何查询都无法重新获取
- 复制步骤:**
- 打开应用程序-活动选项卡(第一个选项卡)
- 检查查询的状态
- 调试器中未记录任何内容
- 导航至任何其他屏幕/选项卡
- 检查质询的状态
调试程序中记录的所有屏幕查询
1条答案
按热度按时间ccrfmcuu1#
根据https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable:
如果您将客户端创建移动到App组件中,并且您的组件由于某些其他原因(例如,路由更改)而重新呈现,则您的缓存将被丢弃:
需要像这样初始化
queryClient
:const [queryClient] = React.useState(() => new QueryClient())