如何拦截多个Redux工具包Createapi

Question

我正在使用此解决方案https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#automatic-通过扩展fetchbasequery以编写reAuth-baseQuery来重新授权。

然而，我有多个具有不同createAPI服务的后端服务，它们使用相同的刷新令牌概念。

有没有办法让一个baseQueryAuth可以用于多个createApis

例如

productQuery.tsx

const baseQueryWithReauth: BaseQueryFn<
string | FetchArgs,
unknown,
FetchBaseQueryError
> = async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions)
if (result.error && result.error.status === 401) {
// reset token
}
return result
}
/** Product Query **/
const baseQuery = fetchBaseQuery({
baseUrl: process.env.REACT_APP_PRODUCT_URL,
prepareHeaders: (headers) => {
headers.set('Authorization', `Bearer ${token}`);
return headers;
},
});
const productAPI = createApi({
reducerPath: 'productAPI',
baseQuery: baseQueryWithReauth,
endpoints: (builder) => {
...
...
}
})

在customerQuery.tsx 上

const baseQueryWithReauth: BaseQueryFn<
string | FetchArgs,
unknown,
FetchBaseQueryError
> = async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions)
if (result.error && result.error.status === 401) {
// reset token
}
return result
}
/** Customer Query **/
const baseQuery = fetchBaseQuery({
baseUrl: process.env.REACT_APP_CUSTOMER_URL,
prepareHeaders: (headers) => {
headers.set('Authorization', `Bearer ${token}`);
return headers;
},
});
const customerAPI = createApi({
reducerPath: 'customerAPI',
baseQuery: baseQueryWithReauth,
endpoints: (builder) => {
...
...
}
})

是否有任何方法可以将baseQueryWithReauth作为一个函数移动到外部，并基于不同的API传递/绑定baseQuery？

Answer 1

是的，您可以用currying创建一个更高阶的函数，baseQueryWithReauth将是一个接收baseQuery函数作为参数并返回另一个baseQuery函数的函数

import { fetchBaseQuery } from "@reduxjs/toolkit/query";
import { createApi } from '@reduxjs/toolkit/query'
...
type BaseQueryType = ReturnType<typeof fetchBaseQuery>;
const baseQueryWithReauth: (baseQuery: BaseQueryType) => BaseQueryType = (
baseQuery
) => async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions)
if (result.error && result.error.status === 401) {
// reset token
}
return result
}

然后使用它来构建每个API

const productBaseQuery = fetchBaseQuery({
baseUrl: process.env.REACT_APP_PRODUCT_URL,
prepareHeaders: (headers) => {
headers.set('Authorization', `Bearer ${token}`);
return headers;
},
});
const productAPI = createApi({
reducerPath: "customerAPI",
baseQuery: baseQueryWithReauth(productBaseQuery),
endpoints: (builder) => {
...
},
});

const customerBaseQuery = fetchBaseQuery({
baseUrl: process.env.REACT_APP_CUSTOMER_URL,
prepareHeaders: (headers) => {
headers.set("Authorization", `Bearer ${token}`);
return headers;
},
});
const customerAPI = createApi({
reducerPath: "customerAPI",
baseQuery: baseQueryWithReauth(customerBaseQuery),
endpoints: (builder) => {
...
},
});

这是一个供参考的沙盒

https://codesandbox.io/s/hof-redux-toolkit-api-dlel1g?file=/src/api.ts