Stop Writing API Wrappers — Use TanStack Query Instead

function UserProfile({ userId }: { userId: string }) {
    const [user, setUser] = useState<User | null>(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState<Error | null>(null);

    useEffect(() => {
        setLoading(true);
        fetch(`/api/users/${userId}`)
            .then(r => r.json())
            .then(data => { setUser(data); setLoading(false); })
            .catch(err => { setError(err); setLoading(false); });
    }, [userId]);

    if (loading) return <Spinner />;
    if (error) return <Error message={error.message} />;
    return <Profile user={user!} />;
}

function UserProfile({ userId }: { userId: string }) {
    const { data: user, isLoading, error } = useQuery({
        queryKey: ['user', userId],
        queryFn: () => fetch(`/api/users/${userId}`).then(r => r.json()),
    });

    if (isLoading) return <Spinner />;
    if (error) return <Error message={error.message} />;
    return <Profile user={user} />;
}

npm install @tanstack/react-query

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient({
    defaultOptions: {
        queries: {
            staleTime: 60 * 1000, // 1 minute
            retry: 2,
        },
    },
});

export function App() {
    return (
        <QueryClientProvider client={queryClient}>
            <Router />
        </QueryClientProvider>
    );
}

function CreatePostForm() {
    const queryClient = useQueryClient();

    const { mutate, isPending } = useMutation({
        mutationFn: (newPost: NewPost) =>
            fetch('/api/posts', {
                method: 'POST',
                body: JSON.stringify(newPost),
            }).then(r => r.json()),

        onSuccess: () => {
            // Invalidate the posts list so it refetches
            queryClient.invalidateQueries({ queryKey: ['posts'] });
        },
    });

    return (
        <form onSubmit={e => {
            e.preventDefault();
            mutate({ title: 'New Post', body: '...' });
        }}>
            <button type="submit" disabled={isPending}>
                {isPending ? 'Creating...' : 'Create Post'}
            </button>
        </form>
    );
}

const { mutate } = useMutation({
    mutationFn: toggleLike,

    onMutate: async ({ postId }) => {
        // Cancel outgoing refetches
        await queryClient.cancelQueries({ queryKey: ['post', postId] });

        // Snapshot current value
        const previous = queryClient.getQueryData(['post', postId]);

        // Optimistically update
        queryClient.setQueryData(['post', postId], (old: Post) => ({
            ...old,
            liked: !old.liked,
            likeCount: old.liked ? old.likeCount - 1 : old.likeCount + 1,
        }));

        return { previous };
    },

    onError: (err, { postId }, context) => {
        // Roll back on error
        queryClient.setQueryData(['post', postId], context?.previous);
    },
});

const userQueries = {
    all: () => ['users'] as const,
    lists: () => [...userQueries.all(), 'list'] as const,
    detail: (id: string) => [...userQueries.all(), 'detail', id] as const,
    posts: (userId: string) => [...userQueries.detail(userId), 'posts'] as const,
};

// Usage
useQuery({ queryKey: userQueries.detail(userId), queryFn: fetchUser });
useQuery({ queryKey: userQueries.posts(userId), queryFn: fetchUserPosts });

// Invalidate all user queries
queryClient.invalidateQueries({ queryKey: userQueries.all() });

// Invalidate just one user's data
queryClient.invalidateQueries({ queryKey: userQueries.detail(userId) });

function UserListItem({ user }: { user: User }) {
    const queryClient = useQueryClient();

    return (
        <Link
            href={`/users/${user.id}`}
            onMouseEnter={() => {
                // Prefetch on hover — data is ready before they click
                queryClient.prefetchQuery({
                    queryKey: userQueries.detail(user.id),
                    queryFn: () => fetchUser(user.id),
                });
            }}
        >
            {user.name}
        </Link>
    );
}