Display Query Results using the Query Component
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.