How to define common query params in Redux Toolkit Query

Question

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?

phry · Accepted Answer · 2022-03-15 15:32:58Z

1

You were already on the right page in the docs. The trick is to not write a completely new baseQuery, but to wrap a custom baseQuery "around" the existing implementation. This examples shows how to do that to get a dynamic baseUrl, which should be very close to what you want to do here.

answered Mar 15, 2022 at 15:32

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rychu · Accepted Answer · 2022-04-19 12:10:59Z

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;

Collectives™ on Stack Overflow

How to define common query params in Redux Toolkit Query

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related