CODEWITHSUNDEEP
typescriptrtk-query
Berci
Berci

Reputation: 3386

Api with injected Endpoints to Redux RTK query causing "ReferenceError: Cannot access 'baseApi' before initialization"

I have a redux RTK app set up and I did setup a service with RTK query. I noticed though that we will need a lot of endpoints and it looks like the recommended way by RTK Query is to use code splitting to grow the API service. This also went pretty smoothly and fit my case since I needed a dynamicBaseQuery for all the app in order to inject the selected language in the link.

However the docs also suggest adding the API reducer path to the RTK store reducer but as advanced queries docs states:

...apiSlice and extendedApiSlice are the same object, but it can be helpful to refer to the extendedApiSlice object instead of apiSlice here as a reminder to ourselves. (This is more important if you're using TypeScript, because only the extendedApiSlice value has the added types for the new endpoints.)

So this also applied to adding the api reducer to the path since if I only added the baseApiSlice to the reducer I got ReferenceError: Cannot access 'baseApi' before initialization on authApi which is basically authApi = baseApi.injectEndpoints... and authApi is used in a normal RTK slice (AuthSlice) for adding a matcher

  builder.addMatcher(authApi.endpoints.login.matchFulfilled

I tried putting them all of them in the reducer (so something like):

  reducer: {
      [AuthSlice.name]: AuthSlice.reducer,
      [baseApi.reducerPath]: baseApi.reducer,
      [authApi.reducerPath]: authApi.reducer,
      [buildingsApi.reducerPath]: buildingsApi.reducer, ...

but I got the same error (and this is not advised because I would be basically importing the same api 3 times which I also read it can lead to errors).

If I instead just add the authApi reducer seems like everything goes smooth and I can even use buildingsApi, but it just doesn't fill right. Additionally if I need to use addMatcher on buildingsApi.endpoints it will fail again with ReferenceError: Cannot access 'baseApi' before initialization .

I'd like to mention that I also added baseApi to the store middleware like this: middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(baseApi.middleware) and I am really out of ideas on how to properly set RTK Query using code splitting and any help in this direction is deeply appreciated.

Thank you very much!

PS: The only option I see is setting separate queries instead of using code splitting and just make the dynamicBaseQuery exportable. But I don't think this is ideal, and it doesn't seem to be the recommended way by the docs either.

Upvotes: 1

Views: 2914

Answers (1)

Berci
Berci

Reputation: 3386

In case anyone else encounters a similar problem, ReferenceError: Cannot access 'baseApi' before initialization is actually a circular dependency error.

In my case I was actually importing the AuthSlice in baseApi in order to get the user language and add it to dynamicBaseQuery . Fixed the circular dependency by using a cookie to get the current language.

The code was working without the extraReducers from AuthSlice since in this case there was nothing from the slice to the api, but once I added extraReducers with addMatcher(authApi.endpoints the error would come again.

I found something about this on github but I really had a hard time discovering the circular dependecy

Upvotes: 3

Related Questions