带参数的 useQuery 时反应查询 useMutation答案

【问题标题】：react-query useMutation when useQuery with parameters带参数的 useQuery 时反应查询 useMutation
【发布时间】：2020-11-03 08:52:27
【问题描述】：

当 useQuery 有参数时，有人会建议我用 useMutation 更新数据的正确方法是什么？

假设我们有这个代码：

const {data} = useQuery(["key", ["id1", "id2"]], methodWhichTakesThoseIds)

所以methodWhichTakesThoseIds 方法采用["id1", "id2"] 并从数据库返回一些数据。此数据是对象类型的数组，例如SomeModel[]。例如。可能是：

[{name: "foo"}, {name:"bar"}]

一切都好，但现在我想用useMutation更新屏幕和数据库上的这些数据

const [mutate] = useMutation(methodWhichUpdatesDataAndReturnsNewItem, {
        onSuccess: (data) => {
            queryCache.setQueryData(["key", ["id1", "id2"]], (old) => [...old, data]
            })
        }
    })

所以现在我在数据库中添加了新项目，以防万一的数据应该是：[{name: "foo"}, {name:"bar"}, {name:"newOne"]。

一切都很好，但是当我更改路线并再次返回时，只有 2 个 ID 的 useQuery 将再次触发，并且 useQuery 从数据库中返回只有两个元素的数据，因为它只有两个 ID 作为参数["id1", "id2"]。

如果我设置 queryCache.setQueryData(["key", ["id1", "id2", data.id]], (old) => [...old, data] 我仍然使用只有两个 ID 的原始 useQuery，因此更改不会反映在屏幕上。

我猜有一些解决方案，比如每次更新后都从服务器重新获取数据，但主要问题是“

当 useQuery 有参数时更新数据的最佳方法是什么——不仅仅是像 useQuery("key", method) 这样的键？

【问题讨论】：

标签： reactjs react-query

【解决方案1】：

假设您不需要缓存所有采用不同 ID 集的 fetch 查询

所以不要这样：

const { data } = useQuery(["key", ["id1", "id2"]], methodWhichTakesThoseIds)

做：

const fetchWrapper = (params) => () => methodWhichTakesThoseIds(params);
const { data } = useQuery(["key", 'fetchData'], fetchWrapper(["id1", "id2"]));

然后在你的突变之后，你可以像这样简单地调用你的onSuccess 来更新缓存：

onSuccess: (data) => {
  queryCache.setQueryData(["key", "fetchData"], (old) => [...old, data];
}

【讨论】：