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

Posted 2023-03-08

【中文标题】获取更多功能未定义用于 useLazyQuery react-apollo 钩子

【英文标题】：Fetch more function is undefined for useLazyQuery react-apollo hook

【发布时间】：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

【参考方案1】：

您需要先运行loadItem。我的案例也按需加载，因为我使用的是 s-s-r。

这是我的工作，检查 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...

【讨论】：

不，它只是重命名......当在一个组件中使用多个钩子时可用

啊，好吧。这就说得通了。我以为你必须使用关键字来重命名它。那我应该删除我的答案吗？我是新手。