标签: react-query

为了这个问题，我们首先假设存在这样的实体：

export interface Event {
    id: number;
    date: Date;
}

然后我们假设有具有此类端点的后端：

GET /events -> returns all events
GET /events?startDate=dateA&endDate=dateB -> returns all events between dateA and dateB

我在前端代码中创建了包含 4 个方法（每个 CRUD 操作一个）的钩子，如下所示：

export function useEvents() {
    const getEvents() = async () => {
        const response = await axios.get(`events`);
        return response.data;
    }
    const postEvent()...
    const updateEvent()...
    const deleteEvent()...

    const query = useQuery('events', getEvents);
    const postMutation = ...
    const updateMutation = ...
    const deleteMutation = ...

    return { query, postMutation, updateMutation, deleteMutation …

我在我的应用程序中使用 ReactQuery。我创建了一个带有状态的自定义钩子。我导出在我的应用程序中更改此状态的函数。我希望在更改状态后我将使用新状态重新获取。但这并没有发生。我在更改状态上添加 UseEffect 并在refetch()状态更改后执行，但它会在更新状态之前获取以前的数据和主体。

所以在里面UseEffect我看到主体已更改（使用新数据） - >调用重新获取 - > useQuery 调用（）=> fetchCommissionsData（主体），但使用旧主体（不是新数据）

我正在使用：“react”：“^18.1.0”，“react-query”：“^3.39.1”

import React, { useState, useEffect } from 'react'
import { getCommissionsData, getSummary } from "../utils/apis";
import { queryKeys } from "../utils/constants";
import { useMutation, useQueryClient, useQuery } from "react-query";

//REST API
const fetchCommissionsData = async (request) => {
    const response = await getCommissionsData(request)
    return response
}

export function useCommissionsData() {
const [body, setBody] = useState(null)
const queryClient = useQueryClient()
const searchValues = queryClient.getQueryData(queryKeys.searchValues) …

当我更改页面状态以导致查询重新运行时，它会渲染组件 3 次，并且前 2 次是相同的。为什么会发生这种情况？

{
    "status": "loading",
    "isLoading": true,
    "isSuccess": false,
    "isError": false,
    "isIdle": false,
    "dataUpdatedAt": 0,
    "error": null,
    "errorUpdatedAt": 0,
    "failureCount": 0,
    "isFetched": false,
    "isFetchedAfterMount": false,
    "isFetching": true,
    "isRefetching": false,
    "isLoadingError": false,
    "isPlaceholderData": false,
    "isPreviousData": false,
    "isRefetchError": false,
    "isStale": true
}   



function App() {
  const [page, setPage] = React.useState(1);
  const state = useQuery(["todos", page], fetchData);

  console.log(state);
  return (
    <>
      <button
        onClick={() => {
          setPage(page + 1);
        }}
      >
        Next
      </button>
    </>
  );
}

我正在重构一段代码，每当我尝试导入“react-query”时，它都会显示这种类型的错误

因此，我有这个 API，如果您想从中获取任何数据，则必须添加标头'Authorization':'access token'才能访问该 API。为此，'access token'首先您必须使用提供的凭据向 API 发出 POST 请求，它将返回令牌。
但问题是令牌将在 12 小时后过期。由于我正在使用react-query，这就是我访问 API 的方式：

useQuery(['data'], () =>
axios
  .get('/endpoint', { headers: {
      Authorization:`${token}`,
    },
  })
  .then((res) => res.data.data)
);

${token}我手动放置从 Postman API 获得的令牌的变量在哪里（是的，我手动添加了它。我在其中执行了一个发布请求并复制粘贴了它），但是
因为它会在 12 小时后过期。我根本不知道如何自动刷新令牌。
该 API 有一个端点，您可以使用“旧令牌”作为标头刷新令牌，它将返回一个新令牌。
一旦令牌过期，我是否需要使用状态管理来管理令牌？

令牌过期后刷新令牌的最佳方法是什么？

我的应用程序中有很多自定义react-query挂钩，例如：

export const useItems = () => {
  return useQuery(["items"], async () => {
    const response = await axios.get("/api/items");

    if (response.status !== 200) {
      throw response.data.error ?? "Unknown error";
    }

    return response.data;
  });
}

export const useVenueSearch = (placeId) => {
  return useQuery(["places", placeId], async () => {
    const response = await axios.get(`/api/places/${placeId}`);

    if (response.status !== 200 && response.status !== 404) {
      throw response.data.error ?? "Unknown error";
    }

    return response.data;
  });
}

...

在任何时间点，在任何这些自定义挂钩 API 调用中，服务器都可能决定用户需要接受新的条款和条件才能继续使用该产品。在这种情况下，服务器返回已知的 4xx 响应。 …

我在打字稿项目中使用react-query，并且在尝试将 useMutation() 挂钩与 graphql 查询一起使用时遇到难以解释的类型错误。

示例代码：

useMutation(
    async (
      parameter1: string,
      parameter2: string
    ) => {
      const response = await sdk.myMutation({
        parameter1: parameter1,
        parameter2: parameter2,
      });
      return response;
    },
    {
      onSettled: () => queryClient.invalidateQueries([CACHE_KEY]),
    }
);

类型错误：

  No overload matches this call.
  Overload 1 of 4, '(mutationFn: MutationFunction<{ __typename: "IdResponse"; id: string; }, string>, options?: Omit<UseMutationOptions<{ __typename: "IdResponse"; id: string; }, unknown, string, unknown>, "mutationFn"> | undefined): UseMutationResult<...>', gave the following error.
    Argument of type '(parameter1: string, parameter2: string) => …

Next JS 13 于上个月刚刚发布，完全改变了数据的获取方式，同时还通过使用根布局.js 提供了 _app.js 和 _document.js 的替代方案。以前在 Next JS 12 及更低版本中，要使用 Hydration 方法使用 React Query SSR 功能，您需要像这样设置 _app.js 文件：

import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
import queryClientConfig from '../queryClientConfig';

export default function MyApp({ Component, pageProps }) {

  const queryClient = useRef(new QueryClient(queryClientConfig));
  const [mounted, setMounted] = useState(false);

  const getLayout = Component.getLayout || ((page) => page);

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) return null;

  return (
    <ErrorBoundary FallbackComponent={ErrorFallbackComponent}>
      <QueryClientProvider client={queryClient.current}>
        <Hydrate state={pageProps.dehydratedState}>
          <AppProvider>
            {getLayout(<Component {...pageProps} …

我读了一篇关于使用react-query作为状态管理器的文章，现在我尝试用react-query（版本4）替换我的应用程序中的上下文。

之前，我创建了一个上下文，其中useContext()存储了登录用户的用户帐户对象。我使用react-query来获取这些数据，然后useReducer()修改帐户对象。然而，我意识到这是一团糟，相关数据无论如何都在react-query中，所以我应该摆脱上下文和reducer，直接使用react-query（我在我所做的查询中生成用户帐户对象与反应查询）。

我在自定义挂钩中生成用户帐户对象：

function useUser(): UseQueryResult<User, Error> {
  const query = getInitialUserUrl;
  const platform = usePlatformContext();
  return useQuery<User, Error>(
    queryKeyUseUser,
    async () => {
      const data = await fetchAuth(query);
      if (didQueryReturnData(data)) {
        return new User(platform, data[0]);
      }
      return new User(platform);
    },
    {
      refetchOnReconnect: 'always',
      refetchInterval: false,
    },
  );
}

export default useUser;

现在我有一个突变，我可以验证用户的电子邮件地址（使用上下文的旧方法）：

const useMutationVerifyEmail = (): UseMutationResult<RpcResponseEmailVerify, Error, FormEmailVerifyInput> => {
  const { userObject } = useUserContext();

  return useMutation(
    (data: FormEmailVerifyInput) …

我的反应组件中有一些useQuery()这样的调用：

const {...} = useQuery(["person.getAll", ....
const {...} = useQuery(["person.getCounts", ....

然后在一些 DELETE/POST 请求完成后的点击事件中，我尝试使上述查询无效：

queryClient.invalidateQueries("person");

但它不会触发重新获取。我认为这是我的一些状态管理问题，但后来我尝试使特定查询无效，例如

queryClient.invalidateQueries("person.getAll");

而且效果很好..

部分查询键匹配在react-query中不起作用吗？