Should I use RTK Query per base URL or Resource?

user_4033344 0
Viewed 2743

I am working in a big project with a lots of base URL and resources that we can undestand as a lot of diferent integrated services.

Pluging RTK on my application following the resource line (Isolated), that i have a createApi() per resource.

I'm following this path because each resource has all CRUD methods and some custom ones, imagining we would have 10 methods (calls) to manage each resource And, using a single create API, I could have 200 methods on a single createApi/reducerPath.

example: (What i imagine that's solve my problem)

// users-api.ts
 export const usersApi = createApi({
    reducerPath: 'usersApi',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // getUsers(), getUser(), getManyUsers() createUser(), updateUser(), ... 
 })

// cards-api.ts
 export const cardsApi = createApi({
    reducerPath: 'cardsApi ',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // ...
 })

// accounts-api.ts
 export const accountsApi = createApi({
    reducerPath: 'accountsApi ',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // ...
 })

// preferences-api.ts
 export const preferencesApi = createApi({
    reducerPath: 'preferencesApi',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (same base url)
    })
  // ...
 })

// templates-api.ts
 export const templatesApi = createApi({
    reducerPath: 'templatesApi',
    baseQuery: httpClientBaseQuery({
        baseUrl: 'http://localhost:3000/' // (different base url)
    })
  // ...
 })

...

From the RTK Documentation:

"createApi(): The core of RTK Query's functionality. It allows you to define a set of endpoints describe how to retrieve data from a series of endpoints, including configuration of how to fetch and transform that data. In most cases, you should use this once per app, with "one API slice per base URL" as a rule of thumb."

The question, is it okay to use RTK that way (per resource)? will I have performance problem, or would it not be the right way?

rtk-query redux-toolkit
1 Answers

We recommend that you should have one createApi per interconnected data source - usually that would be one per domain. If you split it up into multiple createApi calls, those apis could not influence each other, so a mutation at one endpoint could not automatically trigger a re-fetch of laterally affected data from another createApi.

Even if you have only one createApi call, you can still split it up over multiple files using the Code splitting approach using injectEndpoints.

// a central, potentially empty api definition
import { emptySplitApi } from './emptySplitApi'

const extendedApi = emptySplitApi.injectEndpoints({
  endpoints: (build) => ({
    // adding only this endpoint in this file
    example: build.query({
      query: () => 'test',
    }),
  }),
  overrideExisting: false,
})

// and exporting the hook to be used from components
export const { useExampleQuery } = extendedApi
user_20759440
Related