Repository files navigation

Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL. To get the most value out ofapollo-client, you should use it with one of its view layer integrations.

To get started with the React integration, go to ourReact Apollo documentation website.

Apollo Client also has view layer integrations forall the popular frontend frameworks. For the best experience, make sure to use the view integration layer for your frontend framework of choice.

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, so 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, because Apollo is driven by the community and serves a variety of use cases. Everything is planned and developed in the open.

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

# installing the preset packagenpm install apollo-boost graphql-tag graphql --save# installing each piece independentlynpm install apollo-client apollo-cache-inmemory apollo-link-http graphql-tag graphql --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+.

Install theApollo Client Developer tools for Chrome for a great GraphQL developer experience!

You get started by constructing an instance of the core classApolloClient. If you loadApolloClient from theapollo-boost package, it will be configured with a few reasonable defaults such as our standard in-memory cache and a link to a GraphQL API at/graphql.

importApolloClientfrom'apollo-boost';constclient=newApolloClient();

To pointApolloClient at a different URL, add your GraphQL API's URL to theuri config property:

importApolloClientfrom'apollo-boost';constclient=newApolloClient({uri:'https://graphql.example.com'});

Most of the time you'll hook up your client to a frontend integration. But if you'd like to directly execute a query with your client, you may now call theclient.query method like this:

importgqlfrom'graphql-tag';client.query({query:gql`    query TodoApp {      todos {        id        text        completed      }    }  `,}).then(data=>console.log(data)).catch(error=>console.error(error));

Now your client will be primed with some data in its cache. You can continue to make queries, or you can get yourclient instance to perform all sorts of advanced tasks on your GraphQL data. Such asreactively watching queries withwatchQuery,changing data on your server withmutate, orreading a fragment from your local cache withreadFragment.

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

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

Read the Apollo Contributor Guidelines.

Running tests locally:

npm installnpm 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 inVisual Studio Code, an open source IDE which is available for free on all platforms.

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 inthe 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