Listings GraphQL Fields
In the homepage of our application, we hope to display a small list of the most premium listings available. In this module, we begin building the server and client implementation that will help allow us to retrieve and display listings information for the homepage of our application. We'll begin by brainstorming the GraphQL fields we'll need to query a list of listings from our API.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo 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.
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 single-time purchase. Already have access to this course? Log in here.
Get unlimited access to TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL - Part Two with a single-time purchase.
[00:00 - 00:12] We're going to want to build a home page for our app that provides information about what our app does. In addition, one section we hope to display is a small list of the most premium listings available.
[00:13 - 00:30] Premium is a term we're using here to refer to the most expensive listings in our app. Now, when we build the page that is to display listings for a certain city, we 're going to provide the option to sort the listings shown from highest price to lowest price and vice versa.
[00:31 - 00:45] So, that particular page would also have the capability to sort listings based on its price. However, in the home page, we simply want to show the four most expensive listings available in our app from any city.
[00:46 - 01:03] For both the listings page and the home page, we'll need to have the client be able to query for listings. We have a field right now that allows us to query for a single listing based on the listing ID, but we'll need an additional field to query for a list of listings.
[01:04 - 01:16] And we'll just need a single listings field from the root query object that can help us achieve this. Now, the unique capability of this field is that eventually it accepts a series of arguments.
[01:17 - 01:34] Since it'll become a paginated field, we'll make it accept both a page and limit arguments to help facilitate offset based pagination. It'll also accept a filter argument that will set up eventually that allow us to tell the query to return listings in a certain format or a certain filter.
[01:35 - 01:51] So, for example, we can say query all the listings from the highest price to the lowest price or vice versa. And eventually, at a certain point in the course, we'll add an optional location argument that will allow us to query for listings for a certain location.
[01:52 - 02:02] We're going to handle some of this server implementation in the next lesson. But for now, we'll simply create the resolver for this listing field and we'll have it return some dummy data.
[02:03 - 02:22] So in our GraphQL schema, in the root query object definition, we'll state that a listings field is to exist and it is to return when resolved as string and will be none null. Next, we can create the resolver for this listings field.
[02:23 - 02:44] Since this listings field is within the domain of a listing, we'll create this resolver in the listing resolver's map we already have. And we'll simply have this resolver for now return a string that says query dot listings.
[02:45 - 03:20] With our server running, if we head to the GraphQL playground and attempt to query for the listings field, we'll see the expected string query dot listings be returned. Thank you for watching.