Question

有人会建议我，当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)这样的键时，更新数据的最佳方法是什么？

Answer 1

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

所以而不是这样：

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];
}

带参数的useQuery时的react-query useMutation

1 个答案: