如何在Redux Toolkit query中定义常见的查询参数

Question

我正在处理的API的所有端点都需要相同的查询参数集。用户在向端点发出请求之前必须选择这些参数。

终点示例

/api/resource-1?param1=valueA&param2=valueB&param3=valueC
/api/resource-2?param1=valueA&param2=valueB&param3=valueC

所选值保存在Redux存储中。我想自定义我的baseQuery，以自动将这些查询参数附加到API URL。我在fetchBaseQuery中搜索一些类似于prepareHeaders的内容，允许自定义查询URL。

假设代码

const baseQuery = fetchBaseQuery({
baseUrl: baseUrl,
// THIS PROPERTY DOES NOT EXISTS
prepareUrl: (url, { getState }) => {
const param1 = (getState() as AppState).config.param;
if (param1) {
url.searchParams.append('param1', param1);
}
return url;
},
prepareHeaders: (headers, { getState }) => {
const token = (getState() as AppState).auth.token;
if (token) {
headers.set('authorization', `Bearer ${token}`);
}
return headers;
},
});

我读过如何实现自定义基本查询，但我不想失去fetchBaseQuery提供的行为。

是否有类似prepareUrl属性的东西可以自定义请求URL？我应该实现自定义的基本查询吗？最好的方法是什么？

Answer 1

您已经在文档的右侧页面上了。诀窍是不写一个全新的baseQuery，而是包装一个自定义的baseQuery"；大约"；现有实施。这个例子展示了如何获得一个动态的baseUrl，它应该非常接近你在这里想要做的。

Answer 2

这是我最终得到的自定义查询代码：

import { fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { FetchArgs } from '@reduxjs/toolkit/dist/query/fetchBaseQuery'
import { BaseQueryApi } from '@reduxjs/toolkit/dist/query/baseQueryTypes';
import { RootState } from '../store';
const customQuery = async (args: string | FetchArgs, api: BaseQueryApi, extraOptions: {}) => {
args = appendQueryStringParam(args, "Source", "Desktop");
args = appendQueryStringParam(args, "LoginToken", "XYZ");
return await fetchBaseQuery({ baseUrl: 'http://example.com/api' })(args, api, extraOptions);
}
function appendQueryStringParam(args: string | FetchArgs, key: string, value: string): string | FetchArgs {
let urlEnd = typeof args === 'string' ? args : args.url;
if (urlEnd.indexOf('?') < 0)
urlEnd += '?';
else
urlEnd += '&';
urlEnd += `${key}=${value}`;
return typeof args === 'string' ? urlEnd : { ...args, url: urlEnd };
}
export default customQuery;