在渲染和重新渲染时获取 graphql 查询结果但懒惰

Question

我有一个 React Apollo 应用程序，我想要做的是我有一个使用图表呈现一些数据的组件。对于这些数据，我有一些过滤器保存在组件的本地状态中（使用钩子）

const [filters, setFilters] = useState(defaultFilters);

现在我想要的是，每当安装组件时，使用默认过滤器获取数据。但我也想在用户更新过滤器时重新获取数据并点击提交，我会使用新的过滤器获取结果。

由于我还想获取过滤器更新的结果，所以我使用的是 apollo 提供的 useLazyQuery 钩子

const [getData, {data}] = useLazyQuery(GET_DATA_QUERY, { variables: {filters} });

useEffect(getData, []); // this useEffect runs only when the component mounts and never again

但是，每当我的状态 filters 更新时，getData 函数就会自动运行！总是！ （幕后）

1. 如何处理这种情况，我想获取挂载和重新渲染的结果。 我曾尝试使用 useQuery 并重新获取它提供的，但我在那里遇到了同样的问题，每当我更新状态时，组件都会重新呈现，并且 useQuery 挂钩会运行并进行调用。 （这就是我相信它的运行方式）

2. 如何修复我当前的代码。在 useEffect 函数中调用 getData 函数使其在每次重新渲染时运行。

我认为我在这个stackoverflow-question 中定义的问题与我的有些相似。

Answer 1

部分问题在于您确实有两种不同的状态，您正试图利用一个钩子来实现。您有表示 UI 中输入值的状态，然后您有表示要实际应用于图表的过滤器的状态。这是两个独立的状态位。

最简单的解决方案就是这样做：

const [inputFilters, setInputFilters] = useState(defaultFilters)
const [appliedFilters, setAppliedFilters] = useState(inputFilters)
const { data } = useQuery(GET_DATA_QUERY, { variables: { filters: appliedFilters } })

const handleSubmit = () => setAppliedFilters(inputFilters)
const handleSomeInputChange = event => setInputFilters(...)

这样，您只使用inputFilters/setInputFilters 来管理您的输入状态。当用户单击您的提交按钮时，appliedFilters 将设置为当时的 inputFilters，您的查询将更新以反映新变量。