How to get state.basename into a RTK query createApi() call?

[steinarb]

One thing I do in my react/redux/redux saga/react router apps, is that I get the baseurl from the assets/index.js file created by vite

This baseurl, is, in turn:

1. given to axios (for use in the web API calls)
2. given to redux-first-history (which links the react-router with redux)
3. given to the root component, where in turn it is given to the react router
4. Stored in state.basename in the redux state

This dynamic handling of basename, allows me to reverse proxy e.g. http://localhost:8181/sampleapp to https://sampleapp.mydomain.com and have everything still work normally.

Now I'm trying out replacing redux saga and axios for the web API calls with RTK query, and in the createApi() call there is a concept of baseUrl.

So how do I get the state.basename value to put in there when running createApi()?

Is the redux state available to the createApi() function when executing?

Thanks!

• Steinar

[markerikson]

We've got a relevant example here:

https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#constructing-a-dynamic-base-url-using-redux-state

[steinarb]

api.getState()?

Nice! Thanks! 😄

[phryneas]

That said, why don't you just write

const baseUrl = Array.from(document.scripts).map(s => s.src).filter(src => src.includes('assets/'))[0].replace(/\/assets\/.*/, '');
const basename = new URL(baseUrl).pathname;

there given that it will never change, you have duplicated that code in 4 places already, and you can just write arbitrary code before createApi?

[steinarb]

Um... where are the duplicates...?

[steinarb]

(the links are not into 4 different files. The links are to 4 different lines in the same file)

[phryneas]

Woops, sorry ^^

[steinarb]

This works: https://gist.github.com/steinarb/b3847ab39b2a796bf8a4c1424fe6b598

I.e. when used in this component: https://gist.github.com/steinarb/9b82f27fa508d5166b38acb9cde0a1bb#file-gistfile1-txt-L19
then, according to the Network pane of the chrome devtool, http://localhost:8181/handlereg/api/butikker is run when navigating to the component.

But my attempt at replacing the '/handlereg' constant with state.basename doesn't work: no calls to http://localhost:8181/handlereg/api/butikker are made

Here is my adaptation of the example references above, (it's a bit "monkey see! monkey do!"): https://gist.github.com/steinarb/c6f089f850134f0e0870a1db9f0d5c01

What am I misunderstanding? What am I missing?

(I have put console.log traces in dynamicBaseQuery, so I know that it is called once and finds the right value)

The bit I don't understand in the example is the "rawBaseQuery" that gets the value of a fetchBaseQuery() and that is in turn called with the same three arguments that entered into dynamicBaseQuery?

Since I didn't understand it, I tried to do the simplest way to find state.basename and put it in front of '/api' (unfortunately this resulted in no API HTTP GET calls being made).

[phryneas]

@steinarb you also need to call that baseQuery

const dynamicBaseQuery = async (...args) => {
    const api = args[1]
    const basename = api.getState().basename;
    return fetchBaseQuery({ baseUrl: basename + '/api' })(...args);
}

[steinarb]

Thanks! Your exact code above worked perfectly.

(I tried to be clever and instead do

const { api } = args;

but that gave me an undefined api, so that didn't work. So back to your example)

[phryneas]

Yeah, args is an array, you can't pull something out of that with a name.