运行涉及突变和组件随 react-query 闪烁的问题

Question

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

所以，操作顺序是这样的

用户通过从下拉列表中选择（可能的多个）来更改表单。
更改更新“上下文 api”，使父组件重新饱和。
因为形式key/values改变了，我触发了一个突变。
变异return是一个值。到目前为止，太棒了。
但是，当我重复步骤 #1 - #4 时，另一个组件闪烁着那个更新后的值，因为在某些时候，期望值的“常量”是未定义的……那么，它有一个值……

所以，像这样..

有一个价值... ...查询 api 呼叫... 没有价值 ...returns查询有一个值

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

  const value = derivePriceFromResponse(data.products);

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

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

我希望查询会 return 任何以前的值，但是“queryKey”随着每次选择表单而改变。深度查询键。

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

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

有什么想法吗？

Answer 1

我认为 keepPreviousData: true 选项正是您要找的。如果查询键发生变化，您将从之前的查询键中获取数据，以及一个 isPreviousData: true 标志。后台更新仍会发生，然后您将在新查询键到达时获取数据。查询将一直保持 isSuccess 状态。

运行 涉及突变和组件随 react-query 闪烁的问题

Running into an issue with a mutation and component flickering with react-query

react-query

运行涉及突变和组件随 react-query 闪烁的问题