Apollo-client 有条件地同时运行 useLazyQuery 和 useQuery - 最好的方法是啥？

Posted 2023-03-08

【中文标题】Apollo-client 有条件地同时运行 useLazyQuery 和 useQuery - 最好的方法是啥？

【英文标题】：Apollo-client run both useLazyQuery and useQuery conditionally - what's the best approach?Apollo-client 有条件地同时运行 useLazyQuery 和 useQuery - 最好的方法是什么？

【发布时间】：2021-06-09 03:30:03

【问题描述】：

在我的导航中，我有以下“食物”和“蛋糕”菜单项。

食物页面是所有食物的列表url: /foods

当用户点击 cakes 时，用户重定向到 /foods?food=cakes 表示上面的食物相同页面

我同时使用了 useQuery 和 useLazyQuery 来满足这些要求，但我对我的方法并不是 100% 感到自豪我使用了太多的条件它导致了我的一个错误，我的分页没有按预期工作。

这是我的代码。

import  useState, useEffect  from 'react'
import  useQuery, useLazyQuerya  from '@apollo/client';
import  useRouter  from 'next/router'

const FoodCategory = () => 
  const router = useRouter()
  const  query  = router
  const variables =  ... 
  const variablesQueryParams =  ... 
  const [isQueryIsTrue, setIsQueryIsTrue] = useState(false)

  // useLazyQuery fetch all cakes only
  const [
    getUrlParams,
     loading: paramsQueryLoader, data: paramsQueryData ,
  ] = useLazyQuery(GET_FOODS, 
    variables: variablesQueryParams,
  )

  // useQuery fetch all foods
  const  loading, error, data, fetchMore  = useQuery(GET_FOODS, 
    variables,
    skip: isQueryIsTrue,
  )


 // checking if url has query parameters
  useEffect(() => 
    if (!!Object.keys(query).length > 0)    
      setIsQueryIsTrue(true)
      getUrlParams()
    
  , [getUrlParams, query])

  if (
    isQueryIsTrue
      ? paramsQueryLoader || !paramsQueryData
      : loading || !data
  )
    return <p>Loading...</p>

  const  endCursor, hasNextPage  = isQueryIsTrue
    ? paramsQueryData.foods.pageInfo
    : data.foods.pageInfo

  const nodes = isQueryIsTrue
    ? paramsQueryData.foods.edges.map((edge) => edge.node)
    : data.foods.edges.map((edge) => edge.node)

  const loadMore = async () => 
    if (!hasNextPage) return

    const variables =  ... 

    await fetchMore(
      variables: variables,
    )

  

  return (
    <div>
      <pre>JSON.stringify(nodes, null, 2)</pre>
      <button onClick=loadMore disabled=!hasNextPage >
        hasNextPage ? 'more foods' : 'empty foods'
      </button>
    </div>
  )


export default FoodCategory

【问题讨论】：

你不需要url参数的状态或效果，你可以直接在skip上使用条件

能否扩展您的 cmets 请给我看看您的代码？

skip 中使用的效果条件

我明白了。

还有一点 uselazyquery 和 usequery 使用了下面的加载、数据、fetchmore、error 等等它们是一样的吗？

【参考方案1】：

我想我已经解决了这个问题，而不是对 useEffect 进行条件检查我把我的逻辑放在 useQuery 变量上，就像这个变量 ..., ...(Object.keys(query).length > 0 && tags: query.cakes ) 不需要 useLazyQuery 和跳过选项。

如果查询参数为真，则滤饼默认为所有食物。