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

Question

在我的导航栏中，我有如下的"foods"one_answers";cakes"菜单项。

食品页面是所有食品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和跳过选项。

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