Introduction to Apollo Boost

Introduction to Apollo Boost

In this article, we will talk about the Apollo Boost. It is a zero-config method and easiest to start using Apollo Client. Its maintenance is viable demonstrating some project activity. The npm package apollo-boost gets a total of 286,731 weekly downloads.

Apollo-boost attractiveness was categorized as an effective project. The npm package apollo-boost was perused for known liabilities and missing licenses. There were no such issues originate. Therefore, the package was thought as safe to use.

Description

Apollo Boost is an inordinate way to get started with Apollo Client rapidly. However, there are some radical features it doesn’t care out of the box. Swap out the Apollo cache, or enhance a current Apollo Link to the network stack if we’d like to use subscriptions. That isn’t now included, we will have to set Apollo Client up manually.

Apollo Boost comprises some packages that we think are important to emerging with Apollo Client. The below are what’s in the box:

  • apollo-client: Here all the magic occurs
  • apollo-cache-in-memory: This is recommended cache
  • apollo-link-http: This is for remote data fetching
  • apollo-link-error: This is for error control
  • graphql-tag: It exports the gql function for queries & mutations

The overwhelming thing about Apollo Boost is that we don’t have to set any of this up ourselves. Only state a few options if we’d like to use these features and we’ll be careful of the rest.

Installation

  • Initially, install apollo-boost and don’t have graphql & react-apollo in the project then similarly connected them.
npm i apollo-boost graphql react-apollo –S
  • Then, create the client.
  • Once the client is created, hook it up to the app by passing it to the ApolloProvider transferred from react-apollo.
import React from 'react';

import { render } from 'react-dom';

import ApolloClient from 'apollo-boost';

import { ApolloProvider } from 'react-apollo';

// Pass your GraphQL endpoint to uri

const client = new ApolloClient({ uri: 'https://nx9zvp49q7.lp.gql.zone/graphql' });

const ApolloApp = AppComponent => (

  <ApolloProvider client={client}>

    <AppComponent />

  </ApolloProvider>

);

render(ApolloApp(App), document.getElementById('root'));

 

The ApolloClient is at the present connected to the app. Now, create the <App /> component and create the first query:

 

import React from 'react';

import { gql } from 'apollo-boost';

import { Query } from 'react-apollo';

const GET_MOVIES = gql`

  query {

    movie(id: 1) {

      id

      title

    }

  }

const App = () => (

  <Query query={GET_MOVIES}>

    {({ loading, error, data }) => {

      if (loading) return <div>Loading...</div>;

      if (error) return <div>Error :(</div>;

      return (

        <Movie title={data.movie.title} />

      )

    }}

  </Query>

)

 

Basic migration

Migration should be comparatively simple if we’re not using any configuration options on Apollo Boost. Everything we will have to change is the file where we initialize ApolloClient.

Earlier

The client initialization looks like with Apollo Boost as:

import ApolloClient from "apollo-boost";

const client = new ApolloClient({

  uri: "https://w5xlvm3vzz.lp.gql.zone/graphql"

});

Later

First, we need to install some packages to make a basic client with the same defaults as Apollo Boost.

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

We’ll require to manually attach the cache and link to the client to complete the process.

import { ApolloClient } from 'apollo-client';

import { InMemoryCache } from 'apollo-cache-inmemory';

import { HttpLink } from 'apollo-link-http';

import { onError } from 'apollo-link-error';

import { ApolloLink } from 'apollo-link';

const client = new ApolloClient({

  link: ApolloLink.from([

    onError(({ graphQLErrors, networkError }) => {

      if (graphQLErrors)

        graphQLErrors.forEach(({ message, locations, path }) =>

          console.log(

            `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,

          ),

        );

      if (networkError) console.log(`[Network error]: ${networkError}`);

    }),

    new HttpLink({

      uri: 'https://w5xlvm3vzz.lp.gql.zone/graphql',

      credentials: 'same-origin'

    })

  ]),

  cache: new InMemoryCache()

});