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 > 0 && tags: query.cakes )
不需要 useLazyQuery 和跳过选项。
如果查询参数为真,则滤饼默认为所有食物。
【讨论】:
以上是关于Apollo-client 有条件地同时运行 useLazyQuery 和 useQuery - 最好的方法是啥?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 R 中迭代地过滤列表中的列表或如何同时使用两个条件过滤 data.table,在运行时创建对象
比较两个(py)spark sql数据框并在保持连接列的同时有条件地选择列数据
nodejs/vanilla 中的 Apollo-client 未触发订阅