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](https://dev-blog.apollodata.com/whats-next-for-react-apollo-4d41ba12c2cb)


https://app.egghead.io/api/v1/lessons/react-fetch-data-from-graphql-with-react-apollo-query-component/subtitles

Fetch Data from GraphQL with React Apollo Query Component

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...

Fetch Data from GraphQL with React Apollo Query Component

Share this video with your friends