@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 help you develop faster and more secure apps with less boilerplate. It integrates seamlessly with any JavaScript front-end, allowing for reactive data fetching, caching, and data management.

What are @apollo/client's main functionalities?

Fetching data with useQuery

This feature allows you to fetch data from a GraphQL server. The useQuery hook is used to execute a GraphQL query and handle loading, error, and result states.

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

const GET_LAUNCHES = gql`
  query GetLaunches {
    launches {
      id
      mission_name
    }
  }
`;

function Launches() {
  const { loading, error, data } = useQuery(GET_LAUNCHES);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  return data.launches.map(({ id, mission_name }) => (
    <div key={id}>
      <p>{mission_name}</p>
    </div>
  ));
}

Updating data with useMutation

This feature enables you to update data on a GraphQL server. The useMutation hook is used to execute a mutation, allowing you to create, update, or delete data.

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

const ADD_TODO = gql`
  mutation AddTodo($type: String!) {
    addTodo(type: $type) {
      id
      type
    }
  }
`;

function AddTodo() {
  let input;
  const [addTodo, { data }] = useMutation(ADD_TODO);

  return (
    <div>
      <form
        onSubmit={e => {
          e.preventDefault();
          addTodo({ variables: { type: input.value } });
          input.value = '';
        }}
      >
        <input
          ref={node => {
            input = node;
          }}
        />
        <button type="submit">Add Todo</button>
      </form>
    </div>
  );
}

Managing local state

This feature allows you to manage local state using Apollo Client. You can read and write to the cache as if it were a local database, enabling you to manage client-side state alongside remote data.

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

const GET_LOCAL_STATE = gql`
  query GetLocalState {
    isLoggedIn @client
  }
`;

function LoginButton() {
  const client = useApolloClient();
  const data = client.readQuery({ query: GET_LOCAL_STATE });
  const isLoggedIn = data.isLoggedIn;

  return (
    <button onClick={() => {
      client.writeQuery({
        query: GET_LOCAL_STATE,
        data: { isLoggedIn: !isLoggedIn }
      });
    }}>
      {isLoggedIn ? 'Log out' : 'Log in'}
    </button>
  );
}

Other packages similar to @apollo/client

relay

Relay is a JavaScript framework for building data-driven React applications with GraphQL. It is similar to @apollo/client in that it provides a powerful and efficient way to fetch and manage GraphQL data. Relay focuses on performance optimizations and static query generation, which can make it more suitable for complex, large-scale applications with high performance requirements.

urql

urql is a highly customizable and versatile GraphQL client for React, Vue, Svelte, and other JavaScript frameworks. It offers a simpler and more flexible approach compared to @apollo/client, with features like document caching and subscriptions. urql's extensibility and plugin system make it a good choice for developers looking for a lightweight and adaptable GraphQL client.

README

Apollo Client

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.

Documentation

All Apollo Client documentation, including React integration articles and helpful recipes, can be found at:
https://www.apollographql.com/docs/react/

The Apollo Client API reference can be found at:
https://www.apollographql.com/docs/react/api/apollo-client/

Maintainers

• @benjamn (Apollo)
• @hwillson (Apollo)

Changelog

Apollo Client 3.0.0

Improvements

⚠️ Note: As of 3.0.0, Apollo Client uses a new package name: @apollo/client

ApolloClient

• [BREAKING] ApolloClient is now only available as a named export. The default ApolloClient export has been removed. <br/> @hwillson in #5425

• [BREAKING] The queryManager property of ApolloClient instances is now marked as private, paving the way for a more aggressive redesign of its API.

• [BREAKING] Apollo Client will no longer deliver "stale" results to ObservableQuery consumers, but will instead log more helpful errors about which cache fields were missing. <br/> @benjamn in #6058

• [BREAKING] ApolloError's thrown by Apollo Client no longer prefix error messages with GraphQL error: or Network error:. To differentiate between GraphQL/network errors, refer to ApolloError's public graphQLErrors and networkError properties. <br/> @lorensr in #3892

• [BREAKING] Support for the @live directive has been removed, but might be restored in the future if a more thorough implementation is proposed. <br/> @benjamn in #6221

• [BREAKING] Apollo Client 2.x allowed @client fields to be passed into the link chain if resolvers were not set in the constructor. This allowed @client fields to be passed into Links like apollo-link-state. Apollo Client 3 enforces that @client fields are local only, meaning they are no longer passed into the link chain, under any circumstances. <br/> @hwillson in #5982

• [BREAKING?] Refactor QueryManager to make better use of observables and enforce fetchPolicy more reliably. <br/> @benjamn in #6221

• The updateQuery function previously required by fetchMore has been deprecated with a warning, and will be removed in the next major version of Apollo Client. Please consider using a merge function to handle incoming data instead of relying on updateQuery. <br/> @benjamn in #6464

  • Helper functions for generating common pagination-related field policies may be imported from @apollo/client/utilities. The most basic helper is concatPagination, which emulates the concatenation behavior of typical updateQuery functions. A more sophisticated helper is offsetLimitPagination, which implements offset/limit-based pagination. If you are consuming paginated data from a Relay-friendly API, use relayStylePagination. Feel free to use these helper functions as inspiration for your own field policies, and/or modify them to suit your needs. <br/> @benjamn in #6465

• Updated to work with graphql@15. <br/> @durchanek in #6194 and #6279 <br/> @hagmic in #6328

• Apollo Link core and HTTP related functionality has been merged into @apollo/client. Functionality that was previously available through the apollo-link, apollo-link-http-common and apollo-link-http packages is now directly available from @apollo/client (e.g. import { HttpLink } from '@apollo/client'). The ApolloClient constructor has also been updated to accept new uri, headers and credentials options. If uri is specified, Apollo Client will take care of creating the necessary HttpLink behind the scenes. <br/> @hwillson in #5412

• The gql template tag should now be imported from the @apollo/client package, rather than the graphql-tag package. Although the graphql-tag package still works for now, future versions of @apollo/client may change the implementation details of gql without a major version bump. <br/> @hwillson in #5451

• @apollo/client/core can be used to import the Apollo Client core, which includes everything the main @apollo/client package does, except for all React related functionality. <br/> @kamilkisiela in #5541

• Several deprecated methods have been fully removed:

  • ApolloClient#initQueryManager
  • QueryManager#startQuery
  • ObservableQuery#currentResult

• Apollo Client now supports setting a new ApolloLink (or link chain) after new ApolloClient() has been called, using the ApolloClient#setLink method. <br/> @hwillson in #6193

• The final time a mutation update function is called, it can no longer accidentally read optimistic data from other concurrent mutations, which ensures the use of optimistic updates has no lasting impact on the state of the cache after mutations have finished. <br/> @benjamn in #6551

• Apollo links that were previously maintained in https://github.com/apollographql/apollo-link have been merged into the Apollo Client project. They should be accessed using the new entry points listed in the migration guide. <br/> @hwillson in #

InMemoryCache

⚠️ Note: InMemoryCache has been significantly redesigned and rewritten in Apollo Client 3.0. Please consult the migration guide and read the new documentation to understand everything that has been improved.

• The InMemoryCache constructor should now be imported directly from @apollo/client, rather than from a separate package. The apollo-cache-inmemory package is no longer supported.

  The @apollo/client/cache entry point can be used to import InMemoryCache without importing other parts of the Apollo Client codebase. <br/> > @hwillson in #5577

• [BREAKING] FragmentMatcher, HeuristicFragmentMatcher, and IntrospectionFragmentMatcher have all been removed. We now recommend using InMemoryCache’s possibleTypes option instead. For more information see the Defining possibleTypes manually section of the docs. <br/> @benjamn in #5073

• [BREAKING] As promised in the Apollo Client 2.6 blog post, all cache results are now frozen/immutable. <br/> @benjamn in #5153

• [BREAKING] Eliminate "generated" cache IDs to avoid normalizing objects with no meaningful ID, significantly reducing cache memory usage. This might be a backwards-incompatible change if your code depends on the precise internal representation of normalized data in the cache. <br/> @benjamn in #5146

• [BREAKING] InMemoryCache will no longer merge the fields of written objects unless the objects are known to have the same identity, and the values of fields with the same name will not be recursively merged unless a custom merge function is defined by a field policy for that field, within a type policy associated with the __typename of the parent object. <br/> @benjamn in #5603

• [BREAKING] InMemoryCache now throws when data with missing or undefined query fields is written into the cache, rather than just warning in development. <br/> @benjamn in #6055

• [BREAKING] client|cache.writeData have been fully removed. writeData usage is one of the easiest ways to turn faulty assumptions about how the cache represents data internally, into cache inconsistency and corruption. client|cache.writeQuery, client|cache.writeFragment, and/or cache.modify can be used to update the cache. <br/> @benjamn in #5923

• InMemoryCache now supports tracing garbage collection and eviction. Note that the signature of the evict method has been simplified in a potentially backwards-incompatible way. <br/> @benjamn in #5310

  • [beta-BREAKING] Please note that the cache.evict method now requires Cache.EvictOptions, though it previously supported positional arguments as well. <br/> @danReynolds in #6141 @benjamn in #6364

  • Removing an entity object using the cache.evict method does not automatically remove dangling references to that entity elsewhere in the cache, but dangling references will be automatically filtered from lists whenever those lists are read from the cache. You can define a custom field read function to customize this behavior. See #6412, #6425, and #6454 for further explanation.

• Cache methods that would normally trigger a broadcast, like cache.evict, cache.writeQuery, and cache.writeFragment, can now be called with a named options object, which supports a broadcast: boolean property that can be used to silence the broadcast, for situations where you want to update the cache multiple times without triggering a broadcast each time. <br/> @benjamn in #6288

• InMemoryCache now console.warns in development whenever non-normalized data is dangerously overwritten, with helpful links to documentation about normalization and custom merge functions. <br/> @benjamn in #6372

• The result caching system (introduced in #3394) now tracks dependencies at the field level, rather than at the level of whole entity objects, allowing the cache to return identical (===) results much more often than before. <br/> @benjamn in #5617

• InMemoryCache now has a method called modify which can be used to update the value of a specific field within a specific entity object:

  cache.modify({
    id: cache.identify(post),
    fields: {
      comments(comments: Reference[], { readField }) {
        return comments.filter(
          (comment) => idToRemove !== readField("id", comment)
        );
      },
    },
  });
  

  This API gracefully handles cases where multiple field values are associated with a single field name, and also removes the need for updating the cache by reading a query or fragment, modifying the result, and writing the modified result back into the cache. Behind the scenes, the cache.evict method is now implemented in terms of cache.modify. <br/> @benjamn in #5909 and #6178

• InMemoryCache provides a new API for storing client state that can be updated from anywhere:

  import { makeVar } from "@apollo/client";
  const v = makeVar(123);
  console.log(v()); // 123
  console.log(v(v() + 1)); // 124
  console.log(v()); // 124
  v("asdf"); // TS type error
  

  These variables are reactive in the sense that updating their values invalidates any previously cached query results that depended on the old values. <br/> @benjamn in #5799, #5976, and #6512

• Various cache read and write performance optimizations, cutting read and write times by more than 50% in larger benchmarks. <br/> @benjamn in #5948

• The cache.readQuery and cache.writeQuery methods now accept an options.id string, which eliminates most use cases for cache.readFragment and cache.writeFragment, and skips the implicit conversion of fragment documents to query documents performed by cache.{read,write}Fragment. <br/> @benjamn in #5930

• Support cache.identify(entity) for easily computing entity ID strings. <br/> @benjamn in #5642

• Support eviction of specific entity fields using cache.evict(id, fieldName). <br/> @benjamn in #5643

• Make InMemoryCache#evict remove data from all EntityStore layers. <br/> @benjamn in #5773

• Stop paying attention to previousResult in InMemoryCache. <br/> @benjamn in #5644

• Improve optimistic update performance by limiting cache key diversity. <br/> @benjamn in #5648

• Custom field read functions can read from neighboring fields using the readField(fieldName) helper, and may also read fields from other entities by calling readField(fieldName, objectOrReference). <br/> @benjamn in #5651

• Expose cache modify and identify to the mutate update function. <br/> @hwillson in #5956

• Add a default gc implementation to ApolloCache. <br/> @justinwaite in #5974

React

• [BREAKING] The QueryOptions, MutationOptions, and SubscriptionOptions React Apollo interfaces have been renamed to QueryDataOptions, MutationDataOptions, and SubscriptionDataOptions (to avoid conflicting with similarly named and exported Apollo Client interfaces).

• [BREAKING] Results with loading: true will no longer redeliver previous data, though they may provide partial data from the cache, when available. <br/> @benjamn in #6566

• [BREAKING?] Remove fixPolyfills.ts, except when bundling for React Native. If you have trouble with Map or Set operations due to frozen key objects in React Native, either update React Native to version 0.59.0 (or 0.61.x, if possible) or investigate why fixPolyfills.native.js is not included in your bundle. <br/> @benjamn in #5962

• The contents of the @apollo/react-hooks package have been merged into @apollo/client, enabling the following all-in-one import:

  import { ApolloClient, ApolloProvider, useQuery } from "@apollo/client";
  

  @hwillson in #5357

• React SSR features (previously accessed via @apollo/react-ssr) can now be accessed from the separate Apollo Client entry point of @apollo/client/react/ssr. These features are not included in the default @apollo/client bundle. <br/> @hwillson in #6499

General

• [BREAKING] Removed graphql-anywhere since it's no longer used by Apollo Client. <br/> @hwillson in #5159

• [BREAKING] Removed apollo-boost since Apollo Client 3.0 provides a boost like getting started experience out of the box. <br/> @hwillson in #5217

• [BREAKING] We are no longer exporting certain (intended to be) internal utilities. If you are depending on some of the lesser known exports from apollo-cache, apollo-cache-inmemory, or apollo-utilities, they may no longer be available from @apollo/client. <br/> @hwillson in #5437 and #5514

  Utilities that were previously externally available through the apollo-utilities package are now only available by importing from @apollo/client/utilities. <br/> > @hwillson in #5683

• Make sure all graphql-tag public exports are re-exported. <br/> @hwillson in #5861

• Fully removed prettier. The Apollo Client team has decided to no longer automatically enforce code formatting across the codebase. In most cases existing code styles should be followed as much as possible, but this is not a hard and fast rule. <br/> @hwillson in #5227

• Make sure ApolloContext plays nicely with IE11 when storing the shared context. <br/> @ms in #5840

• Migrated React Apollo HOC and Components functionality into Apollo Client, making it accessible from @apollo/client/react/components and @apollo/client/react/hoc entry points. <br/> @hwillson in #6558

• Support passing a context object through the link execution chain when using subscriptions. <br/> @sgtpepper43 in #4925

• MockSubscriptionLink now supports multiple subscriptions. <br/> @dfrankland in #6081

Bug Fixes

• useMutation adjustments to help avoid an infinite loop / too many renders issue, caused by unintentionally modifying the useState based mutation result directly. <br/> @hwillson in #5770

• Missing __typename fields no longer cause the InMemoryCache#diff result to be marked complete: false, if those fields were added by InMemoryCache#transformDocument (which calls addTypenameToDocument). <br/> @benjamn in #5787

• Fixed an issue that allowed @client @export based queries to lead to extra unnecessary network requests being fired. <br/> @hwillson in #5946

• Refined useLazyQuery types to help prevent runtime errors. <br/> @benmosher in #5935

• Make sure @client @export variables used in watched queries are updated each time the query receives new data that changes the value of the @export variable. <br/> @hwillson in #5986

• Ensure useMutation passes a defined errorPolicy option into its underlying ApolloClient.mutate() call. <br/> @jamesreggio in #5863

• useQuery: Prevent new data re-render attempts during an existing render. This helps avoid React 16.13.0's "Cannot update a component from inside the function body of a different component" warning (https://github.com/facebook/react/pull/17099). <br/> @hwillson in #6107

• Expand ApolloError typings to include ServerError and ServerParseError. <br/> @dmarkow in #6319

• Fast responses received over the link chain will no longer conflict with skip settings. <br/> @hwillson in #6587