Apollo Client

Common errors

Warnings

Install

Imports

• ApolloClient
  wrong

  import ApolloClient from 'apollo-client'

  correct

  import { ApolloClient } from '@apollo/client'

  In v2, import from 'apollo-client'. In v3+ (since 2020), use '@apollo/client'. Default import in v2; named import in v3+.

• gql
  wrong

  import gql from 'graphql-tag'

  correct

  import { gql } from '@apollo/client'

  gql is re-exported from @apollo/client in v3+. The graphql-tag package is still valid but the re-export is recommended for consistency.

• useQuery
  wrong

  import { useQuery } from 'react-apollo'

  correct

  import { useQuery } from '@apollo/client'

  In v3+, react hooks are part of @apollo/client. In v2, use 'react-apollo' (deprecated).

• InMemoryCache
  wrong

  import InMemoryCache from 'apollo-cache-inmemory'

  correct

  import { InMemoryCache } from '@apollo/client'

  In v2, separate package apollo-cache-inmemory. In v3+, integrated into @apollo/client.

• HttpLink
  wrong

  import HttpLink from 'apollo-link-http'

  correct

  import { HttpLink } from '@apollo/client'

  In v2, separate package apollo-link-http. In v3+, integrated into @apollo/client.

Quickstart

Creates an Apollo Client instance with a GraphQL endpoint and in-memory cache, then executes a query.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';

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

client.query({
  query: gql`
    query GetData {
      users {
        id
        name
      }
    }
  `
}).then(result => console.log(result.data));