This video is available to students only

Build an Apollo Client With apollo-boost and GraphQL

To use the React Apollo client library, we'll install and set up the Apollo client of our application with which we'll be doing in this lesson.

Creating our Apollo Client#

📝 This lesson's quiz can be found - here.
🗒️ Solutions for this lesson's quiz can be found - here.

React Apollo v3 introduces a new modular structure where individual packages can be installed to use React Apollo which helps reduce bundle size when compared with installing the entire react-apollo package.

In the current and upcoming videos, we install and use the entire react-apollo umbrella library. In the documentation for this lesson, upcoming lessons, and for part 2 of the course - we'll install and use the Hooks variation of react-apollo - @apollo/react-hooks.

We aim to create our Apollo client, install React Apollo, and use React Apollo's Hooks to mutate and query data.

To create and use an Apollo client in React, Apollo expects us to install a few separate libraries. There are two separate approaches with setting up our Apollo Client - the simple approach and the more advanced approach.

The more advanced approach requires us to install certain specific libraries, such as the apollo-client library that provides access to the ApolloClient function constructor responsible in initializing the Apollo Client, a library to help with implementing caching, another library to help construct how we want to perform data fetching, and so on. Though we're able to do this, Apollo encourages us to go through the more simple approach unless we need more unique customization.

The simple approach to setting up an Apollo client is using the Apollo Boost package which comes with pre-built configuration for caching, state management, and error handling. To get started, we'll install three libraries:

  • apollo-boost: The configuration package that contains everything we need to set up an Apollo Client.

  • @apollo/react-hooks: The Hooks specific library of React Apollo to be used in React to help interact with our GraphQL API.

  • graphql: The GraphQL JavaScript library which will be needed to help parse our GraphQL queries.

React Apollo v3 introduces a new modular structure where individual packages can be installed to use React Apollo. Since in our case, we're only interested in using the new Hooks variation of React Apollo, we recommend installing @apollo/react-hooks. You can read more about the different modular packages that React Apollo provides in React Apollo's documentation.

apollo-boost and React Apollo are TypeScript libraries themselves so we won't have to install additional type declaration files for them. For graphql however, we'll need to install the accompanying types definitions.

 

Start a new discussion. All notification go to the author.