apollo-client

Provides actionable HRMS implementation and upgrade guidance for all audiences.

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/bpteam/coder --skill apollo-client-bpteam
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: apollo-client
Source: https://github.com/bpteam/coder/tree/main/.opencode/skills/apollo-client
Command: npx skills add https://github.com/bpteam/coder --skill apollo-client-bpteam

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides developers to implement robust Apollo Client 4.x data-fetching and state management in React apps, including SSR support and advanced patterns.

Core Features & Use Cases

  • Integration guides for Client-Side Apps, Next.js App Router, React Router Framework Mode, and TanStack Start to cover diverse app architectures.
  • Comprehensive references for caching, fragments, suspense hooks, error handling, and local state management.
  • Framework-agnostic patterns with best practices, troubleshooting tips, and code-generation guidance.

Quick Start

Install the Apollo Client package(s) and begin building queries with suspense-ready hooks using the framework-specific integration guide.

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 with Suspense for data fetching in React?

Set up Apollo Client data fetching with Suspense by installing the Apollo Client package and building queries using suspense-ready hooks, following the framework-specific integration guide to enable suspense-based data loading in your React application.

Does Apollo Client support SSR streaming and data hydration in Next.js App Router?

Yes, Apollo Client supports SSR streaming and server/client data hydration in the Next.js App Router. It provides integration guides to enable unified caching and robust server-side rendering across diverse app architectures.

What is the best way to manage local state and caching with Apollo Client in React?

Manage local state and caching with Apollo Client by using its comprehensive references for caching, fragments, and local state management. These framework-agnostic patterns provide unified caching and robust error handling for your React application.

Can I use Apollo Client with React Router Framework Mode and TanStack Start?

Yes, Apollo Client integrates with both React Router Framework Mode and TanStack Start. It provides specific integration guides to enable SSR streaming, server/client data hydration, and suspense-based data loading across these frameworks.

How do I generate typed GraphQL operations for Apollo Client?

Generate typed GraphQL operations for Apollo Client by following the code-generation guidance included in the integration references. This ensures codegen-typed operations and robust error handling patterns within your React application.

Why does my Apollo Client SSR data hydration fail during streaming?

Apollo Client SSR data hydration issues during streaming often relate to incorrect framework integration. Use the framework-specific integration guides for client-side React or Next.js to ensure proper server/client data hydration and unified caching.