How to define common query params in Redux Toolkit Query

user_15592048 0
Viewed 859

All the endpoints of the API I'm working on, require the same set of query parameters. The user must select these parameters before making requests to endpoints.

Examples of endpoints

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

Selected values are saved on the Redux Store. I'd like to customize my baseQuery to append these query params to API URL automatically. I'm searching something in fetchBaseQuery that works similar to prepareHeaders allowing to customize the query URL.

hypothetical code

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

I read how to implement a custom base query but I don't want to lose the behavior provided by fetchBaseQuery.

Is there something like the prepareUrl property that allows to customize the request URL? Should I implement a custom base query? What's the best way to do that?

rtk-query redux-toolkit redux reactjs javascript
2 Answers
user_20759440

This is my custom query code I ended up with:

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;
user_94610510
Related