Display Query Results using the Query Component

Alex Banks
InstructorAlex Banks
Share this video with your friends

Social Share Links

Send Tweet
Published 6 years ago
Updated 4 years ago

The Query component is used to render the state of the network request along with the data that is returned from the GraphQL API. In this lesson, we will refactor our application to include an App component that displays the resulting count returned by the totalDays field.

Instructor: [00:00] The entry point of our React Apollo Client application is where we define our instance of the Apollo Client. It is also where we can provide that instance to the rest of our UI using the ApolloProvider component. This allows us to build and compose React components separately under the ApolloProvider.

[00:17] Let's take a look at the app component. The app component contains our query where we ask the GraphQL service for the data that we want to display. It also contains the UI that's necessary for displaying the results of that query. At present, we are only telling users about the loading status of their query.

[00:35] Let's modify this component by importing a fragment component from React. Now let's make our app component return a fragment that contains a title, Ski Days, and the results of the query component.

[00:47] The query component also gives us access to the data that's returned by the query within the render properties. Once this query has loaded, we can use the data to display the total day-count to the user.

[01:00] Within the browser, we can see our title, ski days, as well as the count of the total days that we are receiving from the GraphQL API.

egghead
egghead
~ an hour 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