React-Query,useQuery 只有在加载完成后才返回 undefined

IT技术 reactjs axios react-query
2021-05-02 12:06:32

我在我的react应用程序中使用react查询包。我有一个模式,它使用 useQuery 从带有 axios 的 api 获取数据。除了 GET 搜索/参数端点之外,多个端点都可以工作。Axios 返回预期的数据,但是一旦 useQuery 中的加载完成,就会返回 undefined。

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: falsesearchResults变成未定义,我看到这个错误TypeError: config.queryFn.apply is not a function如果我登录api.clubhouse.search(其中包含 axios 调用),我可以看到正确的数据。这种模式也适用于其他 api 调用......

1个回答

我猜这可能是你的问题:

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

search我猜这里函数是返回一个Promise,但是你需要传入一个函数来useQuery返回一个Promise而不是Promise本身。所以,也许做这样的改变:

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