标签: react-query

我正在编写一个搜索组件，它使用反应查询来获取数据。

export default function useSearchResults({
    query,
}: IUseGetSearchResultsProps): QueryObserverResult<IResponse<ISearchResult>> {
    return useQuery(
        [SEARCH_RESULT_QUERY_KEY, { query }],
        (): Promise<IResponse<ISearchResult>> => getSearchResults({ query }),
        {
            enabled: false,
            keepPreviousData: true,
        }
    );
}

然后我将其导入到我的组件中，并在用户输入搜索词时重新获取数据：

  const [searchTerm, setSearchTerm] = React.useState<string>("");
  const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    e.preventDefault();
    setSearchTerm(e.target.value);
  };

  const { data, refetch } = useSearchResults({ query: searchTerm });

  React.useEffect(() => {
    if (searchTerm.length > 0) {
      refetch();
    }
  }, [searchTerm]);

searchTerm有一个要求，当ie中没有任何内容searchTerm为空字符串时，不显示任何数据。

但是，当未将搜索词传递给 API 时，API 将返回所有结果，并且我无法更改该行为。

有没有办法重置useQuery钩子以返回 …

我正在尝试使用不支持分页游标的后端的过滤器来实现分页滚动的 useInfiniteQuery （我正在使用 limit 和 start 参数）。我能够检索我的数据，但我的 hasNextPage 变量始终未定义。我无法获取更多数据。当使用该按钮触发 fetchNextPage 时，可以看到新数据，但会删除以前的数据。

我究竟做错了什么 ？这是我的代码：

// Query data
  const { 
      data, 
      status, 
      error, 
      isSuccess, 
      hasNextPage,
      fetchNextPage, 
      isFetching,
      isFetchingNextPage, 
      isLoading,
      isError,
  } = useInfiniteQuery(
    [
      'vendors',
      {vendor_type: vendorTypesId}, 
      {country: countryId}, 
      {city: cityId}, 
      {vendor_product_types: productCategoryId}, 
      {page: thisPage}, 
      {start: start}, 
      {name: nameInput},
      {limit: limit},
    ],
    getVendors, 
   { 
      initialData: {
        pages : [{
          result: vendors,
          resultCount: 495,
          pageId: 0,
          nextPageId: 15
        }], 
        pageParams: startParams
      }
    },
    {getNextPageParam: (lastPage, pages) => lastPage.nextPageId}
    {keepPreviousData: true}
  ) 

更新： hasNextPage …

是否可以在 React 之外访问我的应用程序的React Query queryClient？

在我的一些赛普拉斯测试中，我获取或改变了一些数据，但随后我想使所有/部分的 queryClient 缓存无效。

那可能吗？

我尝试导入应用程序中使用的“相同”queryClient，但它不起作用。

\xe2\x84\xb9\xef\xb8\x8f 我在测试中包含这些获取/突变只是为了让我绕过用户通常在已经进行赛普拉斯测试的应用程序中采取的复杂步骤。

我正在玩reactQuery一个小演示应用程序，您可以在这个存储库中看到。应用程序调用此模拟 API。

我遇到了一个问题，即我使用钩子在产品 API文件useQuery中调用此函数：

export const getAllProducts = async (): Promise<Product[]> => {
  const productEndPoint = 'http://localhost:5000/api/product';
  const { data } = await axios.get(productEndPoint);
  return data as Array<Product>;
};

然后在我的ProductTable组件中，我使用以下方法调用此函数：

const { data } = useQuery('products', getAllProducts);

我发现确实调用了 API，并且返回了数据。但网格中的表始终是空的。

如果我调试，我会看到 useQuery 返回的数据对象未定义。

Web 请求确实成功完成，我可以在浏览器中的请求下的网络选项卡中看到返回的数据。

我怀疑它的结构方式getAllProducts可能是异步等待问题，但无法完全弄清楚。

谁能建议 IO 可能出问题的地方吗？

我使用 useQuery() 从服务器接收数据。为了不每次都重复API站点地址和一系列附加参数，我使用了以下自定义钩子：

export function useGetApi(mode, params, key) {

  // get initial config from context:
  const { config } = useGetConfig();

  const url = `https://example.com/api/${ mode }/?${ params }&lang_code=${ config.language }`;
  const queryKey = `${key}_${config.language}`;


  // async function for get API:
  async function getApi() {
    const { data } = await axios.get(url);
    return data;
  }

  return useQuery(['getApi', queryKey], getApi, {
    enabled: !!config.language
  });
}

包括语言在内的一系列基本设置位于名为“Config”的上下文中。在我的每个组件和每个需求中，我都会调用此自定义挂钩并填写参数，例如：

const { isLoading, data: products } = useGetApi(`products`, `company_id=${companyId}`, `products_${companyId}`);

这是错误的吗？

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

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 查询也许......