Requesting a Single Set of GraphQL Fields
In this module, we begin building the server and client implementation that will help allow us to retrieve and display information for listings in our application. We'll begin by brainstorming the GraphQL fields we'll need to query listing data.
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, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:13] In the last module, we managed to build the server GraphQL fields and client representation of a user. In this module, we'll look to build the server and client portions of getting information for a single listing.
[00:14 - 00:31] In order to display information about our listings in our client app, we'll need some kind of functionality to query and resolve listing data in our server. Just like how we have only a single root level field to query for a user, we'll have a single root query field to query for a certain listing.
[00:32 - 00:43] Pretty straightforward as well. The one thing we'll keep in mind is with this field is that we should only return the sensitive listing data if the user is requesting his or her own listing.
[00:44 - 00:55] For example, the sensitive data we're referring to is the bookings made for the listing. When we build the client page, we'll want a user that queries for their own listing to see the bookings that have been made.
[00:56 - 01:04] So we'll implement this authorization in the next lesson or so. For now, let's prepare the GraphQL field and its resolver function.
[01:05 - 01:13] We'll first define the field in the root query object in the type definitions file. We'll label the field as listing.
[01:14 - 01:23] And just for this lesson, we'll say its expected return type is a string and it should be defined. Next, we'll construct the resolver for the listing field.
[01:24 - 01:37] When we built the user module, we had to define the interface of a listing since listings can be queried within a user. As a result, we also had to define the explicit resolver function for the ID field for the listing object.
[01:38 - 01:50] So we've created the listing resolver's map to contain the resolvers for the listing module. Right now, we'll just need to create the resolver for the root level listing field from the query root object.
[01:51 - 02:09] It will just say it's to return a string that is to say query.listing. If we head over to localhost 9000/api and our server is running, if we were to query for the listing field, we'll see the expected query.listing output.
[02:10 - 02:18] Great. In the next lesson, we'll build a functionality for the listing resolver to actually query for listing information from the database.