Create a Graphql server with Nodejs, Typescript and Graphql

According to their docs graphql.org, GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

Before you start with this blog post I'll recommend you know at least a good chunk on of typescript, graphql and nodejs, so lets dive in and get going :).

Firstly we would have to setup our project with node and typescript, run npm init -y to setup a package.json file.

We are going to need some packages for this project, simply install them by running the following command.
yarn add express express-graphql graphql
or
npm install express express-graphql graphql

After installing the main packages, we would also need some dev dependencies which would only be useful during development.
yarn add @types/express @types/express-graphql @types/graphql @types/node typescript nodemon -D

If you noticed, we installed the types for all our main packages as dev dependencies, typescript requires this to validate the types when working with the main packages or else it throws errors, keep this in mind.

After installing all the packages we would need to create the server, we would need some kind of configuration to tell typescript what's going on in our project and how to deal with it, luckily we can get this configuration through a simple npx command,
npx tsconfig.json
Then choose the framework you are working with, in our case it is node

? Pick the framework you're using (Use arrow keys)
> react
  react-native
  node

And zoom, you get a tsconfig.json file in the root of your project.

Go into the tsconfig.json file and check for your outDir and set it to "./build" and rootDir to "./".

"outDir: "./build",
"rootDir: "./",

Note: the outDir tells typescript where to save your compiled typescript code to, and the rootDir tells typescript where to find your typescript code to be compiled.

Looks like the configuration is becoming overwhelming, I promise you this is the last configuration haha!.

Now go to your package.json file and locate the "scripts" section and add the following scripts.

"scripts": {
  "start": "nodemon build/server.js",
  "build": "tsc -w server.ts"
}

The build command checks for changes in our typescript file and bundles the javascript code.
The start command checks for changes in our javascript code and runs the bundled javascript code.

Now lets get into the code hurrayyy!!!

Create a file named server.ts in the root of your project and import the your dependencies, initialize express and setup your localhost.

import express, { Request, Response } from "express";

//express initialization
const app = express();

//PORT
const PORT = 4000;

app.get("/", (req: Request, res: Response) => {
    res.send("Hello World!");
});

//localhost setup
app.listen(4000, () => {
  console.log("Graphql server now up at port 4000")
});

Open your terminal in your and run yarn build then yarn start or npm build then npm start, open your browser and navigate to http://localhost:4000, you should see the world Hello World! printed out.

Now lets get into the graphql part

We would add the express-graphql dependecy and some more code which would help us setup graphql playground in our browser.

The graphql playround is where we test our graphql queries, mutations and all other stuffs pertaining to graphql on the frontend, which i would talk about im my next post.

import express, { Request, Response } from "express";
import { graphqlHttp } from "express-graphql";

//express initialization
const app = express();

//PORT
const PORT = 4000;

app.get("/", (req: Request, res: Response) => {
    res.send("Hello World!");
});

//graphql playground setup code
app.use(
  "/graphql",
  graphqlHTTP({
    graphiql: true
  })
);

//localhost setup
app.listen(4000, () => {
  console.log("Graphql server now up at port 4000")
});

The graphiql set to true is what enables our graphql playround in the browser, if set to false it automatically disables the playground.

Now in your browser, go to http://localhost:4000/graphql

You should see something like this.

Hurray, you have created your first Graphql server!!! :).

We would be talking about queries in my next post, see you there ;)

Comments

[Brian Quinn]

graphQL in itself is not a difficult topic. Doing the express-graphql for TypeScript using type-graphql so far is not working out very well. The problem seems to be with decorators. The last time I used graphQL easily got it to work but without TypeScript. I have removed the decorators like @Query and @Mutation. Hopefully I won't need it. Sometimes less is more.