apollo-client

Set up Apollo Client 4.x in React apps for GraphQL data and local state.

18|Updated Jul 31, 2025
One-click install
npx skills add https://github.com/simnova/sharethrift --skill apollo-client
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: apollo-client
Source: https://github.com/simnova/sharethrift/tree/main/.agents/skills/apollo-client
Command: npx skills add https://github.com/simnova/sharethrift --skill apollo-client

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill guides setting up Apollo Client 4.x in React projects to enable efficient GraphQL data management, caching, and local state handling.

Core Features & Use Cases

  • Apollo Client setup: Bootstrap a client with InMemoryCache and HttpLink for React apps.
  • Data fetching & state management: Use GraphQL queries and mutations with React hooks, and manage local state with reactive variables.
  • Caching & performance: Configure cache policies, type policies, and data masking to optimize performance across frameworks like Next.js, Vite, and CRA.

Quick Start

  • Install dependencies: npm install @apollo/client graphql rxjs
  • Create an ApolloClient with InMemoryCache and HttpLink
  • Wrap your application with ApolloProvider and initialize a basic query

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 React application?

To set up Apollo Client in a React application, install @apollo/client, create an ApolloClient instance with InMemoryCache and HttpLink, and wrap your app with ApolloProvider to enable GraphQL data management.

How do I manage local state in React with Apollo Client?

You can manage local state in Apollo Client by using reactive variables. This approach allows you to handle local data alongside your GraphQL queries and mutations without requiring additional state management libraries.

Does Apollo Client 4.x work with Next.js and Vite?

Yes, Apollo Client 4.x works with Next.js, Vite, and Create React App. You can configure cache policies, type policies, and data masking to optimize GraphQL performance across these typical React frameworks.

What is the best way to configure caching for GraphQL queries in React?

The best way to configure GraphQL caching in React is by using Apollo Client's InMemoryCache. You define type policies and data masking rules to optimize performance and control how your application fetches and stores data.

Why do I need rxjs installed for Apollo Client?

Installing rxjs is required for Apollo Client to handle asynchronous operations and reactive data streams. You need it alongside @apollo/client and graphql to properly manage GraphQL query and mutation execution.

How do I perform GraphQL queries and mutations using React hooks?

You perform GraphQL queries and mutations using React hooks provided by Apollo Client. After wrapping your application with ApolloProvider, you can use these hooks to fetch data and execute operations directly within your components.