reactjs - React Query - 为什么我的分页查询没有被触发？

Question

我正在尝试实现分页查询。但我没有调用内部 API 的分页端点，就像文档中的示例一样：

function Todos() {
   const [page, setPage] = React.useState(0)
 
   const fetchProjects = (page = 0) => fetch('/api/projects?page=' + page).then((res) => res.json())
 
   const {
     isLoading,
     isError,
     error,
     data,
     isFetching,
     isPreviousData,
   } = useQuery(['projects', page], () => fetchProjects(page), { keepPreviousData : true })
 
   return ...

我正在调用 Youtube 数据 API。它将“nextPageToken”作为 i 请求选项的一部分。“CAoQAA”似乎是默认值。但是对于下一个值，我需要传递上一个调用的返回令牌（我目前使用 valtio. 将其设为全局）

下面看一下调用api的getPlaylist函数：

（仅供参考，valtio 只是有一个对象（在我的例子中称为 store），其中更改它的值只会导致依赖于该键的组件重新呈现。如果这听起来很有趣，您可以查看这篇文章）

无论如何，我不会在前一个 API 调用之后立即进行下一个 API 调用。一旦我检测到 50 件（我一次只能获得 50 件）物品中的大部分已经被看到，我需要更多的 YT 物品：

useEffect(() => {
        if (playlist && (slicePosition + maxItems) > playlist.length) {
            setNextPageToken(store.nextPageToken)
        }
    },[playlist, slicePosition])

这个 setNextPageToken() 命令应该触发 useQuery 钩子。因为我假设一旦 Query 键更改，它将触发重新获取。但这不是我寻求指导的原因。

以下是查询的设置方式：

const {isLoading, isSuccess, error, data} = useGetPlaylist(playlistId, isFetchingYTPlaylist, nextPageToken)

function useGetPlaylist(playlistId, isFetchingYTPlaylist, token) {
    const result = useQuery({
        queryKey:["playlist", playlistId, token],
        queryFn: () =>
            getPlaylist(playlistId, token),
        enabled: isFetchingYTPlaylist,
        config: {
            onSuccess(plaslists) {
                for (const pl of plaslists) {
                    QueryClient.setQueryData(
                        ['playlist', {playlistId: pl.id}],
                        pl
                    )
                }
                store.isFetchingYTPlaylist = false
            }
        },
        keepPreviousData : true
    })

    return result
}

（我知道，我在全球商店中有 nextPageToken。但我不知何故需要重新获取和重新渲染，所以我传递了 nextPageTooken。）

标签： reactjspaginationyoutube-apiyoutube-data-apireact-query