Question

我有一张表，显示来自服务器的数据。使用Apollo Client查询检索数据。

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

表和提取的工作方式如下：

从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，我应该使用哪个？

Answer 1

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

Apollo客户端：使用修改后的变量，useQuery或useLazyQuery重新获取数据？

1 个答案: