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

    Display Query Results using the Query Component

    Alex BanksAlex Banks
    reactReact
    apolloApollo
    graphqlGraphQL

    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.

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

    Discuss

    Discuss