在 RTK 查询中查询失败时，通知的"best practice"是什么？

Question

我需要在API调用遇到错误时显示toast通知。使用RTK Query，我可以将查询包装在另一个函数中，也可以使用侦听器中间件。

封装查询函数:

const loadFooWithToast = async () => {
const { error } = await loadFooQuery()
if (error) showErrorToast("Error loading Foo")
}

注意:为了使它更通用(像下面的例子)，我可以创建一个自定义钩子，它接受查询函数和错误消息作为参数，但逻辑将保持不变。

使用侦听器中间件:

startAppListening({
predicate: (action) => {
return action.type === "api/executeQuery/rejected"
},
effect: ({
meta: {
originalArgs: { errorMessage }
},
}) => {
showErrorToast(errorMessage)
},
})
loadFooQuery({ errorMessage: "Error loading Foo" })

一种方法优于另一种方法，为什么?

Answer 1

另一种更适合我用例的方法是使用官方文档中记录的onQueryStarted。

const api = createApi({
baseQuery: fetchBaseQuery({
baseUrl: "/",
}),
endpoints: (build) => ({
getFoo: build.query<Foo>({
query: () => `foo`,
async onQueryStarted({ queryFulfilled }) {
try {
await queryFulfilled;
} catch (err) {
showErrorToast("Error loading Foo");
}
},
}),
}),
});