Apollo Client：使用修改后的变量重新获取数据，useQuery 还是 useLazyQuery？

Question

I have a table showing data from server. The data is retrieved using Apollo Client query.

The table has multiple filters and a search box. And all filters and text in the search are save in local storage.

The table and the fetch works like:

1. read from localstorage , build variables for fetch (offset, limit, ...)
2. fetch with variables
3. when filters or search change, refetch with modified variables
4. also save the modified variables to localstorage

My question is: should I use useQuery or useLazyQuery for this purpose.

With useQuery , I may could do:

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

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

For modified filters, is it possible to do refetch({variables: {...modified filters}}) ?

And with useLazyQuery , I may do:

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 or getData , which should I use?

Answer 1

I think you should just use useQuery , but instead of keeping your filters in localeStorage, keep it also in a locale React state. So when you update the filters state, useQuery will know and refetch the query with new parameters. And you don't need separate useEffect to trigger the refetch.