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 ofreact-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.
npm install apollo-boost @apollo/react-hooks graphql
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.
npm install @types/graphql --save
This page is a preview of TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL