主页 / coding / 问题 / 78841619
Accepted
wepro01
Asked: 2024-08-07 10:22:13 +0800 CST

React Query 使查询无效，无法在 onSuccess 上工作

  • 772

我想使用无效查询，但它没有获取或触发它。

我有一个仪表板，并且我在导航上的用户屏幕上。我从用户屏幕改变一个操作，并想刷新其他文件中的仪表板。

用户：（此处 onSuccess 是未触发的 invalidateQueries）

  const {
    isPending,
    mutate
  } = useMutation({
    mutationKey: ["SETTINGS"],
    mutationFn: async (params: TMutateSettingsParam) => {
      console.log(params);
      const res = await axiosPrivate.post(`${URL}/auth/deleteAccountByAdmin`, params, {
        headers: headersJSON,
        withCredentials: true
      });

      const data: IReturnApi<null> = res.data;

      return data;
    },
    onSuccess: (data) => {
      queryClient.invalidateQueries({queryKey: ['dashboard']})
      toast.success(data.message);
    },
    onError: (err: AxiosError<IReturnApi<IValidationError[]>>, _variables) => {
      if(err.response) {
        toast.error(err.response.data.message);
      } else {
        toast.error('Es ist ein Fehler aufgetreten. Bitte wenden Sie sich an den Support.');
      }
    }
  });

这是我的 app.tsx

export const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <QueryClientProvider client={queryClient}>
        <AuthProvider>
          <App />
        </AuthProvider>
      </QueryClientProvider>
    </BrowserRouter>
  </React.StrictMode>,
)

这是我想要使其无效的仪表板查询：

  const { 
    isLoading,
    isError,
    data,
    error
  } = useQuery({
    queryKey: ['dashboard'],
    refetchOnWindowFocus: false,
    queryFn: async () => {
      const res = await axiosPrivate.get(`${URL}/dashboard/getAll`, {
        headers: headersJSON,
        withCredentials: true
      });
    
      const data: IDashboardData = await res.data;
      return data;
    }
  });

我做错了什么？

reactjs

1 个回答

  1. Best Answer

    我认为您应该像这里描述的那样使用 queryClient.refetchQueries() 。但为了正常工作，请确保将 useQuery staleTime 设置为大于 0 的值。例如 5*1000。

    因此，在您的用户页面上，您可以执行一个queryClient.refetchQueries({queryKey: ['dashboard']})操作，当您到达仪表板时，不会发出任何新的请求。

    默认情况下，表示数据是否仍然有效的 staleTime 设置为零。如果不更改它，您将queryClient.refetchQueries()在加载页面时获得一次使用提取和另一次提取。

    您可以阅读本指南，其中描述了有关 tanstack 查询和 staleTime 的所有重要信息：文档

    • 1

相关问题