28:["$","div",null,{"children":[["$","div","0",{"className":"mb-8","children":["$undefined",["$","p",null,{"className":"text-text-dim leading-relaxed mb-4","children":["Apollo Client is the standard way to consume a GraphQL API in React. It handles network requests, caching, loading states, and error states — removing an enormous amount of boilerplate you would otherwise write with fetch and useState."]}],"$undefined","$undefined","$undefined","$undefined","$undefined","$undefined","$undefined"]}],["$","div","1",{"className":"mb-8","children":[["$","h2",null,{"id":"setup","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"Setup"}],"$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"Apollo Client setup in Next.js / React"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"// lib/apollo-client.ts\nimport { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client'\nimport { setContext } from '@apollo/client/link/context'\n\nconst httpLink = createHttpLink({ uri: '/api/graphql' })\n\nconst authLink = setContext((_, { headers }) => {\n const token = localStorage.getItem('token')\n return {\n headers: {\n ...headers,\n authorization: token ? `Bearer ${token}` : '',\n },\n }\n})\n\nexport const client = new ApolloClient({\n link: authLink.concat(httpLink),\n cache: new InMemoryCache(),\n})\n\n// _app.tsx or layout.tsx\nimport { ApolloProvider } from '@apollo/client'\nexport default function App({ children }) {\n return {children}\n}"}]}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined"]}],["$","div","2",{"className":"mb-8","children":[["$","h2",null,{"id":"usequery-fetching-data","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"useQuery — fetching data"}],"$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"useQuery hook"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"import { useQuery, gql } from '@apollo/client'\n\nconst GET_USER = gql`\n query GetUser($id: ID!) {\n user(id: $id) {\n id\n name\n email\n posts(limit: 5) {\n id\n title\n }\n }\n }\n`\n\nexport function UserProfile({ userId }: { userId: string }) {\n const { data, loading, error } = useQuery(GET_USER, {\n variables: { id: userId },\n })\n\n if (loading) return \n if (error) return \n\n const { user } = data\n return (\n

{user.name}

{user.email}

\n )\n}"}]}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined"]}],["$","div","3",{"className":"mb-8","children":[["$","h2",null,{"id":"usemutation-writing-data","className":"font-display font-bold text-xl text-text mb-3 scroll-mt-20","children":"useMutation — writing data"}],"$undefined","$undefined",["$","div",null,{"className":"mb-4","children":[["$","p",null,{"className":"data-label mb-1.5","children":"useMutation hook"}],["$","div",null,{"className":"rounded border border-border bg-bg overflow-x-auto","children":["$","pre",null,{"className":"px-4 py-3 text-xs font-mono text-text-dim leading-relaxed whitespace-pre","children":"import { useMutation, gql } from '@apollo/client'\n\nconst CREATE_POST = gql`\n mutation CreatePost($input: CreatePostInput!) {\n createPost(input: $input) {\n post { id title publishedAt }\n errors { field message }\n }\n }\n`\n\nexport function NewPostForm() {\n const [createPost, { loading }] = useMutation(CREATE_POST, {\n // After mutation, refetch the user's posts list\n refetchQueries: ['GetUserPosts'],\n })\n\n const handleSubmit = async (values) => {\n const { data } = await createPost({ variables: { input: values } })\n if (data.createPost.errors.length > 0) {\n // handle business-logic errors\n }\n }\n\n return \n}"}]}]]}],"$undefined","$undefined","$undefined","$undefined","$undefined"]}],"$L2b","$L2c","$L2d","$L2e","$L2f"]}]

Apollo Client in React — Consuming a GraphQL API