reactjs - 获取更多功能未定义用于 useLazyQuery react-apollo hook

Question

我使用 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”，

Answer 1

您需要运行第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 的流程。

Answer 2

我也是新手，但据我所知，您必须使用 refetch 而不是给它起这样的名称：

const [getMyData,{ loading, data, refetch: fetchMore }] = useLazyQuery...

你可以对数据和加载做同样的事情。

const [getMyData,{ loading: myLoading, data: myData, refetch: fetchMore }] = useLazyQuery...