更新时反应查询页面缓存

我在一个页面中获取get API,在另一个页面处理post API。在获取页面中,我应用了分页,页码用于查询键。由于数据在创建新的发布请求时缓存在react查询中,当我在更改页面上浏览提取页面时,它首先显示旧数据,几秒钟后它会重新提取和更新,这会影响用户体验。

API后

function handleCreateOrderRequest(
      data: orderApiRequest
    ): Promise<mutateOrderApiResponse> {
      console.log(data);
      return axios.post(`/order`, data).then((res) => res.data);
    }

    const onSuccess = async () => {
      // navigate("/products/view-product");
      localStorage.removeItem("cart");
      toast.success("Order Created Successfully");
      await queryClient.removeQueries(["all-orders"]);
    };
    const onError = (error: errorType) => {
      toast.info(viewError(error.response.data.message));
    };
    return useMutation({
      mutationFn: handleCreateOrderRequest,
      onSuccess: onSuccess,
      onError: onError,
      retry: 0,
    });
  };

removeQueries 删除了缓存,但我有另一个外部网站,我只是获取API,它显然不会在那里工作。

获取API

  const useFetchAllOrdersService = (
    page: number,
    limit: number,
    uid: string | undefined,
    statusFilter: number,
    // eslint-disable-next-line no-unused-vars
    actions: (order: orderResponseData) => actionType[]
  ) => {
    function fetchCustomerOrderRequest(): Promise<allOrdersApiResponse> {
      return axios
        .get(
          `/order/user?userId=${uid}&page=${page}&limit=${limit}${
            statusFilter != CONSIGNMENT_STATUS.ALL
              ? `&status=${statusFilter}`
              : ""
          }`
        )
        .then((res) => res.data);
    }

    return useQuery({
      queryFn: fetchCustomerOrderRequest,
      keepPreviousData: true,
      queryKey: [`all-orders`, page, statusFilter, uid],
      retry: 0,      ),
    });
  };