Beginner friendly guide to nodejs express-server with mongodb,graphql and typescript

In this guide i’ll walk you through how to set up node s server frote point of view of a beginner who’s being tinkering around for the last 6 months and help you avoid the common issues i ran into in the process

I;ll assume you know the basic in javascript,typescript and graphql

But i’ll try and organise the github commits from the most basic

the typescript setup might be little cumbersome so i’d advise to clone the repo first before beginning this tutorial

Navigate to the initial commit and download or clone repo if you have git installed

Repo

You’ll also need to install and setup mongodb on your device or use mongo atlas , am not a fan of mongodb compass because of its lack of dark mode so i use the vscode extension MySQL database viewer:

https://marketplace.visualstudio.com/items?itemName=cweijan.vsc

Install and connect to sql and nosql databases

You might also vscode extensions for

Graphql and typescript

Run “npm install” in it’s root directory

Then npm run watch or yarn watch to watch for ts changes

Open another terminal to run npm start or yarn start

typescript

1import  express  from "express";
2import cors from 'cors'
3import { ApolloServer } from 'apollo-server-express';
4import { gql } from 'apollo-server-express';
5
6const PORT=4000;
7
8const typeDefs = 
9gql`
10    type Query {
11      defaultPost:String
12     }
13`;
14const resolvers = {
15  Query: {
16    defaultPost: () => "eat your vegetables",
17  },
18};
19
20const startServer=async()=>
21{
22const app = express();
23
24
25const allowedOrigins = [
26'http://localhost:3000',
27'http://localhost:3001',
28'https://studio.apollographql.com'
29];
30const corsOptions = {
31credentials: true,
32  origin: function(origin, callback){
33   if(!origin) return callback(null, true);
34    if(allowedOrigins.indexOf(origin) === -1){
35      var msg = 'The CORS policy for this site does not ' +
36                'allow access from the specified Origin.';
37      return callback(new Error(msg), false);
38    }
39    return callback(null, true);
40  }
41}
42app.use(cors(corsOptions))
43//rest routes
44app.get("/", (req, res) => {
45res.json({
46    data: "API is working...",
47  });
48});
49
50const server = new ApolloServer({
51  typeDefs,
52  resolvers,
53});
54await server.start();
55
56server.applyMiddleware({ app });
57
58app.listen(PORT, () => {
59  console.log(` Server is running at http://localhost:${PORT}`);
60});
61}
62startServer().catch(e=>console.log("error strting server======== ",e))
63
64

our server is now ready navigate to http://localhost:4000/graphql

to preview our server in apollo's playground and run our first query

on the right hand side we have all the operatons which you can navigate to by clicking the the pluss button and adding field then run it and the response is displayed in the left hand side.

now we'll add mongodb into the project:

typescript

1var uri = "mongodb://localhost:27017/testmongo";
2
3//@ts-ignore
4mongoose.connect(uri, { useUnifiedTopology: true, useNewUrlParser: true })
5.then(()=>console.log("connected to newmango db"))
6
7

this will auto-create a newmango collection for us now we'll create a new directory models/TestModel.ts

then add this code to create a new mongo db model

typescript

1import mongoose from "mongoose";
2const Schema = mongoose.Schema;
3
4const TestSchema = new Schema({
5  title: {
6    type: String,
7    required: true
8  },
9  desc: {
10    type: String,
11    required: true
12  },
13
14},
15//add this for auto createdAt and updatedat fields
16{timestamps:true}
17);
18
19export const TestModel= mongoose.model("Test", TestSchema);

then we'll also create resolver/TestResolver.ts and typeDefs/typeDef.ts

typescript

1import { TestModel } from "./../model/TestModel";
2export const resolvers = {
3  Query: {
4    defaultPost: () => "eat your vegetables",
5    getItems: async () => {
6      const chats = await TestModel.find({});
7      console.log("holt output ======", chats);
8      return chats;
9    },
10  },
11  Mutation: {
12    //shape of params (parent,args, context, info)
13    addItem: async (parent, { title, desc }, context, info) => {
14   let item={}
15   let error={}     
16   try{
17      const newItem = await new TestModel({
18        title,
19        desc,
20      });
21   item=await newItem.save()
22    console.log("item  ==== ",item)
23
24    }catch(e){
25    console.log("addTest error response =====", e.message);
26    error=e
27           }
28 
29         return {
30            item:item,
31            error:{
32           //@ts-ignore
33            message:error.message
34            }
35          };
36    
37 
38
39 },
40  },
41};
42

typescript

1import { gql } from 'apollo-server-express';
2
3export const typeDefs = 
4gql`type Item{
5    title:String,
6    desc:String
7   }
8   type Error{
9   message:String
10   }
11   type ItemResponse{
12    item:Item
13    error:Error
14   }
15    type Query {
16      defaultPost:String,
17      getItems:[Item]
18     },
19
20     type Mutation{
21      addItem(title:String,desc:String):ItemResponse
22     }
23
24
25`;
26

add the respective code and import it in the index.ts

typescript

1import  express  from "express";
2import cors from 'cors'
3import { ApolloServer } from 'apollo-server-express';
4import mongoose  from 'mongoose';
5import { resolvers } from './resolvers/TestResolver';
6import { typeDefs } from './typeDefs/typedefs';
7
8const PORT=4000;
9
10const startServer=async()=>
11{
12const app = express();
13
14
15const allowedOrigins = [
16'http://localhost:3000',
17'http://localhost:3001',
18'https://studio.apollographql.com'
19];
20const corsOptions = {
21credentials: true,
22  origin: function(origin, callback){
23   if(!origin) return callback(null, true);
24    if(allowedOrigins.indexOf(origin) === -1){
25      var msg = 'The CORS policy for this site does not ' +
26                'allow access from the specified Origin.';
27      return callback(new Error(msg), false);
28    }
29    return callback(null, true);
30  }
31}
32app.use(cors(corsOptions))
33var uri = "mongodb://localhost:27017/testmongo";
34
35//@ts-ignore
36mongoose.connect(uri, { useUnifiedTopology: true, useNewUrlParser: true })
37.then(()=>console.log("connected to newmango db"))
38
39//rest routes
40app.get("/", (req, res) => {
41res.json({
42    data: "API is working...",
43  });
44});
45
46
47const server = new ApolloServer({
48  typeDefs,
49  resolvers,
50});
51await server.start();
52
53server.applyMiddleware({ app });
54
55app.listen(PORT, () => {
56  console.log(` Server is running at http://localhost:${PORT}`);
57});
58}
59startServer().catch(e=>console.log("error strting server======== ",e))
60

add the respective code and import it in the index.ts

The typedefs define what the data should look like and all it’s types

For example we have a custom type Item which is an object with the fields title of type Strung and desc of type String too

We also have to define the queries,mutations and subscriptions

These definitions are used to shape the data we’ll pass to and receive from our resolvers

Our resolver is comprised of a simple getItems query which returns an array of items from our mongo db

The addItem mutation takes title and desc and saves it to mongo then is returns an item response

[the docs page]:(https://www.apollographql.com/docs/)
has more information for more complex mutations and queries

but if you've noticeed my code is still full of //@ts-ignore decorators because we are not using typescript it to it's fullest next time we'll set up type-graphql and typegoose for better type-checking which makes development much easier

we'll also handle delete and update in mongodb feel free to explore more till then

Beginner friendly guide to nodejs express-server with mongodb,graphql and typescript

Understanding Discriminated Unions in TypeScript

Cookies auto clearing after browser refresh issue , CORS related express cookies issue

Building Android Widgets in Expo with Custom Native Modules

Beginner friendly guide to nodejs express-server with mongodb,graphql and typescript

Understanding Discriminated Unions in TypeScript

Cookies auto clearing after browser refresh issue , CORS related express cookies issue

Building Android Widgets in Expo with Custom Native Modules

More posts

Understanding Discriminated Unions in TypeScript

Cookies auto clearing after browser refresh issue , CORS related express cookies issue

Building Android Widgets in Expo with Custom Native Modules

More posts

Understanding Discriminated Unions in TypeScript

Cookies auto clearing after browser refresh issue , CORS related express cookies issue

Building Android Widgets in Expo with Custom Native Modules