RTK | Reconstruction Toolkit | 3D Printing library

You can write a selector for that:

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.

I'm not allowed to leave a comment yet, so I'll try to answer you question regarding useLazyQuery vs useQuery here:

useQuery - got triggered on render. Retriggered on params change. Returns data from cache if the cache has some valid data. refetch allows to ignore cache, and forces to make a real API call. refetch has no query params, so you'll need to pass them to initial hook call.

useLazyQuery - got triggered firstly on trigger call, expecting the query params to be passed to trigger, and by default will do a real API call. To get the cached data first (if exists) - you'll need to pass the preferCacheValue param to the trigger function as the second param.

So the "rule of thumb" will be to use useQuery by default to fetch data on the component mount, use refetch when you want to make a real API call ignoring the cache.

useLazyQuery - for cases like yours, when you want to make a call only later (ignoring the render stage) calling the "trigger" on some event (like a button click), and remember about the preferCacheValue option for a case when you have a chance to have the response already cached - this will allow making response feels instantaneous.

In our case - useLazyQuery is MUCH relevant, due to you can avoid all that setCurrentPosition => dispatch => useSelector stuff, and pull all that logic just in click handler, where you'll be able to fetch Geolocation.getCurrentPosition() and pass coordinates to trigger function, that where relevant to the click time, not to the time when the component was rendered.

Actually, it is exactly the same as the common useQuery's interface. Only one thing worries - seems like you are reading unexisting loading filed, which expected to be isLoading. Besides that, it's straightforward:

You cannot call hooks conditionally, that is against the rules of hooks.

hooks must be called every time, in the same order, when a render functions runs. By having that ternary, this is not guaranteed to happen:

This is a timing thing.

Your component will always render immediately and it will not defer rendering until data is there. That means it will also render before your data has been fetched. So while the data is still loading, data is undefined - and you try to map over that.

You could do things like just checking if data is there to deal with that:

I'm not familiar enough with API in RTK, but I played a bit with typescript there and found out that if you declare tagTypes in your createApi object it solves problem:

Seems like you can use Type Assertions here.
https://github.com/supasate/connected-react-router/issues/195

Your endpoints need unique names for that api, so clientList and formList.

To be clear: you are injecting into the same api. This is not giving you new hooks every time, if you inject a new endpoint with the same name, it overrides the internal config and returns the same hook.

As you are doing it, they overwrite each other. That is also why you are getting error messages unless you activate overrideExisting: true.

Essentially, RTK Query was warning you that you should not do it, but you did it anyways ;)