如何在 Redux Toolkit Query 中定义通用查询参数

Question

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

端点示例

/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;
  },
});

我阅读了如何 implement a custom base query 但我不想失去 fetchBaseQuery 提供的行为。

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

Answer 1

您已经在文档的正确页面上了。诀窍是不编写全新的 baseQuery，而是将自定义 baseQuery“围绕”现有实现。 This examples shows how to do that to get a dynamic 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;

如何在 Redux Toolkit Query 中定义通用查询参数

How to define common query params in Redux Toolkit Query

javascript

reactjs

redux

redux-toolkit

rtk-query