apollo-client

What is apollo-client?

The apollo-client npm package is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. It is designed to work seamlessly with modern React applications, providing tools for querying, caching, and updating application state.

What are apollo-client's main functionalities?

Querying Data

This feature allows you to query data from a GraphQL endpoint. The code sample demonstrates how to set up an Apollo Client instance, define a GraphQL query, and execute it to fetch data.

const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

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

client.query({
  query: gql`
    query GetBooks {
      books {
        title
        author
      }
    }
  `
}).then(result => console.log(result));

Mutating Data

This feature allows you to perform mutations to modify data on the server. The code sample shows how to set up a mutation to add a new book to the database and execute it with the required variables.

const { ApolloClient, InMemoryCache, gql } = require('@apollo/client');

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

client.mutate({
  mutation: gql`
    mutation AddBook($title: String!, $author: String!) {
      addBook(title: $title, author: $author) {
        id
        title
        author
      }
    }
  `,
  variables: {
    title: 'New Book',
    author: 'Author Name'
  }
}).then(result => console.log(result));

Caching

Apollo Client provides powerful caching capabilities to optimize data fetching and reduce network requests. The code sample demonstrates how to configure the cache with type policies to manage data normalization and caching behavior.

const { ApolloClient, InMemoryCache } = require('@apollo/client');

const client = new ApolloClient({
  uri: 'https://example.com/graphql',
  cache: new InMemoryCache({
    typePolicies: {
      Book: {
        keyFields: ['id']
      }
    }
  })
});

Other packages similar to apollo-client

relay-runtime

Relay is a JavaScript framework for building data-driven React applications. It is similar to Apollo Client in that it also uses GraphQL for data fetching and state management. Relay is known for its strong emphasis on performance and its unique approach to data fetching with static queries and compile-time optimizations.

urql

urql is a highly customizable and lightweight GraphQL client for React. It offers a simpler API compared to Apollo Client and focuses on flexibility and ease of use. urql provides core features like querying, mutations, and caching, but allows developers to extend its functionality with additional packages.

graphql-request

graphql-request is a minimalistic GraphQL client for Node.js and browsers. It is much simpler than Apollo Client and does not include advanced features like caching or state management. It is ideal for use cases where you need a lightweight solution for making GraphQL requests without the overhead of a full-fledged client.

README

Apollo client

The Apollo Client can easily be dropped into any JavaScript frontend where you want to use data from a GraphQL server.

Installing

npm install apollo-client

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. Move on to the next article to see how to import and initialize the client.

Read the docs.

---

Contributing

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.

Useful tools

Should be moved into some kind of CONTRIBUTING.md soon...

• AST explorer: you can use this to see what the GraphQL query AST looks like for different queries

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