This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Fetch Data from GraphQL with React Apollo Query Component

    Andrew Del PreteAndrew Del Prete

    In this lesson I refactor a React component that utilizes the graphql higher-order component to the new Query render prop component baked into react-apollo.

    Additional Resources: What's next for React Apollo

    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 For this demo, I'm using React Apollo along with GraphQL to retrieve some Pokemon data. First off, I have a presentational component named Pokemon that simply displays a name and an image.

    00:10 Below, I'm using the GraphQL higher order component that comes with React Apollo to query the data from the GraphQL endpoint, show a loader or errors, and finally, pass the retrieved data along to the Pokemon component.

    00:24 Something to notice here is how my Pokemon component doesn't know anything about its context. This component's job is to simply display the data in whatever way necessary. I'm using the higher order component to pass meaningful data along to it from the GraphQL. But it could really be data from any source as long as we pass the name and image props.

    00:42 I'm going to refactor this example to use the new query component baked into React Apollo. The query component is a render prop. It's so hot right now, let's get started.

    00:50 First, to import the query component, it comes from React Apollo. We'll do it right here. We can remove the GraphQL part of this, because we're not going to be using the higher order component anymore. We'll keep the Pokemon component as is because it's awesome.

    01:03 Next, let's go ahead and comment out the higher order component implementation and use the query component instead. Since query is a render prop component, it takes a function as children. I'll write it like so. Now to add back the same inner logic that I had before.

    01:23 Next, I need to pass a couple of props to the query component. The first is called query which is the get Pokemon const I used before. The second prop I'll pass is called variables. This is for us to pass the name of the Pokemon to the GraphQL endpoint.

    01:41 Hey, it's working again. As you can see, the query component makes it a breeze to get started with this stuff. I highly recommend checking it out...

    Discuss

    Discuss