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

Question

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

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

当用户点击蛋糕时，用户重定向到/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

Answer 1

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

如果查询参数为true，则过滤蛋糕，否则默认为所有食物。