React 查询：使多个查询无效，但等到它们全部完成突变成功

Question

所以我\xe2\x80\x99m使用React查询，我有一个突变，我有一个像这样的onSucess回调：

\n

onSuccess: () => {\n  return queryClient.invalidateQueries([FETCH_USER, userId]);\n}\n

\n

我想使另一个查询无效，我知道我可以这样做：

\n

onSuccess: () => {     \n    queryClient.invalidateQueries([FETCH_USER, userId]);\n    queryClient.invalidateQueries([FETCH_USER_BOOKS, userId]);\n}\n

\n

但是，如果我不使用返回值，那么它不会等待失效并将突变设置为完成。

\n

有没有办法将返回值用于这两种失效？

\n

Answer 1

理想情况下，您可以构建查询键，以便可以在一次失效中解决所有这些问题：

[FETCH_USER, userId]
[FETCH_USER, userId, BOOKS]

然后，您可以通过以下方式定位他们：

queryClient.invalidateQueries([FETCH_USER, userId])

FETCH_USER这将模糊匹配从第一个索引和第二个索引开始的所有数组键userId，无论它们后面是什么。这就是为什么查询键应该尽可能形成层次结构的原因。我将在这里详细介绍：https ://tkdodo.eu/blog/ effective-react-query-keys

如果这是不可能的，您可以随时将两个 Promise 包装在 a 中Promise.all并返回：

onSuccess: () => Promise.all([    
    queryClient.invalidateQueries([FETCH_USER, userId]),
    queryClient.invalidateQueries([FETCH_USER_BOOKS, userId])
])