RTK: composable React integration.

[nandin-borjigin]

Currently, the React integration for RTK is done by replacing the UI agnostic package entirely. It is very intrusive from an architectural point of view because we'd really like to keep our business logic layer absolutely UI agnostic. With the current integration approach, we can only choose to either:

1. define the RTK slice in the business layer and lose the benefit of hooks.
2. define the RTK slice in UI layer and break the architectural constraints.

It'd be great if we can write the api endpoints in the business layer and also use them in business layer (via UI agnostic way) and then can wrap the endpoints with some utility function to make react hooks to use in the UI layer.

[phryneas]

This would require a complete architectural rewrite and is not feasible.

Have you considered some kind of injectEndpoints wrapper in your business layer definitions?

export function injectBusinessEndpoints(api) {
  return api.injectEndpoints({
    // your endpoints here
  })
}

Your application would then create an api and call injectBusinessEndpoints on it.

[nandin-borjigin]

I'm still kind of conceiving the architecture so not sure if injectEndpoints would be competent. Type inference could be a big problem. Because different business parts (endpoints) can only access other parts through api, while the latter (api) is actually inject by the application layer and thus cannot have a nice type inference. The business layer may have to provide a comprehensive type definition of the api and the application layer may have to force cast the actual api object.

[phryneas]

If you write the code correctly, all of that should be able to be inferred.
You can see it in this playground - this code should work with different apis correctly, no matter if they are using the react import or the plain import.

export function inject<
  TagTypes extends string,
  Modules extends keyof ApiModules<any, any, any, any>
>(
  baseApi: Api<ReturnType<typeof fetchBaseQuery>, {}, "api", TagTypes, Modules>
) {
  return baseApi.injectEndpoints({
    endpoints: (build) => ({
      foo: build.query<{ foo: string }, string>({
        query(arg) {
          return `/foo/${arg}`;
        },
      }),
    }),
  });
}

[ThomasRutzer]

Hi,

I also have a question which might be related to this topic. If you compose an api with injectEndpoints, you still have to add all tagTypes upfront while createApi. Am I correct?

And is a security built-in that you do not override TagTypes?