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

Posted

技术标签:

【中文标题】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 &gt; 0 &amp;&amp; tags: query.cakes ) 不需要 useLazyQuery 和跳过选项。

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

【讨论】:

以上是关于Apollo-client 有条件地同时运行 useLazyQuery 和 useQuery - 最好的方法是啥?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 R 中迭代地过滤列表中的列表或如何同时使用两个条件过滤 data.table,在运行时创建对象

apollo-client 没有响应的标头

比较两个(py)spark sql数据框并在保持连接列的同时有条件地选择列数据

nodejs/vanilla 中的 Apollo-client 未触发订阅

使用 GET/HEAD 方法的请求不能有正文 APOLLO-CLIENT

有条件地运行 npm 脚本