React Query 的无限查询问题，使用 Edamam API

Question

我目前有一些问题，试图将无限查询功能添加到我正在使用Edamam API的食谱应用程序。

我所寻找的所有示例(甚至React Query的文档)都使用页面/光标编号系统实现无限滚动…我知道这是最理想的方式，但是……Edamam API不能以这种方式处理分页查询。

相反，对于我们寻找的每个食谱查询，API具有以下结构(假设我们正在搜索"chicken"，这将是JSON结构):

from: 1,
to: 20,
count: 10000,
_links: {
next: {
href: "https://api.edamam.com/api/recipes/v2?q=chicken&app_key=APIKEYc&_cont=CHcVQBtNNQphDmgVQntAEX4BYldtBAAGRmxGC2ERYVJ2BwoVX3cVBWQSY1EhBQcGEmNHVmMTYFEgDQQCFTNJBGQUMQZxVhFqX3cWQT1OcV9xBB8VADQWVhFCPwoxXVZEITQeVDcBaR4-SQ%3D%3D&type=public&app_id=APPID"
title: "Next Page"
}
},
hits: [{}] ... (This is where the actual recipes are)

正如你所看到的，对于分页查询没有编号系统，相反，它是一个完整的URL，这让我很困难，因为我也是React查询的新手。

我尝试了以下操作，但当我到达页面底部时，它只是一遍又一遍地获取相同的数据:

const getRecipes = async ({ pageParam }) => {
try {
const path = pageParam
? pageParam
: `https://api.edamam.com/api/recipes/v2?q=${query}&app_id=${process.env.REACT_APP_APP_ID}&app_key=${process.env.REACT_APP_API_KEY}&type=public`;
const response = await axios.get(path);
return response.data;
} catch (error) {
console.log(error);
}

const { ref, inView } = useInView();
useEffect(() => {
inView && fetchNextPage();
}, [inView]);
const {
data,
isFetching,
isFetchingNextPage,
error,
status,
hasNextPage,
fetchNextPage,
} = useInfiniteQuery(
["recipes", query],
({ pageParam = "" }) => getRecipes(pageParam),
{
getNextPageParam: (lastPage) => lastPage._links.next.href,
}
);

由于下一页参数是一个完整的URL，我只是说，如果有一个pageParam，然后使用该URL的请求，如果没有，然后使用用户正在搜索的查询值做一个正常的请求。

请帮忙!

Answer 1

由于下一页参数是一个完整的URL，我只是说，如果有一个pageParam，然后使用该URL的请求，如果没有，然后使用用户正在搜索的查询值进行正常请求。

我想说这是正确的方法。在您的示例中，我可以看到的唯一代码问题是您破坏页面参数，然后将页面参数字符串传递给getRecipes:

({ pageParam = "" }) => getRecipes(pageParam),

但是在getRecipes中，您期望一个对象进入(您再次解构):

const getRecipes = async ({ pageParam }) => {

您可以通过更改调用端或函数语法来解决这个问题，然后它应该可以工作。