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:
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:
1npm install apollo-client apollo-cache-inmemory apollo-link-http apollo-link-error apollo-link graphql-tag --saveTo complete the process, you'll need to manually attach your cache and link to the client:
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:
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:
1npm install apollo-client apollo-cache-inmemory apollo-link-http apollo-link apollo-link-error graphql-tag --saveHere's how we would create our new client using the configuration options above from Apollo Boost:
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});