Skip to content
Home / Migrations / Apollo Client → TanStack Query + fetch

Apollo Client → TanStack Query + fetch

medium

Apollo Client is heavy (34 KB gzipped) and ties you to GraphQL. TanStack Query + plain fetch (or a thin GraphQL client like graphql-request) gives you the same caching with 10x less complexity.

Estimated: 6-16h · 6 steps
Progress0%
Step 1: Install dependencies
npm install @tanstack/react-query graphql-request && npm uninstall @apollo/client graphql
Step 2: Replace ApolloProvider

Wrap app with QueryClientProvider from @tanstack/react-query instead of ApolloProvider.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
const queryClient = new QueryClient()
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
Step 3: Replace useQuery

Apollo useQuery(QUERY, { variables }) → TanStack useQuery({ queryKey: ['key', vars], queryFn: () => gqlClient.request(QUERY, vars) }).

Step 4: Replace useMutation

Apollo useMutation → TanStack useMutation({ mutationFn: (vars) => gqlClient.request(MUTATION, vars) }). Invalidate queries onSuccess.

Step 5: Handle cache invalidation

Apollo's automatic cache normalization is gone. Use queryClient.invalidateQueries({ queryKey: ['key'] }) after mutations.

✓ Data updates after mutations, no stale reads
Step 6: Remove Apollo DevTools

Install @tanstack/react-query-devtools instead — better DX anyway.