Apollo client

The apollo-client package is the core of the Apollo frontend toolchain. By itself the apollo-client package is not as useful for building rich reactive UIs as apollo-client with a custom view integration library for your framework of choice.

To get started with React go to our React Apollo documentation website.

If you don’t use React, do not worry! The Apollo Client has view layer integrations for all the popular frontend frameworks.

Apollo Client can be used in any JavaScript frontend where you want to use data from a GraphQL server. It's:

1. Incrementally adoptable, so that you can drop it into an existing JavaScript app and start using GraphQL for just part of your UI.
2. Universally compatible, so that Apollo works with any build setup, any GraphQL server, and any GraphQL schema.
3. Simple to get started with, you can start loading data right away and learn about advanced features later.
4. Inspectable and understandable, so that you can have great developer tools to understand exactly what is happening in your app.
5. Built for interactive apps, so your users can make changes and see them reflected in the UI immediately.
6. Small and flexible, so you don't get stuff you don't need. The core is under 25kb compressed.
7. Community driven, Apollo is driven by the community and serves a variety of use cases. Everything is planned and developed in the open.

Get started on the home page, which has great examples for a variety of frameworks.

Installation

npm install apollo-client --save

To use this client in a web browser or mobile app, you'll need a build system capable of loading NPM packages on the client. Some common choices include Browserify, Webpack, and Meteor 1.3.

NEW: Install the Apollo Client Developer tools for Chrome for a great GraphQL developer experience!

Usage

If you know you want to use the core apollo-client package you can get started by constructing an instance of the core class ApolloClient like so:

import ApolloClient from 'apollo-client';

const client = new ApolloClient();

This will create a new client that you can use for all of your GraphQL data fetching needs, but most of the time you will also want to create your own custom network interface. By default Apollo Client guesses that your GraphQL API lives at /graphql, but this is not always the case. To use your own network interface you may call the createNetworkInterface function:

import ApolloClient, { createNetworkInterface } from 'apollo-client';

const client = new ApolloClient({
  networkInterface: createNetworkInterface({
    uri: 'https://graphql.example.com',
  }),
});

Replace https://graphql.example.com with your GraphQL APIs URL and you’re off to the moon!

From there you may use your client instance to perform all sorts of tasks on your data like [reactively watching queries with watchQuery][], changing data on your server with mutate, or reading a fragment from your local cache with readFragment.

To learn more about all of the features available to you through the apollo-client package be sure to read through the [apollo-client API reference][].

Learn how to use Apollo Client with your favorite framework

• React
• Angular 2
• Vue
• Ember
• Polymer
• Meteor
• Blaze
• Vanilla JS
• Next.js

---

Contributing

Read the Apollo Contributor Guidelines.

Running tests locally:

# nvm use node
npm install
npm test

This project uses TypeScript for static typing and TSLint for linting. You can get both of these built into your editor with no configuration by opening this project in Visual Studio Code, an open source IDE which is available for free on all platforms.

Important discussions

If you're getting booted up as a contributor, here are some discussions you should take a look at:

1. Static typing and why we went with TypeScript also covered in the Medium post
2. Idea for pagination handling
3. Discussion about interaction with Redux and domain vs. client state
4. Long conversation about different client options, before this repo existed