标签: react-query

我不希望我的组件在安装并且缓存中已经有查询时总是重新获取，所以我这样做了：

export const App = ({ props }) => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
      },
    },
  })

  return (<QueryClientProvider client={queryClient}>{...restOfMyApp}</QueryClientProvider>)
}

当我保存一些配置时，我尝试使用第一个键和那个键使我的查询无效queryClient.invalidateQueries()。在React-Query devtools中，它确实显示查询已无效，但它只是保留相同的结果并且不重新获取查询。

如何使要重新获取的查询无效，但不必在每次安装组件时都启动查询？

感谢您的帮助！

我在我的 React Native 应用程序中使用 React-Query 进行 api 调用。后端是基于graphql的。对于查询和突变请求没有问题。我只是使用 useMutation 和 useQuery 来获取数据。我的问题是我应该通知用户来自 graphql 订阅的新通知。而且我不知道如何将它与反应查询一起使用。我在反应查询文档中找不到任何文档。谢谢你的帮助。

我使用 codegen + React 查询 + 我自己的 fetcher 来处理 API 调用。 https://www.graphql-code-generator.com/plugins/typescript-react-query#using-fetch-with-codegen-configuration

我的要求：

• 我需要一个自定义提取器 - 来解决自定义后端错误（我需要从响应中提取一些信息）
• 我需要有一个选项来为每个查询传递额外的标头（因此我生成的钩子需要能够获取一些额外的参数并在 API 调用中使用它们）

我认为 option:fetcher: 'fetch'符合我的第二个要求（我可以为每个钩子添加额外的标头/端点），但我不能使用我自己的格式抛出 graphql 错误（有一个来自本机 fetch 方法的默认抛出）。

是否有任何选项可以创建一个解决方案（可能结合适当的配置+自定义获取器）来满足这两个要求？谢谢！

我正在使用包含 axios 的 React-query 来获取 API，并尝试将响应保存/下载到 Excel 文件并存储它。下面是代码和 api 响应。我无法确定是否遗漏了任何标头、响应类型是否不正确或 RNFS.writeFile 调用是否错误。

import axios from 'axios';\nimport RNFS from 'react-native-fs';\nimport {useQuery} from 'react-query';\n\nexport function useExportGains(\n  accountId: number,\n  fileFormat: string,\n  fromDate: string,\n  toDate: string,\n) {\n  const getReport = async () => {\n    const baseApiUrl = 'https://devenv.product.com/API'; // api url\n    const Api = axios.create({baseURL: baseApiUrl});\n    const params = {\n      fromDate: fromDate,\n      toDate: toDate,\n      contextFilter: {\n        appUserIds: [1],\n      },\n    };\n\n    const mimeType =\n      fileFormat === 'pdf'\n        ? 'application/pdf'\n        : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';\n\n    Api.get(`Reporting/AccountAnalytics/${accountId}/exportGains/${fileFormat}`, {\n      params,\n …

我目前正在考虑满足我的专业项目需求的完美架构。我读了很多关于（干净）架构的文章，我认为我希望用 React 管理的 UI 与将由“应用程序管理器”管理的应用程序业务逻辑完全分开。问题是我希望“应用程序管理器”配置并触发突变（我认为获取查询可以在组件中使用，没有任何问题）。但由于react-query要求它通过使用hooks位于React组件中，所以我认为这是不可能的。

我错了 ？

是否存在解决方法？

也许您有一个可以更好管理的图书馆？我正在考虑 RTK 查询也许......

我在我的应用程序中使用 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 响应。 …