Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features
Autoplay

    Set Up a React GraphQL Client Application with react-apollo

    Alex BanksAlex Banks
    reactReact
    apolloApollo
    graphqlGraphQL

    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.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss