Apollo Client
技能 已验证 活跃Guide for building React applications with Apollo Client 4.x. Use this skill when: (1) setting up Apollo Client in a React project, (2) writing GraphQL queries or mutations with hooks, (3) configuring caching or cache policies, (4) managing local state with reactive variables, (5) troubleshooting Apollo Client errors or performance issues.
To guide developers in building robust React applications efficiently using Apollo Client 4.x for GraphQL data management.
功能
- Setting up Apollo Client in React projects
- Writing GraphQL queries and mutations with hooks
- Configuring caching and cache policies
- Managing local state with reactive variables
- Troubleshooting Apollo Client errors and performance
使用场景
- When setting up Apollo Client in a new or existing React application.
- When writing or optimizing GraphQL queries and mutations.
- When configuring advanced caching strategies or local state.
- When debugging Apollo Client related issues.
非目标
- Using Apollo Client versions other than 4.x.
- Setting up Apollo Server or other backend GraphQL technologies.
- General React or JavaScript best practices outside of Apollo Client integration.
工作流
- Review skill documentation for Apollo Client 4.x.
- Identify specific use case (setup, query, mutation, caching, state, troubleshooting).
- Consult reference files for detailed integration guides and patterns.
- Implement recommended patterns and best practices in React application.
- Troubleshoot issues using provided guidance and Apollo DevTools.
实践
- GraphQL Query Best Practices
- GraphQL Mutation Best Practices
- GraphQL Caching Best Practices
- GraphQL Performance Optimization
- React State Management
先决条件
- React 18+ or React 19 (Suspense/RSC)
- Node.js environment (for installation and development)
- Existing Apollo Client 4.x setup or willingness to integrate
安装
请先添加 Marketplace
/plugin marketplace add apollographql/skills/plugin install skills@apollo-marketplace质量评分
已验证类似扩展
Setup Tailwind Typescript
100Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
React State Management
99Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query. Use when setting up global state, managing server state, or choosing between state management solutions.
TanStack Query Skill
99TanStack Query (React Query) for asynchronous server-state management with automatic caching, background refetching, optimistic updates, and pagination in React applications.
API Design Patterns
100Comprehensive API design patterns covering REST, GraphQL, gRPC, versioning, authentication, and modern API best practices
Apollo Router
100Version-aware guide for configuring and running Apollo Router for federated GraphQL supergraphs. Generates correct YAML for both Router v1.x and v2.x. Use this skill when: (1) setting up Apollo Router to run a supergraph, (2) configuring routing, headers, or CORS, (3) implementing custom plugins (Rhai scripts or coprocessors), (4) configuring telemetry (tracing, metrics, logging), (5) troubleshooting Router performance or connectivity issues.