Summary of Module 4

This lesson is a summary of the work done in Module 4.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.

This lesson preview is part of the TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL course and can be unlocked immediately with 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 with a single-time purchase.

Thumbnail for the \newline course TinyHouse: A Fullstack React Masterclass with TypeScript and GraphQL
  • [00:00 - 00:25] In this module, we've established a connection between our node server and a Mongo database with which we've created and set up in a database as a service known as Mongo Atlas. Our database credentials is declared in a .n file to decouple environment specific configuration and application code, as well as to avoid committing our database configuration as part of our source code.

    [00:26 - 00:47] We've created a simple seed script that will help populate our database with three mock listings whenever the application seed script is run. In the source database index file, we've created a connect database function that makes the connection between our server and the Mongo cluster in Mongo Atlas.

    [00:48 - 01:00] We've used the official node Mongo driver to make our connection. Our connect database function returns an object of the collections we want our node server to interact with.

    [01:01 - 01:22] As of this moment, we only have the single listings collection with which is named as test listings in our cluster. We've introduced TypeScript generics and with the capability of abstracting type information with the node Mongo driver, we've been able to define the type of data that can be returned from the listings collection.

    [01:23 - 01:46] Our listings and delete listings GraphQL resolvers interact with the Mongo database to either retrieve the list of listings in the collection or delete a listing completely from the collection. We've modularized our resolvers with the help of the load-ash merge method, which helps us break our resolvers map functions to specific modules.

    [01:47 - 02:11] As of this moment, we've spent our entire time building the GraphQL API from a node server. Moving forward, we'll be focusing on the client portion of our app by introducing React, creating a React TypeScript project with Create React app, and building a simple UI that will allow a user to query the listings from our API and delete a listing of their choice.