ホームページ > 記事 > ウェブフロントエンド > Axios と React Query を使用した React CRUD 操作
前の記事「カスタム フックを使用した React での HTTP リクエストの簡素化?」では、カスタム フックを使用して HTTP リクエストを簡素化する方法を検討しました。このアプローチは小規模なアプリケーションには効果的ですが、React アプリがスケールするにつれて維持するのが難しくなる可能性があります。この記事では、Axios と React Query を使用して CRUD (作成、読み取り、更新、削除) 操作をスケーラブルな方法で処理する方法について詳しく説明します。
Axios: ブラウザーおよび Node.js 用の Promise ベースの HTTP クライアントである Axios は、クリーンで読みやすいコードで REST エンドポイントへの非同期 HTTP リクエストの送信を簡素化します。
React Query: React でのデータ同期、キャッシュ、状態管理を強化する強力なデータ取得ライブラリです。 React Query は、データの取得を自動化しながら、読み込みとエラーの状態をより適切に制御します。
まず、必要なパッケージをインストールします。
npm install axios react-query react-router-dom
次に、エントリ ファイル (App.tsx) で React Query を構成して、アプリケーションのグローバル クエリ設定を管理します。
// src/App.tsx import { QueryClient, QueryClientProvider } from 'react-query'; import { CustomRouter } from './Router'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // Prevent refetch on tab/window switch retry: 1, // Retry failed queries once }, }, }); const App: React.FC = () => ( <QueryClientProvider client={queryClient}> <CustomRouter /> </QueryClientProvider> ); export default App;
認証をグローバルに処理するには、Axios インスタンスを作成し、インターセプターを使用して認証されたリクエストの Authorization ヘッダーを添付します。
// src/config/axiosApi.ts import axios from 'axios'; const authenticatedApi = axios.create({ baseURL: import.meta.env.VITE_BASE_URL, // Environment-specific base URL headers: { 'Content-Type': 'application/json', }, }); // Attach Authorization token to requests if present authenticatedApi.interceptors.request.use((config) => { const token = localStorage.getItem('crud-app-auth-token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); export { authenticatedApi };
Axios を使用して CRUD 操作を実行するために API と対話する関数を定義しましょう:
// src/data/api/post.ts import { authenticatedApi } from '../../config/axiosApi'; // Error handler function to standardize error messages export const handleApiError = (error: any): never => { if (error.message === 'Network Error') { throw new Error('Network Error. Please try again later.'); } else if (error.response?.data?.error) { throw new Error(error.response.data.error); } else if (error.response) { throw new Error('A server error occurred.'); } else { throw new Error(error.message || 'An unknown error occurred.'); } }; // General function to handle API requests export const apiCall = async <T>( method: 'get' | 'post' | 'put' | 'delete', url: string, data?: any, ): Promise<T> => { try { const response = await authenticatedApi[method](url, data); return response.data; } catch (error) { throw handleApiError(error); } }; // CRUD functions for the post feed export const createPostApi = (post: any) => apiCall<any>('post', 'posts', post); export const getPostsApi = () => apiCall<any>('get', 'posts'); export const updatePostApi = (id: string, post: any) => apiCall<any>('put', `posts/${id}`, post); export const deletePostApi = (id: string) => apiCall<any>('delete', `posts/${id}`);
API 関数を用意したので、React Query を使用してこれらの操作の状態管理とデータの取得を処理できます。
// src/data/hooks/post.ts import { useMutation, useQuery, useQueryClient } from 'react-query'; import { createPostApi, getPostsApi, updatePostApi, deletePostApi } from '../api/post'; // Custom hooks for CRUD operations export const useCreatePostApi = () => { const queryClient = useQueryClient(); return useMutation(createPostApi, { onSuccess: () => queryClient.invalidateQueries(['posts']), // Refetch posts after a new post is created }); }; export const useGetPostsApi = () => useQuery(['posts'], getPostsApi); export const useUpdatePostApi = () => { const queryClient = useQueryClient(); return useMutation(updatePostApi, { onSuccess: () => queryClient.invalidateQueries(['posts']), // Refetch posts after an update }); }; export const useDeletePostApi = () => { const queryClient = useQueryClient(); return useMutation(deletePostApi, { onSuccess: () => queryClient.invalidateQueries(['posts']), // Refetch posts after deletion }); };
最後に、カスタム フックを使用し、ユーザーが投稿を作成、編集、削除できるようにする単純なコンポーネントを構築できます。
// src/components/PostCard.tsx import React, { useState } from 'react'; import { useGetPostsApi, useDeletePostApi, useUpdatePostApi, useCreatePostApi } from '../data/hooks/post'; import { toast } from '../components/Toast'; // Assume a toast component exists const PostCard: React.FC = () => { const { data: posts, isLoading, error } = useGetPostsApi(); const deletePost = useDeletePostApi(); const updatePost = useUpdatePostApi(); const createPost = useCreatePostApi(); const [newPost, setNewPost] = useState({ title: '', content: '' }); const handleCreate = async () => { try { await createPost.mutateAsync(newPost); setNewPost({ title: '', content: '' }); toast.success('Post created successfully'); } catch (error) { toast.error(error.message); } }; const handleDelete = async (id: string) => { try { await deletePost.mutateAsync(id); toast.success('Post deleted successfully'); } catch (error) { toast.error(error.message); } }; const handleEdit = async (id: string, updatedPost: any) => { try { await updatePost.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> <input type="text" value={newPost.title} onChange={(e) => setNewPost({ ...newPost, title: e.target.value })} placeholder="Title" /> <input type="text" value={newPost.content} onChange={(e) => setNewPost({ ...newPost, content: e.target.value })} placeholder="Content" /> <button onClick={handleCreate} disabled={createPost.isLoading}> {createPost.isLoading ? 'Creating...' : 'Create Post'} </button> </div> {posts?.map((post: any) => ( <div key={post.id}> <h3>{post.title}</h3> <p>{post.content}</p> <button onClick={() => handleEdit(post.id, { title: 'Updated Title', content: 'Updated Content' })}> Edit </button> <button onClick={() => handleDelete(post.id)}> Delete </button> </div> ))} </div> ); }; export default PostCard;
Axios と React Query を使用すると、React アプリケーションでの CRUD 操作を合理化できます。この組み合わせにより、クリーンで保守しやすいコードが得られ、スケーラビリティとパフォーマンスが向上します。これらのツールを使用すると、アプリの成長に合わせて状態管理とデータの取得を簡素化できます。
React、TypeScript、最新の Web 開発実践についてさらに詳しく知りたい場合は、Dev.to で私をフォローしてください。 ??
以上がAxios と React Query を使用した React CRUD 操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。