Code-MCP

import { useQuery, useMutation, useQueryClient, QueryClient, QueryClientProvider, } from '@tanstack/react-query'; import axios from 'axios'; // ============================================ // Setup // ============================================ // Create a client export const queryClient = new QueryClient({ defaultOptions: { queries: { staleTime: 1000 * 60 * 5, // 5 minutes gcTime: 1000 * 60 * 30, // 30 minutes retry: 1, refetchOnWindowFocus: false, }, }, }); // API Client const api = axios.create({ baseURL: '/api', }); // ============================================ // Types // ============================================ interface Post { id: number; title: string; body: string; } interface CreatePostDto { title: string; body: string; } // ============================================ // Hooks // ============================================ // Fetch posts export const usePosts = (limit = 10) => { return useQuery({ queryKey: ['posts', limit], queryFn: async () => { const { data } = await api.get<Post[]>(`/posts?limit=${limit}`); return data; }, placeholderData: (previousData) => previousData, // Keep previous data while fetching }); }; // Fetch single post export const usePost = (id: number) => { return useQuery({ queryKey: ['post', id], queryFn: async () => { const { data } = await api.get<Post>(`/posts/${id}`); return data; }, enabled: !!id, // Only fetch if id is present }); }; // Create post mutation export const useCreatePost = () => { const queryClient = useQueryClient(); return useMutation({ mutationFn: async (newPost: CreatePostDto) => { const { data } = await api.post<Post>('/posts', newPost); return data; }, onMutate: async (newPost) => { // Optimistic Update await queryClient.cancelQueries({ queryKey: ['posts'] }); const previousPosts = queryClient.getQueryData<Post[]>(['posts']); queryClient.setQueryData<Post[]>(['posts'], (old) => [ { id: Date.now(), ...newPost }, // Temporary optimistic post ...(old || []), ]); return { previousPosts }; }, onError: (err, newPost, context) => { // Rollback on error if (context?.previousPosts) { queryClient.setQueryData(['posts'], context.previousPosts); } }, onSettled: () => { // Refetch to ensure data is correct queryClient.invalidateQueries({ queryKey: ['posts'] }); }, }); }; // ============================================ // React Components // ============================================ export const PostsList = () => { const { data: posts, isLoading, isError } = usePosts(); if (isLoading) return <div>Loading...</div>; if (isError) return <div>Error loading posts </div>; return ( <ul> { posts?.map((post) => ( <li key= { post.id } > { post.title } </li> ))} </ul> ); }; export const CreatePostForm = () => { const mutation = useCreatePost(); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); mutation.mutate({ title: 'New Post', body: 'Content...' }); }; return ( <form onSubmit= { handleSubmit } > <button disabled={ mutation.isPending }> { mutation.isPending ? 'Creating...' : 'Create Post' } </button> { mutation.isError && <div>Error: { mutation.error.message } </div> } </form> ); };