Apollo Boost migration

Learn how to set up Apollo Client manually without Apollo Boost


Apollo Boost is a great way to get started with Apollo Client quickly, but there are some advanced features it doesn't support out of the box. If you'd like to use subscriptions, swap out the Apollo cache, or add an existing Apollo Link to your network stack that isn't already included, you will have to set Apollo Client up manually.

We're working on an eject feature for Apollo Boost that will make migration easier in the future, but for now, let's walk through how to migrate off of Apollo Boost.

Basic migration

If you're not using any configuration options on Apollo Boost, migration should be relatively simple. All you will have to change is the file where you initialize ApolloClient.

Before

Here's what client initialization looks like with Apollo Boost:

JavaScript
1import ApolloClient from "apollo-boost";
2
3const client = new ApolloClient({
4  uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"
5});

After

To create a basic client with the same defaults as Apollo Boost, first you need to install some packages:

Bash
1npm install apollo-client apollo-cache-inmemory apollo-link-http apollo-link-error apollo-link graphql-tag --save

To complete the process, you'll need to manually attach your cache and link to the client:

JavaScript
1import { ApolloClient } from 'apollo-client';
2import { InMemoryCache } from 'apollo-cache-inmemory';
3import { HttpLink } from 'apollo-link-http';
4import { onError } from 'apollo-link-error';
5import { ApolloLink } from 'apollo-link';
6
7const client = new ApolloClient({
8  link: ApolloLink.from([
9    onError(({ graphQLErrors, networkError }) => {
10      if (graphQLErrors)
11        graphQLErrors.forEach(({ message, locations, path }) =>
12          console.log(
13            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
14          ),
15        );
16      if (networkError) console.log(`[Network error]: ${networkError}`);
17    }),
18    new HttpLink({
19      uri: 'https://w5xlvm3vzz.lp.gql.zone/graphql',
20      credentials: 'same-origin'
21    })
22  ]),
23  cache: new InMemoryCache()
24});

The InMemoryCache is our recommended cache implementation for Apollo Client. The HttpLink is an Apollo Link that sends HTTP requests. Your network stack can be made up of one or more links, which you can chain together to create a customizable network stack. Learn more in our network layer guide or the Apollo Link docs.

Advanced migration

If you are using configuration options on Apollo Boost, your migration path will vary depending on which ones you use. The next example will show an Apollo Boost client configured with every possible option.

Before

Here's what client initialization looks like with Apollo Boost:

JavaScript
1import ApolloClient from 'apollo-boost';
2
3const client = new ApolloClient({
4  uri: 'https://w5xlvm3vzz.lp.gql.zone/graphql',
5  fetchOptions: {
6    credentials: 'include'
7  },
8  request: async (operation) => {
9    const token = await AsyncStorage.getItem('token');
10    operation.setContext({
11      headers: {
12        authorization: token
13      }
14    });
15  },
16  onError: ({ graphQLErrors, networkError }) => {
17    if (graphQLErrors) {
18      sendToLoggingService(graphQLErrors);
19    }
20    if (networkError) {
21      logoutUser();
22    }
23  },
24  clientState: {
25    defaults: {
26      isConnected: true
27    },
28    resolvers: {
29      Mutation: {
30        updateNetworkStatus: (_, { isConnected }, { cache }) => {
31          cache.writeData({ data: { isConnected }});
32          return null;
33        }
34      }
35    }
36  },
37  cacheRedirects: {
38    Query: {
39      movie: (_, { id }, { getCacheKey }) =>
40        getCacheKey({ __typename: 'Movie', id });
41    }
42  }
43});

After

To create a client with the same defaults as Apollo Boost, first you need to install some packages:

Bash
1npm install apollo-client apollo-cache-inmemory apollo-link-http apollo-link apollo-link-error graphql-tag --save

Here's how we would create our new client using the configuration options above from Apollo Boost:

JavaScript
1import { ApolloClient } from 'apollo-client';
2import { InMemoryCache } from 'apollo-cache-inmemory';
3import { HttpLink } from 'apollo-link-http';
4import { onError } from 'apollo-link-error';
5import { ApolloLink, Observable } from 'apollo-link';
6
7const cache = new InMemoryCache({
8  cacheRedirects: {
9    Query: {
10      movie: (_, { id }, { getCacheKey }) =>
11        getCacheKey({ __typename: 'Movie', id });
12    }
13  }
14});
15
16const request = async (operation) => {
17  const token = await AsyncStorage.getItem('token');
18  operation.setContext({
19    headers: {
20      authorization: token
21    }
22  });
23};
24
25const requestLink = new ApolloLink((operation, forward) =>
26  new Observable(observer => {
27    let handle;
28    Promise.resolve(operation)
29      .then(oper => request(oper))
30      .then(() => {
31        handle = forward(operation).subscribe({
32          next: observer.next.bind(observer),
33          error: observer.error.bind(observer),
34          complete: observer.complete.bind(observer),
35        });
36      })
37      .catch(observer.error.bind(observer));
38
39    return () => {
40      if (handle) handle.unsubscribe();
41    };
42  })
43);
44
45const client = new ApolloClient({
46  link: ApolloLink.from([
47    onError(({ graphQLErrors, networkError }) => {
48      if (graphQLErrors) {
49        sendToLoggingService(graphQLErrors);
50      }
51      if (networkError) {
52        logoutUser();
53      }
54    }),
55    requestLink,
56    new HttpLink({
57      uri: 'https://w5xlvm3vzz.lp.gql.zone/graphql',
58      credentials: 'include'
59    })
60  ]),
61  cache,
62  resolvers: {
63    Mutation: {
64      updateNetworkStatus: (_, { isConnected }, { cache }) => {
65        cache.writeData({ data: { isConnected }});
66        return null;
67      }
68    }
69  },
70});
71
72cache.writeData({
73  data: {
74    isConnected: true
75  }
76});
Feedback

Edit on GitHub

Forums