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

Question

我在我的 react 应用程序中使用 react-query 包。我有一个模式，它使用 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: false，searchResults 变为未定义，我看到此错误TypeError: config.queryFn.apply is not a function。如果我登录api.clubhouse.search（包含 axios 调用），我可以看到正确的数据。这种模式也适用于其他 api 调用...

Answer 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 } })
);