reactjs - 当带有参数的 useQuery 时，react-query useMutation

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，因此更改不会反射(reflect)在屏幕上。
我想有一些解决方案，比如每次更新后从服务器重新获取数据，但主要问题是“
当 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];
}