Build an Apollo Client With apollo-boost and GraphQL

[00:00 - 00:13] Our aim is to install React Apollo, create our Apollo client, and use React Apollo's hooks to mutate and query data. To create and use the Apollo client in React, Apollo expects us to install a few separate libraries.

[00:14 - 00:39] There's also two separate approaches with setting up our Apollo client, the simple method and the more advanced way. The more advanced method requires us to install certain specific libraries, such as Apollo client that provides access to the Apollo client function constructor, another library to help with implementing caching, another library to help construct how we want to perform data fetching, and so on.

[00:40 - 00:57] Though we're able to do this, Apollo encourages us to go through the simple means unless we need more unique customization. This simple means is known as using the Apollo Boost package, which comes with prebuilt configuration for caching, state management, and error handling.

[00:58 - 01:18] To get started, we'll install three separate libraries, Apollo Boosts, React Apollo, and GraphQL. The Apollo Boost package is the configuration package that contains everything we need to set up an Apollo client.

[01:19 - 01:38] Apollo is the view layer to be used in React to help interact with our GraphQL API, and GraphQL is needed to help parse our GraphQL documents. Apollo Boost and React Apollo are TypeScript libraries, so we won't have to install additional type declaration files for them.

[01:39 - 01:55] For the GraphQL library, however, we'll need to install a types definition file . Since the Create React app project keeps the types definitions files in the dependencies of the app, so we'll also install this particular file as a main dependency.

[01:56 - 02:10] We'll create our Apollo client in the root source index file to then connect our client with the entire React application. In our source index file, we'll import Apollo clients from the Apollo Boost library.

[02:11 - 02:30] We can now go ahead and create our client. We're going to create a new Apollo client with the Apollo client constructor and assign it to a client constant variable.

[02:31 - 02:51] The Apollo client constructor takes a configuration object where we can specify or apply some changes to the already prebuilt configuration Apollo Boost provides. Currently, the only thing we need to specify is a URI field, which is a reference to the GraphQL API we want to interact with.

[02:52 - 03:05] We'll specify the URI field and give a value of the target location of our API. http localhost 9000/api.

[03:06 - 03:26] If you recall, we've already set up a proxy in our React application to proxy URLs like low close 9000/api to simply /api. That's literally all it takes to create an Apollo client with Apollo Boost.

[03:27 - 03:43] Now we need to complete the second piece of being able to connect our Apollo client with our React application. This is where we'll need to import an Apollo provider library from React Apollo .

[03:44 - 03:58] Apollo provider can wrap our React app and can help make our Apollo client available as context everywhere in our app. In our instance, we'll wrap the only component we have, listings with Apollo provider.

[03:59 - 04:13] We'll then pass the created client to the client prop Apollo provider expects. To have the client available everywhere in an app is important to create the Apollo provider as high as possible in an app.

[04:14 - 04:25] Our application is now prepared to start using React Apollo to make our GraphQL requests. [ silence ]