使用反应查询遇到突变和组件闪烁的问题

Question

因此，我正在查询我的上下文 API 通过表单选择更新更新的所有内容。

所以，操作顺序就像这样。

1. 用户通过从下拉列表中选择（可能的多个之一）来更改表单。
2. 更改更新“context api”，从而使父组件重新饱和。
3. 因为表单键/值发生了变化，所以我触发了一个突变。
4. 变异返回一个值。到目前为止，很棒。
5. 但是，当我重复步骤 #1 - #4 时，另一个组件会闪烁更新后的值，因为在某些时候，期望值的“const”未定义......然后，它有一个值......

所以，就像这样..

有值... ...查询API调用...没有值...返回查询有值

const ProductPage = (props) => {
  const { question } = useContextStateWhatever();
  /* Queries */
  const { data = {}, isFetched } = useProductUpdatePrice({ questions });

  const value = derivePriceFromResponse(data.products);

  return (
   <SomeComponentRendered value={value} />
  )

因此，您可以在查询中的“旧值”和请求之间看到，传递的“值”将是未定义的。然后查询返回更新后的值。

我希望查询将返回任何以前的值，但“queryKey”会随着表单的每次选择而变化。深度查询Key。

我希望我不必再将这个值从 useEffect 中放入本地状态，或者使用 useRef 并创建钩子来交回“前一个”值，直到新值准备好......这不是react-query为了，对吗？我的意思是，每当“上下文 api”发生变化时，我不应该能够进行查询调用，并且不希望出现未定义的延迟差异。有什么策略可以克服这个问题吗？

由于每个查询的“queryKey”都是不同的（主要用于正常形式的交互），我可以看到它如何在解决之前无法返回先前的值等等......有什么想法吗？

有什么想法吗？

Answer 1

我认为这个keepPreviousData: true选项就是您正在寻找的。如果查询键发生更改，您将从之前的查询键中获取数据以及一个isPreviousData: true标志。后台更新仍然会发生，然后您\xe2\x80\x99将在新查询键到达后获取其数据。查询将isSuccess始终保持状态。

\n