获取更多功能未定义用于 useLazyQuery react-apollo 钩子答案

【问题标题】：Fetch more function is undefined for useLazyQuery react-apollo hook获取更多功能未定义用于 useLazyQuery react-apollo 钩子
【发布时间】：2020-12-14 21:46:39
【问题描述】：

我使用 react-apollo useLazyQuery 钩子。我的目标是使用它来获取更多按钮点击。但是，当我尝试使用它时，fetchMore 函数是未定义的。

这里调用它：

const [getMyData,{ loading, data, fetchMore }] = useLazyQuery(
    myQuery,
    {
      notifyOnNetworkStatusChange: true,
      fetchPolicy: 'network-only',
      variables: {}
})

即使我在组件就绪时运行惰性，fetchMoreStill 仍然未定义。

  useEffect(()=>{
    getMyData()
  },[])

问题是为什么它是未定义的？

“apollo-client”：“^2.6.4”，“react-apollo”：“^3.1.3”，

【问题讨论】：

测试这个理论可能比写这个问题要快
@xadm 测试，更新
显示如何测试
这只是这个测试的一半：D
... 和 getMyPledges != getMyData

标签： reactjs graphql react-apollo react-apollo-hooks

【解决方案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 的流程。

【讨论】：

【解决方案2】：

我也是新来的反应，但据我所知，你必须使用 refetch 而不是给它起这样的名字：

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

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

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

【讨论】：

不，它只是重命名......当在一个组件中使用多个钩子时可用
啊，好吧。这就说得通了。我以为你必须使用关键字来重命名它。那我应该删除我的答案吗？我是新手。