3

当 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)？

4

1 回答 1

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];
}
于 2021-06-11T18:55:24.317 回答