HostListing GraphQL Fields
For users in our application to add listings (i.e. host listings) in the TinyHouse application, we'll need to create the functionality where users can upload and insert new listing data into our database. In this lesson, we'll establish the GraphQL fields in our API that will help achieve this.
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:20] In order for users in our application to add listings to the app, or in other words, to host listings, we'll need to create the functionality where users can upload and insert data for a new listing into our database. And we'll only allow for this functionality for users who have logged into our application and have connected with Stripe.
[00:21 - 00:44] We'll need them connected with Stripe since when a user becomes a host, when other users book the listings from the host, we'll use the host's Stripe ID for them to receive payments on our connected Stripe platform. We'll discuss more about this in the next coming modules, but for now, let's talk about the GraphQL fields we'll need to have for users to create listings.
[00:45 - 01:01] All we'll need in this context is the one root level mutation that we'll call host listing. The host listing mutation will receive an input that contains various different information about a new listing, such as the listing address, title, image, etc .
[01:02 - 01:10] And we'll simply add this new listing as a document to the listing's collection we have in our database. Fairly straightforward.
[01:11 - 01:32] However, the only more complicated things we'll look to consider is how we'll receive address information for the new location and where we use Google's geocoding API to geocode the address information and how we'll look to handle image uploads from the client to the server. We'll take this step by step.
[01:33 - 01:55] For this lesson, let's simply establish the GraphQL field in our type definitions and we'll place the resolver function within a resolver's map before we begin to build it out. So in our GraphQL type definitions, we'll simply introduce a new mutation called host listing that at this moment, we just return a string when resolved.
[01:56 - 02:21] We already have a listing resolver's map dedicated to containing the resolver functions that pertain to the domain of a listing. So in this listing resolver's map, we'll introduce a mutation object that is to contain a host listing resolver function and we'll have this function at this moment return a string that says mutation.
[02:22 - 02:41] host listing. With our server running, when we head over to GraphQL Playground and we attempt to run the host listing mutation, we'll get the string message we've just set up. Great. In the next lesson, we'll look to implement the functionality that this resolver function should have.