Posted onSep 24, 2024

React CRUD Operations with Axios and React Query

#webdev #javascript #axios #react

In the previous article,Simplifying HTTP Requests in React with Custom Hooks 🎣, we explored how to simplify HTTP requests using custom hooks. While effective for smaller applications, this approach may become harder to maintain as your React app scales. In this article, we'll dive into how to handle CRUD (Create, Read, Update, Delete) operations in a scalable way using Axios and React Query.

Why Axios and React Query?

Axios: A promise-based HTTP client for the browser and Node.js, Axios simplifies sending asynchronous HTTP requests to REST endpoints with clean, readable code.
React Query: A powerful data-fetching library that enhances data synchronization, caching, and state management in React. React Query automates data fetching while providing better control over loading and error states.

Setting Up Axios and React Query

First, install the necessary packages:

npminstallaxios react-query react-router-dom

Setting Up React Query in Your App

Next, configure React Query in your entry file (App.tsx) to manage your application's global query settings.

// src/App.tsximport{QueryClient,QueryClientProvider}from'react-query';import{CustomRouter}from'./Router';constqueryClient=newQueryClient({defaultOptions:{queries:{refetchOnWindowFocus:false,// Prevent refetch on tab/window switchretry:1,// Retry failed queries once},},});constApp:React.FC=()=>(<QueryClientProviderclient={queryClient}><CustomRouter/></QueryClientProvider>);exportdefaultApp;

Setting Up Axios with Interceptors

To handle authentication globally, we can create an Axios instance and use interceptors to attach the Authorization header for authenticated requests.

// src/config/axiosApi.tsimportaxiosfrom'axios';constauthenticatedApi=axios.create({baseURL:import.meta.env.VITE_BASE_URL,// Environment-specific base URLheaders:{'Content-Type':'application/json',},});// Attach Authorization token to requests if presentauthenticatedApi.interceptors.request.use((config)=>{consttoken=localStorage.getItem('crud-app-auth-token');if(token){config.headers.Authorization=`Bearer${token}`;}returnconfig;});export{authenticatedApi};

Creating API Functions for CRUD Operations

Let's define functions that interact with our API to perform CRUD operations using Axios:

// src/data/api/post.tsimport{authenticatedApi}from'../../config/axiosApi';// Error handler function to standardize error messagesexportconsthandleApiError=(error:any):never=>{if(error.message==='Network Error'){thrownewError('Network Error. Please try again later.');}elseif(error.response?.data?.error){thrownewError(error.response.data.error);}elseif(error.response){thrownewError('A server error occurred.');}else{thrownewError(error.message||'An unknown error occurred.');}};// General function to handle API requestsexportconstapiCall=async<T>(method:'get'|'post'|'put'|'delete',url:string,data?:any,):Promise<T>=>{try{constresponse=awaitauthenticatedApi[method](url,data);returnresponse.data;}catch(error){throwhandleApiError(error);}};// CRUD functions for the post feedexportconstcreatePostApi=(post:any)=>apiCall<any>('post','posts',post);exportconstgetPostsApi=()=>apiCall<any>('get','posts');exportconstupdatePostApi=(id:string,post:any)=>apiCall<any>('put',`posts/${id}`,post);exportconstdeletePostApi=(id:string)=>apiCall<any>('delete',`posts/${id}`);

Using React Query Hooks for CRUD Operations

Now that we have API functions, we can use React Query to handle state management and data fetching for these operations.

// src/data/hooks/post.tsimport{useMutation,useQuery,useQueryClient}from'react-query';import{createPostApi,getPostsApi,updatePostApi,deletePostApi}from'../api/post';// Custom hooks for CRUD operationsexportconstuseCreatePostApi=()=>{constqueryClient=useQueryClient();returnuseMutation(createPostApi,{onSuccess:()=>queryClient.invalidateQueries(['posts']),// Refetch posts after a new post is created});};exportconstuseGetPostsApi=()=>useQuery(['posts'],getPostsApi);exportconstuseUpdatePostApi=()=>{constqueryClient=useQueryClient();returnuseMutation(updatePostApi,{onSuccess:()=>queryClient.invalidateQueries(['posts']),// Refetch posts after an update});};exportconstuseDeletePostApi=()=>{constqueryClient=useQueryClient();returnuseMutation(deletePostApi,{onSuccess:()=>queryClient.invalidateQueries(['posts']),// Refetch posts after deletion});};

Consuming CRUD Hooks in a Component

Finally, we can build a simple component that consumes the custom hooks and allows users to create, edit, and delete posts.

// src/components/PostCard.tsximportReact,{useState}from'react';import{useGetPostsApi,useDeletePostApi,useUpdatePostApi,useCreatePostApi}from'../data/hooks/post';import{toast}from'../components/Toast';// Assume a toast component existsconstPostCard:React.FC=()=>{const{data:posts,isLoading,error}=useGetPostsApi();constdeletePost=useDeletePostApi();constupdatePost=useUpdatePostApi();constcreatePost=useCreatePostApi();const[newPost,setNewPost]=useState({title:'',content:''});consthandleCreate=async()=>{try{awaitcreatePost.mutateAsync(newPost);setNewPost({title:'',content:''});toast.success('Post created successfully');}catch(error){toast.error(error.message);}};consthandleDelete=async(id:string)=>{try{awaitdeletePost.mutateAsync(id);toast.success('Post deleted successfully');}catch(error){toast.error(error.message);}};consthandleEdit=async(id:string,updatedPost:any)=>{try{awaitupdatePost.mutateAsync({id,...updatedPost});toast.success('Post updated successfully');}catch(error){toast.error(error.message);}};if(isLoading)return<div>Loading...</div>;if(error)return<div>Error:{error.message}</div>;return(<div><div><inputtype="text"value={newPost.title}onChange={(e)=>setNewPost({...newPost,title:e.target.value})}placeholder="Title"/><inputtype="text"value={newPost.content}onChange={(e)=>setNewPost({...newPost,content:e.target.value})}placeholder="Content"/><buttononClick={handleCreate}disabled={createPost.isLoading}>{createPost.isLoading?'Creating...':'Create Post'}</button></div>{posts?.map((post:any)=>(<divkey={post.id}><h3>{post.title}</h3><p>{post.content}</p><buttononClick={()=>handleEdit(post.id,{title:'Updated Title',content:'Updated Content'})}>Edit</button><buttononClick={()=>handleDelete(post.id)}>Delete</button></div>))}</div>);};exportdefaultPostCard;

Conclusion

By using Axios and React Query, you can streamline CRUD operations in your React applications. This combination results in clean, maintainable code, improving scalability and performance. Use these tools to simplify state management and data fetching as your app grows.

For more insights on React, TypeScript, and modern web development practices, follow me on Dev.to! 👨‍💻