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 等等它们是一样的吗？

标签： javascript reactjs graphql next.js apollo-client

【解决方案1】：

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

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

【讨论】：