skills.rest
TranVanTienDat
TranVanTienDatCOMMUNITY
Explore all skills by this author →
GitHub

apollo-client

Implement GraphQL data fetching in React applications using Apollo Client 4.x.

Updated Mar 26, 2026
Search Tags:#typescript#caching#react#data fetching#graphql#next.js#apollo client
One-click install
npx skills add https://github.com/TranVanTienDat/Milkyway --skill apollo-client-tranvantiendat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: apollo-client
Source: https://github.com/TranVanTienDat/Milkyway/tree/main/apps/storefront/.agents/skills/apollo-client
Command: npx skills add https://github.com/TranVanTienDat/Milkyway --skill apollo-client-tranvantiendat

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @apollo/client, graphql, rxjs, and includes references (resource) components.

What problem does it solve? Setting up and maintaining GraphQL data fetching in React applications involves many decisions: client configuration, caching strategies, fragment colocation, error handling, and framework-specific SSR integration. This Skill provides authoritative Apollo Client 4.x guidance so you avoid outdated v3 patterns and misconfigured caches. ## Core Features & Use Cases - Framework Integration Guides: Step-by-step setup for client-side apps (Vite, CRA), Next.js App Router with RSC, React Router 7 framework mode, and TanStack Start with streaming SSR. - Caching & State Management: Detailed references for InMemoryCache, typePolicies, pagination (offset and Relay-style), cache manipulation, and reactive variables for local state. - Queries, Mutations & Fragments: Patterns for useQuery, useSuspenseQuery, useMutation with optimistic UI, fragment colocation with data masking, and TypeScript code generation. - Use Case: You are building a Next.js App Router storefront and need to preload GraphQL data in Server Components, hydrate the client cache, and use suspenseful hooks in Client Components without request waterfalls. ## Quick Start Ask the AI to set up Apollo Client 4.x in your React project and write a type-safe query with proper cache configuration.

Frequently Asked Questions about apollo-client

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Apollo Client in a Next.js App Router application?▼

Install @apollo/client-integration-nextjs, then use registerApolloClient to create a shared client for React Server Components and ApolloNextAppProvider for Client Components. Use PreloadQuery in Server Components to hydrate the browser cache for useSuspenseQuery.

How do I configure caching and pagination in Apollo Client 4.x?▼

Configure InMemoryCache with typePolicies: set keyFields for entity identification, use offsetLimitPagination or relayStylePagination helpers for paginated fields, and define merge/read functions for custom behavior. Use keyArgs to control which arguments affect cache keys.

What is the difference between useQuery and useSuspenseQuery in Apollo Client?▼

useQuery is non-suspenseful and requires manual loading and error state handling, while useSuspenseQuery integrates with React Suspense boundaries and error boundaries. Apollo Client 4.x recommends Suspense hooks for modern applications with better type narrowing via dataState.

Does Apollo Client 4.x work with React 19 and React Server Components?▼

Yes, Apollo Client 4.x supports React 18 and React 19 including Suspense and RSC. The Next.js integration package provides a shared client per request for Server Components and cache hydration for Client Components.

How do I handle GraphQL errors in Apollo Client 4.x?▼

Use the static is methods on error classes like CombinedGraphQLErrors.is(error) and ServerError.is(error) instead of instanceof. Set errorPolicy per operation ('none', 'ignore', or 'all') and use ErrorLink or RetryLink for logging and retries.

When should I use fragment colocation and data masking?▼

Colocate a fragment with each component to declare its exact data needs, and read it with useFragment or useSuspenseFragment. Enable dataMasking on the client so components only access their own fragment fields, reducing re-renders and enforcing data boundaries.

Related Skills

Explore More Software Engineering Skills→
markus41markus41
1

graphql

Create GraphQL schemas, resolvers, queries, mutations, and subscriptions.

Community
Intermediate
majesticlabs-devmajesticlabs-dev
47

action-policy-coder

Automate ActionPolicy policy creation, scoping, and GraphQL/ActionCable integration for Rails authorization.

Official
Advanced
luyi985luyi985

codegen-over-complex-types

Generate TypeScript types from OpenAPI, GraphQL, or database schemas.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

relay-fragments-patterns

Compose Relay fragments to manage component-level data dependencies in React.

Official
Advanced