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函数我猜是返回一个承诺，但你需要传递一个函数到useQuery，返回一个承诺，而不是承诺本身。所以，可以这样修改:

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