In our previous article, we explored the fundamentals of creating custom React hooks for REST API services using Tanstack React Query. Building on that foundation, this article aims to deepen your understanding by abstracting these services, thereby enhancing the Developer Experience (DX) and minimizing code redundancy.
Our main goal is to abstract REST API services to streamline your development process. This approach not only improves code readability but also significantly reduces the repetition of similar code patterns across different components.
We discussed about building custom react hooks for your REST API Services using Tanstack React Query in a previous article. We wanted to abstract the custom services for the REST API endpoints to improve the Developer Experience (DX) and reduce code duplications.
The code snippet hosted on Github Gists
We’re leveraging TanStack Query v4 in conjunction with Axios for REST client interactions. While this code aligns with our backend REST API conventions at MachDatum, it’s versatile enough for various use cases with some tweaks.
Introducing useEntities Hook
The useEntities hook is a game-changer for fetching a list of entities. It uses a generic type that mandates a unique ‘id’ field of type ‘string’. This hook takes two parameters: key (for TanStack Query keys) and url (the API endpoint). It simplifies queries by caching responses based on these input parameters.
The Power of useEntity Hook
useEntity is a more dynamic hook, handling not only the GET request for a specific entity by ID but also POST, PUT, and DELETE operations. Similar to useEntities, it requires key, url, and an additional id parameter. This hook is intelligent – it fetches, adds, updates, or deletes an entity based on the given ID and operation.
A pivotal feature of useEntity is the onSuccess callback, designed to enhance the User Experience (UX). This function smartly updates the cache after API operations, ensuring the UI reflects the most current data.
Why Separate Hooks?
We’ve deliberately kept useEntities and useEntity separate to optimize performance. This separation prevents unnecessary fetching of the entire entity list when operations are performed on a single entity.
These custom hooks, tailored for React and built with Tanstack React Query, represent a significant stride in efficient and clean API service management in your React applications. Stay tuned for our upcoming series, where we’ll dive into pagination, filtering, and sorting techniques.
