React-Query, useQuery returns undefined 仅在加载完成后

Question

我在我的 React 应用程序中使用了 react-query 包。我有一个模式，它使用 useQuery 从带有 axios 的 api 获取数据。除了 GET search/params 端点外，多个端点都可以工作。 Axios returns 预期的数据，但是在 useQuery 中加载完成后，返回未定义。

import React from "react";
import { useQuery } from "react-query";
import { api } from "../../../api";

export const useSearch = (query) => {
  const searchResults = useQuery(
    api.clubhouse.searchCacheKey(query),
    api.clubhouse.search({ params: { query: query } })
  );

  let searchData = [];

  let isLoading = searchResults.isLoading;

  if (!isLoading) {
    searchData = searchResults.data;
  }

  return { searchData, isLoading };
};

一旦 isLoading: false、searchResults 变为未定义，我就会看到此错误 TypeError: config.queryFn.apply is not a function。如果我登录 api.clubhouse.search（其中包含 axios 调用），我可以看到正确的数据。此模式也适用于其他 api 调用...

Answer 1

我猜这可能是您的问题：

api.clubhouse.search({ params: { query: query } })

这里的 search 函数我猜是在返回一个承诺，但是你需要将一个函数传递给 useQuery 那个 returns 一个承诺而不是承诺本身。所以，也许做这样的改变：

const searchResults = useQuery(
  api.clubhouse.searchCacheKey(query),
  () => api.clubhouse.search({ params: { query: query } })
);

React-Query, useQuery returns undefined 仅在加载完成后

React-Query, useQuery returns undefined only after loading is complete

reactjs

axios

react-query