Introduction to the Newline guide to building your first GraphQL server with Node and TypeScript.

Welcome, Getting Started

Quick walkthrough of the development environment and tools used in the course.

A Node, TypeScript, and GraphQL Developer Environment

Introduction

This is an introduction to the work we'll be doing in Module 1.0.

Module 1 Introduction

Node is a JavaScript runtime environment that was first introduced in 2009 by Ryan Dahl, as a response to how slow web servers were at the time. In this lesson, we'll introduce Node and talk about the capability Node provides to make I/O tasks asynchronous and non-blocking.

What is Node.js? A Beginner's Guide.

In this lesson, we'll use Node to run a simple JavaScript file on the server.

How to Run a JavaScript File with Node.js

Web servers provide functionality for requests that can be made from client applications. Node has a built-in HTTP module to allow for building a server that facilitates the transfer of data in HTTP. With this lesson, we'll look to use the popular Express framework as the replacement of the core HTTP module to create a minimal Node server, with Express routing.

How to Create a Minimal Express Node.js Server

Nodemon is an open-source utility tool that helps automatically restart a Node server whenever a change in code is detected in development. In this lesson, we'll install Nodemon and introduce an application script that will start the Node server with Nodemon.

How to Automatically Reload a Node.js Server with Nodemon

JavaScript is considered a weakly typed language. In this lesson, we'll go through a simple example of why that can be an issue in development and where TypeScript falls in the picture.

What is TypeScript? A Beginner's Guide

We'll get started with TypeScript in this lesson by installing a few necessary packages in our server and setting up the configuration of our TypeScript compiler.

How to Set up a Node.js Server with TypeScript

TypeScript is a development tool geared towards making building JavaScript applications more robust. In an application's deployed state (browser or server), TypeScript must be compiled to valid JavaScript. In this lesson, we'll see how the TypeScript compiler provides us with a command to compile and produce JavaScript code from TypeScript.

How to Compile a TypeScript Node.js Project

Though VSCode includes TypeScript language support which helps us pick up TypeScript errors in our TypeScript code, we'll introduce more robust code checking with ESLint - a popular open-source JavaScript/TypeScript linting tool.

How to use ESLint to Check TypeScript Code for Issues

To help us get started, we'll begin by introducing a mock data array of rental listings in this lesson. This will help us get started before we begin to address more appropriate data persistence.

Build Example Mock Data to Test a GraphQL Server

In this lesson, we'll use the routing capabilities Express gives us to create GET and POST routes that interact with the mock data array we've established.

How to Build an Express API with GET and POST Routes

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

Module 1 Summary

Getting Started With Our Node Server

Module 2 Introduction

GraphQL is a query language for APIs. In this lesson, we go through an initial discussion on GraphQL and how GraphQL differs from traditional REST APIs.

A GraphQL Tutorial for Beginners

Before we continue discussing some of the core concepts in GraphQL, we'll take a bit of a tangent in this lesson to contrast and compare Github's existing REST API (v3) and their GraphQL API (v4).

GraphQL vs REST APIs, and When to Use GraphQL

In this lesson, we introduce and discuss some of GraphQL's main concepts such as the GraphQL schema, object types and resolver functions.

GraphQL Schema, Object Types, and Function Examples

Comparing REST & GraphQL APIs

Module 3 Introduction

In this lesson, we'll install the Express variation of the popular Apollo Server library and the GraphQL JavaScript library.

How to Install Apollo Server for GraphQL

In this lesson, we'll use the Apollo Server and GraphQL JavaScript libraries to create a minimal GraphQL API that we'll be able to interact within an IDE known as GraphQL Playground.

How to Build a GraphQL Schema with GraphQL.js

In this lesson, we'll look to mimic the listings retrieval and manipulation we had in our Express RESTful API but with GraphQL instead.

How to Use GraphQL Mutations and Queries

The GraphQL schema language is a human-readable syntax to help create GraphQL schemas. In this lesson, we'll use the GraphQL schema language to re-create the schema we have in a more readable and simpler format.

A Beginner's Guide to GraphQL Schema Language

This lesson is a summary of the final state of the work done in Module 3.0.

Module 3 Summary

Using Apollo Server To Create The GraphQL API

Enroll in TinyHouse to continue the course!

Continue the course with TinyHouse

Conclusion

Enter your name and email address below, then click the **"Enroll"** button to get started

In this course, we'll be creating a [Node](https://nodejs.org/en/) server from scratch with the help of the [Express](https://expressjs.com/) framework. We'll then introduce the benefits of strongly-typed code and integrate [TypeScript](https://www.typescriptlang.org) into our Node server application.

We will compare GitHub's old RESTful API against its new GraphQL API. We will explore the problems GraphQL aims to solve. And finally, we will create our own GraphQL API using [Apollo](https://www.apollographql.com/)!

In this course, we'll show you how to create your first GraphQL server with Node.js and TypeScript

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

How to create a Node server using Express

How to integrate TypeScript to a Node server

---
title: How to Build an Express API with GET and POST Routes
description: In this lesson, we'll use the routing capabilities Express gives us to create GET and POST routes that interact with the mock data array we've established.
privateVideoUrl: https://fullstack.wistia.com/medias/ci33l3v4tn
code: https://gitlab.com/fullstackio/books/newline-course-apps/hassan-djirdeh-and-jing-chen-building-your-first-graphql-server-with-node-and-typescript-app/-/tree/main/code/module_1/lesson_1.10/App/source_code/server?ref_type=heads
---

# Creating GET and POST Express routes

I> 📝 This lesson's quiz can be found - [here](http://localhost:3001/assets/protected/courses/the-newline-guide-to-building-your-first-graphql-server-with-node-and-typescript/module_1/lesson_1.10/protected/multiple-choice-questions.pdf).<br/>
I> 🗒️ Solutions for this lesson's quiz can be found - [here](http://localhost:3001/assets/protected/courses/the-newline-guide-to-building-your-first-graphql-server-with-node-and-typescript/module_1/lesson_1.10/protected/multiple-choice-answers.pdf).<br/>
I> 📃 Grab a cheatsheet that summarizes creating a simple GET and POST route with Express - [here](http://localhost:3001/assets/protected/courses/the-newline-guide-to-building-your-first-graphql-server-with-node-and-typescript/module_1/lesson_1.10/protected/express-cheatsheet.pdf).

With our mock `listings` array defined, we'll attempt to have our Express server give us the capability to GET and POST changes to this mock data array.

Like we've seen for the index route (`/`) in the `src/index.ts` file, Express gives us the capability to creates [_routes_ which refer to how different endpoints respond to client requests](https://expressjs.com/en/guide/routing.html). We're going to create two new separate routes:

-   A `/listings` route with which we can retrieve the listings collection.
-   A `/delete-listing` route with which we can delete a specified listing.

### Get listings

To GET the listings information in an Express route, we can do just like what we've done when we sent the `'hello world'` message for the index route. We'll first import the `listings` array in our `src/index.ts` file.

```typescript { actualFilename=./protected/source_code/server/src/index.ts endLine=3 startLine=3 statedFilename=server/src/index.ts url=https&#x3A;//gitlab.com/fullstackio/newline/newline-author-application/module_1/lesson_1.10/protected/source_code/server/src/index.ts#L3 }
import { listings } from "./listings";
```

Then use the [`app.get()`](http://expressjs.com/en/5x/api.html#app.get.method) method to create a new `/listings` route that is to simply return the `listings` array.

```typescript { actualFilename=./protected/source_code/server/src/index.ts endLine=17 startLine=15 statedFilename=server/src/index.ts url=https&#x3A;//gitlab.com/fullstackio/newline/newline-author-application/module_1/lesson_1.10/protected/source_code/server/src/index.ts#L15 }
app.get("/listings", (_req, res) => {
  res.send(listings);
});
```

With the server being run, if we head to the browser and navigate to the `/listings` route, we'll be presented with our mock listings data array.

![](https://d2uusema5elisf.cloudfront.net/courses/the-newline-guide-to-building-your-first-graphql-server-with-node-and-typescript/module_1/lesson_1.10/public/assets/get_listings.png)

I> We're using the [JSON Viewer Chrome Extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) to humanize this data and make it more readable.

### Delete a listing

We'll now create functionality to help delete a listing from our mock data.

In a standard REST API, the GET method is often used to request data. Though many other methods exist, we'll use the POST method to specify a route that can have data be sent to the server to conduct an action. In this case, we'll look to have the `id` of a listing be passed in which will be used to delete that particular listing. For our server to access the data in our POST request, we'll install a middleware to help parse the request body. We'll use the popular [`bodyParser`](https://github.com/expressjs/body-parser) library which can be installed alongside its type declaration file.

Hassan Djirdeh

Jing Chen

we're going to attempt to have our express server

give us the capability to get and post changes

So let's head back to the index.ts file in our source folder.

express gives us the capability to create routes

We're going to create two new separate routes,

a listings route, which allows us to retrieve

the entire listings collection and a delete listing routes,

with which we can delete a specified listing.

To get the listings information in express routes,

we can do just like we've done when we sent the hello world

message for the index route, or in this case,

how you sent just a message that says 1 plus 2 equals 3.

But first, what we're going to do is we're actually

going to import the listings array to actually make

Now, we'll use the get function in our app server instance

to denote that we're creating a get request

In our callback function, we'll declare the request parameter

specify the underscore symbol in our request parameter

In our callback function, we'll be simple,

and we'll simply return the response.send function

and just pass in the listings array as is.

We won't be making any changes to the array.

In our terminal, we'll now run our server.

we'll head to the browser and now navigate

We're now presented with our mock listings data array.

Now, we are using the JSON viewer Chrome extension

that humanizes this data, makes it more readable,

But regardless, you should now be able to see the listings data

allows us to delete a listing from our mock data array.

a route that can have data be sent to the server

In this case, we'll look to have the idea of a listing

will be used to delete that particular listing.

In order for our server to access the data in our post

request, we'll look to install a middleware

We're going to use the popular body parser utility library.

So we'll exit the server in our terminal,

and first install the body parser package as a dependency.

We'll then install its type declaration file

In our index.ts file, we'll now import body parser

we'll use the app.use function that express provides.

This use function can be used in the app server instance.

will help parse incoming requests as JSON

and expose the resulting objects on request dot body.

We'll specify the callback function like we've done before,

and attempt to access both the request parameter

Now we expect the ID of the item or listing to be deleted

is to be sent as part of the request body.

Now request is actually inferred to be of the interface type

As a result, the ID doesn't have a particular type here as well.

So what we'll do is we'll simply try to define

or explicitly define the ID variable we're creating

When it comes to actually finding the listing we want to delete,

But we keep a simple and we'll use a very simple for loop.

Here we're saying iterate through the listings array.

And at any moment in time, if that iterated listing item ID

is equal to the ID from our request body,

And what we intend to do is we intend to do two things.

But we also want to send the deleted listing.