Unmanageable API files

[tompeace]

I find myself having large API files and having to use the following "composition" helper to separate different domains into separate files:

const withBuilder = (...arr) => builder => arr.reduce((acc, cur) => ({
    ...acc,
    ...cur(builder)
}), {})

createApi then looks like this:

// user.js
const users = builder => ({ getUsers: builder.query(...) })

// products.js
const products = builder => ({ getProducts: builder.query(...) })

//api.js
export const API = createApi({
  reducerPath: 'api',
  entityTypes: ['Users', 'Products'],
  baseQuery: fetchBaseQuery({ baseUrl: 'http://my.endpoint.com' }),
  endpoints: withBuilder(products, users)
})

I don't know if this should be included in the codebase, as it could simply be mentioned in the docs, but I definitely see this becoming a common pattern for many as their apps grow larger

[phryneas]

You can also use our recommended Code Splitting approach. Would that help?