Set Up a React GraphQL Client Application with react-apollo
React Apollo is a component library that we can use to rapidly build GraphQL client applications with React. In this lesson, we get our React app ready by setting up the Apollo Provider and sending our query using the Query component.
Instructor: [00:00] I'm installing a package called React Apollo. I'm going to come back over here to my index.js file. Before we import the Apollo client, I'm going to import React from React. Also, I'm going to import Render from ReactDOM.
[00:16] I'm also going to import the Apollo provider and the query components from React Apollo. Next, I'll use the ReactDOM's render method to render a little placeholder component. I'll go ahead and start the client application, which will render the Hello, World component over in our browser here on local host 3,000.
[00:40] This Apollo provider component is going to take our Apollo client as an argument. It will provide it to any of its children via context. This allows me to add other React Apollo components anywhere within the Apollo provider, and they'll have access to the client.
[00:54] Here, I can send the query component, the count days query, and I don't have to interact directly with the client. React Apollo handles interaction with the client behind the scenes. What I'm going to do is to structure the loading property and if we're loading, I'm going to go ahead and return a loading paragraph. Otherwise, I'll return this ready paragraph.
[01:14] As you can see, when I run this we see the ready message over here in the browser. If I come over here to the browser and I take a look at my Chrome Developer tools and go to the network tab, I can actually throttle the request so we can see it loading.
[01:27] I'll go ahead and use a fast 3G network. Then when we hit refresh, what we'll see is the loading message displays for a little bit before we see the ready message. This means that our application is working. The Apollo provider is providing the client behind the scenes to the query component. The query component is sending the request.
[01:47] Right now, we're only reporting on whether or not that HTTP request has been resolved by displaying a loading message if it hasn't and a ready message if it has.