The Benefits of Using RTK Query: A Scalable and Efficient Solution

As developers, we're constantly seeking ways to streamline our workflows and enhance the performance of our applications. One tool that has gained significant traction in the React ecosystem is Redux Toolkit Query (RTK Query). This library, built on top of Redux Toolkit, provides a solution for managing asynchronous data fetching and caching. In this article, we'll explore the key benefits of using RTK Query.

The Benefits of Using RTK Query: A Scalable and Efficient Solution

1. Simplicity and Ease of Use

One of the most compelling advantages of RTK Query is its simplicity. This is how one would easily define endpoints for various operations, such as querying data, and creating, updating, and deleting resources. The injectEndpoints method allows you to define these endpoints in a concise and declarative manner, reducing boilerplate code and improving readability.

booksApi.injectEndpoints({

  endpoints: builder => ({

    getBooks: builder.query<IBook[], void | string[]>({

      // ...

    }),

    createBundle: builder.mutation<any, void>({

      // ...

    }),

    addBook: builder.mutation<string, AddBookArgs>({

      // ...

    }),

    // ...

  }),

});

2. Automatic Caching and Invalidation

One of the features of RTK Query is its built-in caching mechanism. The library automatically caches the data fetched from your endpoints, ensuring that subsequent requests for the same data are served from the cache, reducing network overhead and improving performance. These examples demonstrate how RTK Query handles cache invalidation using the invalidatesTags option.

createBundle: builder.mutation<any, void>({

  invalidatesTags: [BooksTag],

  // ...

}),

addBook: builder.mutation<string, AddBookArgs>({

  invalidatesTags: [BooksTag],

  // ...

}),

By specifying the BooksTag, RTK Query knows which cache entries to invalidate when a mutation (e.g., createBundle or addBook) is performed, ensuring that the cache stays up-to-date and consistent with the server data.

3. Scalability and Maintainability

As your application grows in complexity, managing asynchronous data fetching and caching can become increasingly challenging. RTK Query's modular approach and separation of concerns make it easier to scale and maintain your codebase. Each endpoint is defined independently, allowing you to easily add, modify, or remove endpoints as needed without affecting the rest of your application.

endpoints: builder => ({

  getBooks: builder.query<IBook[], void | string[]>({

    // ...

  }),

  createBundle: builder.mutation<any, void>({

    // ...

  }),

  // ...

})

This modular structure promotes code reusability and makes it easier to reason about the different parts of your application, leading to better maintainability and collaboration within your team.

4. Efficient Data Fetching and Normalization

RTK Query provides built-in support for efficient data fetching and normalization. The queryFn shows how you can fetch data from multiple sources and normalize the data using the toSimpleBooks function. However, the current implementation can be optimized to reduce code duplication and improve readability. Here's an optimized version of the code:

async queryFn(collections) {

  try {

    const [snapshot, snapshot2] = await Promise.all(

      collections.map(fetchCachedCollection)

    ]);

    const success = await getBooksBundle();

    const books = success

      ? toSimpleBooks([...snapshot.docs, ...snapshot2.docs])

      : [];

    return { data: books };

  } catch (error) {

    return { error };

  }

}

In this optimized version, we're using Promise.all to fetch the two collections (latest-books-1-query and latest-books-2-query) concurrently. This approach ensures that we don't have to wait for one collection to finish fetching before starting the other, potentially reducing the overall fetching time.

Additionally, we've moved the getBooksBundle call inside the try block, ensuring that it's executed only if the collections are fetched successfully. This change helps maintain a clear separation of concerns and makes the code easier to reason about.

By leveraging RTK Query's efficient data fetching capabilities and employing best practices like Promise.all, you can ensure that your application fetches and normalizes data in an optimized and efficient manner, leading to improved performance and a better user experience.

5. Ease of Use With Exposed Hooks

One of the standout features of RTK Query is the ease of use it provides through its exposed hooks. Finally, I like to export the available generated typed hooks so you can use them (i.e, useGetBooksQuery, useCreateBundleMutation, etc.) to interact with the defined endpoints within your React components. These hooks abstract away the complexities of managing asynchronous data fetching and caching, allowing you to focus on building your application's logic.

export const {

  useGetBooksQuery,

  useLazyGetBooksQuery,

  useCreateBundleMutation,

  useAddBookMutation,

  useDeleteBookMutation,

  useUpdateBookMutation,

} = booksApi;

By leveraging these hooks, you can fetch data, trigger mutations, and handle loading and error states, all while benefiting from the caching and invalidation mechanisms provided by RTK Query.

Conclusion

By adopting RTK Query, you gain access to a solution for managing asynchronous data fetching and caching, while experiencing the simplicity, scalability, and ease of use provided by its exposed hooks. Whether you're building a small application or a large-scale project, RTK Query can help you streamline your development process and deliver high-performance, responsive applications.

The code within this post is taken from a live app in production, ReadM, a Real-time AI for Reading Fluency Assessments & Insights platform.