reactjs - 获取更多功能未定义用于 useLazyQuery react-apollo hook
问题描述
我使用 react-apollo useLazyQuery 钩子。我的目标是使用它来获取更多按钮点击。但是,当我尝试使用它时,fetchMore 函数是未定义的。
这里调用它:
const [getMyData,{ loading, data, fetchMore }] = useLazyQuery(
myQuery,
{
notifyOnNetworkStatusChange: true,
fetchPolicy: 'network-only',
variables: {}
})
即使我在组件就绪时运行惰性,fetchMoreStill 仍然未定义。
useEffect(()=>{
getMyData()
},[])
问题是为什么它是未定义的?
“阿波罗客户端”:“^2.6.4”,“反应阿波罗”:“^3.1.3”,
解决方案
您需要运行第loadItem
一个。我的案例也按需加载,因为我使用的是 SSR。
这是我的解决方法,检查fetchMore
未定义以做出决定
function NewItemListingPagination({
initialItems,
initialPage,
initialLimit,
initialTotal,
className
}: ComponentPropTypes) {
const { t } = useTranslation(['homepage', 'common'])
const page = useRef<number>(initialPage)
const [loadItem, { loading, data, fetchMore }] = useLazyQuery(FEED_NEW_ITEM)
async function loadMore(): Promise<void> {
const newPage = page.current + 1
const offset = (newPage - 1) * initialLimit
page.current = newPage
if (!fetchMore) {
loadItem({
variables: {
limit: 12,
offset
}
})
} else {
fetchMore({
query: FEED_NEW_ITEM,
variables: {
limit: 12,
offset
},
updateQuery: (previousResult, {fetchMoreResult}) => {
console.log('dddd', previousResult, fetchMoreResult)
return previousResult
}
})
}
}
const items = !data ? initialItems : initialItems.concat(data.feed.items)
return <div></div>
注意:这段代码可能没有优化,我只是想展示 fetchMore 的流程。