Module 8 Summary

This lesson is a summary of the work we've done in Module 8.0.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Table of Contents

This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two

In this module, we created the functionality for the client to be able to query for a list of listings from the root level. If we take a look at our GraphQL type definitions, we'll notice that in our root level query object now exists a listings field that when resolved returns a GraphQL object known as listings. And this GraphQL listings object was used before for the listings field of the user document or the user object and essentially returns two fields of its own. The total amount of listings that exists as well as the actual result list of all the listing documents that have been queried. And this listings field in the root level query object takes three arguments. It takes a limits and page arguments which we've seen before, helps in conducting pagination and limits the number of listings to be shown for a certain page. It also takes another argument called filter. And this filter argument filters the results returned based on the argument value provided. If we take a look at the listing resolvers map, in the root query object now exists a listings resolver function. And this resolver function essentially returns the listings when the listings field has been queried. Once again, this looks very similar to all the paginated fields we have. However, there's one context that looks a little different here and that's how we filter the results based on the filter argument provided. And we at this very moment in our application only have two filters, which is the capability to filter the list of listings from a low price to a high price, as well as the capability to filter the list of listings from a high price to a low price. And to do so, we use the sort function that exists in the actual cursor object from Mongo and by simply providing a value of either one or negative one on the field we want sorted, we're able to either sort the listings in ascending order from low to high price or in descending order from a high to low price. And when we move over to the client project, the only location at this moment where we actually query for the listings from the listings field is the homepage, where what we've stated is we want to simply have the homepage show the four highest priced listings in our application. And we've set up our query the way we've done it before. We've set up a limit of four since you want four actual listings to only be shown at a time. And we've actually only specified a page number of one since we only want to see the first page of results. And for the filter is where we actually specify that we want to see the listings rate ranked or filtered from the highest price to the lowest price. The only other significant change we made in the client is the capability for when the user actually uses the search input in the homepage or in the app header to actually navigate the user to the listings routes where the actual value that was searched is app ended as the URL parameter. We haven't actually built out this listings page route yet, but we'll continue to do so in the next coming module.