Apollo 客户端：使用修改过的变量重新获取数据，useQuery 还是 useLazyQuery？答案

【问题标题】：Apollo Client: refetch data with modified variables, useQuery or useLazyQuery?Apollo 客户端：使用修改过的变量重新获取数据，useQuery 还是 useLazyQuery？
【发布时间】：2021-01-30 17:02:39
【问题描述】：

我有一个表格显示来自服务器的数据。使用 Apollo 客户端查询检索数据。

该表格有多个过滤器和一个搜索框。并且搜索中的所有过滤器和文本都保存在本地存储中。

table 和 fetch 的工作方式如下：

从localstorage 读取，构建用于获取的变量（偏移量、限制、...）
使用变量获取
当过滤器或搜索发生变化时，使用修改后的变量重新获取
还将修改后的变量保存到localstorage

我的问题是：我应该为此使用useQuery 还是useLazyQuery。

有了useQuery，我可以做到：

// first fetch
const {data, loading, refetch} = useQuery(gql, { variables: {...filters from localstorage} })

// when filters changed
useEffect(() => {
  refetch({variable: {...changed filters}})
}, [filters])

对于修改过的过滤器，可以refetch({variables: {...modified filters}})吗？

对于useLazyQuery，我可以这样做：

const [getData, {data, loading, refetch}] = useLazyQuery(gql)

// first fetch
useEffect(() => {
  getData({variables: {...filters from localstorage}})
}, [])

// when filters changed
useEffect(() => {
  refetch({variable: {...changed filters}}) // ?
  // or
  getData({variables: {...modified filters}}) // ?
}, [filters])

refetch 或 getData，我应该使用哪个？

【问题讨论】：

标签： javascript apollo-client

【解决方案1】：

我认为您应该只使用 useQuery，但不要将您的 过滤器 保存在 localeStorage 中，而是将其也保存在 locale React 状态。因此，当您更新过滤器状态时，useQuery 将知道并使用新参数重新获取查询。而且你不需要单独的 useEffect 来触发重新获取。

【讨论】：