Redux Toolkit Query is a powerful and user friendly tool for data fetching and caching. It simplifies common use cases by providing simplified API definition, effortless caching, intuitive hooks and built-in stage management.

Let us look at a few features of QTK query

• Powerful Options and Customization: RTK query offers fine-tune caching, re-fetching, middleware, and more to fit your specific needs.

• Mutations for Data Updates: RTK query provides hooks for handling data modifications that impact the server.

• Data Fetching from Multiple Sources: Redux toolkit query supports REST APIs, GraphQL, Local storage, and custom async logic.

• Automatic Re-fetching: If necessary, RTK query fetches data based on stale time, focus changes, or other conditions.

Why RTK query code splitting?

Code splitting is great, especially for applications that involve the use of several endpoints attached to an original API definition.

Below is an example of an original API definition

//here's an example of an original API definition
export const victoryApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example-accounts-service.up.railway.app/api/v1/' }),
)}

here's an example of an endpoint

//example of an endpoint to be attached to an original API definition
endpoints: (build) => ({
    example: build.query({
      query: () => 'profile',
    }),
  }),

is RTK query code splitting necessary?

With RTK query code splitting, you can write cleaner, easy-to-read codes. It also makes debugging your codes way easier as you eliminate the need to search the entire bundle when debugging because you have split your codes i.e original API definitions apart, and endpoints apart.

Let's take a look at the codes below where code splitting wasn't applied. Here, two endpoints were attached to an original API definition.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const unProtectedApi = createApi({
  reducerPath: 'victoryApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example-accounts-service.up.railway.app/api/v1/' }),

  endpoints: (builder) => ({
    //first endpoint
    firstEndpoint: build.query({
      query: () => 'profile',
    }),
    //second endpoint
    secondEndpoint: builder.mutation({
            query: (body) => ({
                url: "registration",
                method: "POST",
                body,
            }),
          }),

}),
})

export const { useGetFirstEndpointQuery, usePostSecondEndpointMutation } = myApi

Now, let us apply code splitting

First off, we're gonna be doctors for a while as we'll need to "inject"

OK, just kidding,

IntroducinginjectEndpoints()

injectEndpoints() will help you "connect" the endpoints into an original API. Note that splitting most have occurred i.e original API and endpoints in different components.

let's write codes!

first off, the original API component.

//here's an example of an original API definition
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
export const victoryApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example-accounts-service.up.railway.app/api/v1/' }),
endpoints: () => ({}),
)}

now that we've written the codes for the original API definition, let's introduce injectEndpoints() into the endpoint component.

// do not forget to import your original API i.e "victoryAPI"
import { victoryApi } from './the file location'
//introducing injectEndpoints()
//Endpoint codes will be written in the injectEndpoint() function
const extendedApi = victoryApi.injectEndpoints({
endpoints: (builder) => ({
    //first endpoint
    firstEndpoint: builder.query({
      query: () => 'profile',
    }),
    //second endpoint
    secondEndpoint: builder.mutation({
            query: (body) => ({
                url: "registration",
                method: "POST",
                body,
            }),
          }),

}),
})

export const { useGetFirstEndpointQuery, usePostSecondEndpointMutation } = extendedApi

Want to write neater, readable codes when using Redux toolkit query to fetch data? Code splitting is the way to go!

Hi there, I hope this was useful and educating. Want to stay connected with me, you can reach out via Linkedin www.linkedin.com/in/durosinmi-victory