处理反应查询突变和反应上下文时的最佳策略

Question

我遇到了一些问题。我正在为我网站的一个部分使用反应上下文 api。它是一种形式，每个选择然后调用反应查询突变（我不必做突变）。

出现问题是因为当用户进行选择时，它会添加到深度嵌套的上下文状态对象中。所以，我有 3 个操作都更新了这个深度嵌套的状态。即，input/checkbox/dropdown...但是在每个操作之后，我需要触发这个突变，然后用价格更新状态......

我在将此 api（突变）整合到此上下文 api 中时遇到问题。任何建议.. 即..

--- user clicks checkbox
------- update context state inside a deeply nested object
----------- ** Need to fire an api WITH this update state (the whole object) **
--------------- response from API updates this state with an updated price

--- user selects dropdown
------- update context state inside a deeply nested object
----------- ** Need to fire an api WITH this update state (the whole object) **
--------------- response from API updates this state with an updated price

出现的问题是，除非我使用这个“深度嵌套对象”，否则我使用 useEffect 进入组件内部的无限循环，但由于它是嵌套的，它从不“更新”..所以它只触发一次。

更新上下文 api 状态的策略是什么，然后基于该状态触发 API，进而 'updates the state'...

Answer 1

What is your strategy for updating context api state, THEN based on that state firing an API, which in turn 'updates the state'...

使用 react-query，你会做一个 useQuery 并创建一个包含所有客户端状态（复选框状态、下拉选择等）的 queryKey，例如：

const useSomethingQuery = () => {
  const userInput = useMyContextValue()
  return useQuery(
    ['something', userInput],
    () => fetchSomething(userInput),
    { enabled: !!userInput }
  )
}

这里发生了几件事：

每次上下文中的 userInput 发生变化时，queryKey 也会发生变化，并且 react-query 会在发生这种情况时触发新请求
userInput 基本上是该查询的所有“依赖项”——可以是深度嵌套的对象，不必是引用稳定的，react-query 将处理该问题
只要我们没有userInput，查询就会被禁用，一旦做出第一个选择就会启用。这当然是可选的。
您可以在任何需要数据的地方使用该自定义挂钩，因此无需将结果数据放入上下文或任何其他内容。

处理反应查询突变和反应上下文时的最佳策略

Best strategy when dealing with a react-query mutation AND react context

reactjs

react-context

react-query