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.

What this migration involves

Moving from Apollo Client to TanStack Query + fetch is rated medium and takes about 6-16h on a typical project. The guide breaks it into 6 steps, 2 of which ship with runnable commands and 1 with a verification check.

Related migrations

TanStack Query v4 → TanStack Query v5 — medium, 2-5h

FAQ

How long does migrating from Apollo Client to TanStack Query + fetch take?

Around 6-16h for a typical project — 6 steps, difficulty rated medium, 2 of them with copy-paste commands.

Is moving from Apollo Client to TanStack Query + fetch reversible?

No reverse guide is tracked yet, so treat this as a one-way move and keep a full export of your Apollo Client data before you start.

What does TanStack Query + fetch cost compared to Apollo Client?

Pricing for both tools is contact-based or not tracked yet.