Question

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

在这里调用它：

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

即使我在准备就绪的组件上懒惰，fetchMoreStill仍未定义。

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

问题是为什么它没有定义？

“ apollo客户端”：“ ^ 2.6.4”，“ react-apollo”：“ ^ 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...

未定义要使用的获取更多函数-LazyQuery react-apollo挂钩

2 个答案: