Fetch Data from GraphQL with React Apollo Query Component

Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 3 years ago

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

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

egghead
egghead
~ 10 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today