Why Use GraphQL

GraphQL is used to build API's, It's like REST, But the reason why to use GraphQL instead of REST is because in graphql you can just give the data and what user need is upto him/her

Example

Let's just take a example of a simple REST vs GraphQL API

We have a REST endpoint that return array of posts from database, Not A Real Endpoint

https://api.programmingfire.com/posts/

Output:

[
  {
    "title": "post title 1",
    "description": "post description 1",
    "createdAt": 2021-09-13
  },
  {
    "title": "post title 2",
    "description": "post description 2",
    "createdAt": 2021-09-13
  },
  {
    "title": "post title 3",
    "description": "post description 3",
    "createdAt": 2021-09-13
  },
]

But let's just say we only want the title and description of the post but user can't do that But With GraphQL You Can Do It Let Me Show You

Input:

query {
  posts {
    title
  }
}

Output:

{
  "data": {
    "posts": {
      "data": [
        {
          "title": "post title 1"
        },
        {
          "title": "post title 2"
        },
        {
          "title": "post title 3"
        }
      ]
    }
  }
}

As You Can See We Only Get Title Of Our Posts

Setup GraphQL In Node.js With Apollo

Like any another Node.js app we need to run init command

# NPM
npm init

# YARN
yarn init

After initializing the app we will install some dependencies

Dependencies:

1. Express - the server for node.js
2. Apollo - the server for graphql
3. TypeGraphQL - for building schemas
4. TypeScript - the programming language

dependencies:

# NPM
npm install express apollo-server-express graphql apollo-server-core type-graphql

# YARN
yarn add express apollo-server-express graphql apollo-server-core type-graphql

dev dependencies:

# NPM
npm install --save-dev typescript @types/node @types/express nodemon

# YARN
yarn add -D typescript @types/node @types/express nodemon

Now let's just setup our package.json :

add a scripts section to your package.json :

"scripts": {
    "start": "node dist/index.js",
    "dev": "nodemon dist/index.js",
    "watch": "tsc -w"
}

Now let's just create a tsconfig.json because we are going to use typescript

{
  "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "lib": ["dom", "es6", "es2017", "esnext.asynciterable"],
    "skipLibCheck": true,
    "sourceMap": true,
    "outDir": "./dist",
    "moduleResolution": "node",
    "removeComments": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "baseUrl": "."
  },
  "exclude": ["node_modules"],
  "include": ["./src/**/*.ts"]
}

We are all set now we can start building the app

// src/index.ts

import express from "express";

const app = express();
const port = 3000;

app.get("/", (_, res) => {
  res.send("hello world");
});

app.listen(port);

to start the application run:

# NPM
npm run watch

# YARN
yarn watch

on the second terminal run:

# NPM
npm run dev

# YARN
yarn dev

open http://localhost:3000/ and you should see hello world

Now let's just setup GraphQL with Apollo

// src/index.ts

const apolloServer = new ApolloServer({
  schema: await buildSchema({
    resolvers: [],
    validate: false,
  }),
  context: ({ req, res }): MyContext => ({ req, res, redis }),
  plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
});

await apolloServer.start();

apolloServer.applyMiddleware({
  app,
  cors: false,
});

the complete src/index.ts should look like:

import express from "express";
import { ApolloServer } from "apollo-server-express";
import { buildSchema } from "type-graphql";
import { ApolloServerPluginLandingPageGraphQLPlayground } from "apollo-server-core";

const app = express();
const port = 3000;

const apolloServer = new ApolloServer({
  schema: await buildSchema({
    resolvers: [],
    validate: false,
  }),
  context: ({ req, res }) => ({ req, res }),
  plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
});

await apolloServer.start();

apolloServer.applyMiddleware({
  app,
});

app.listen(port, () => console.log("server has started on localhost" + port));

now in your browser if you open http://localhost:3000/graphql you should see GraphQl Playground

What is GraphQL Playground

GraphQL Playground is a Graphical Tool To run graphql queries and mutation you can consider it as Postman for graphql

Create Resolvers For GraphQL

now we are going to create a hello resolver for graphql using typegraphql

// src/resolvers/hello.ts

import { Resolver, Query } from "type-graphql";

@Resolver()
export class HelloResolver {
  @Query(() => String)
  hello(): string {
    return "hello world from graphql";
  }
}

now to use this resolver in our index.ts where we are defining our build schema like this

import { HelloResolver } from "./resolvers/hello";
const apolloServer = new ApolloServer({
  schema: await buildSchema({
    resolvers: [HelloResolver],
    validate: false,
  }),
  context: ({ req, res }) => ({ req, res }),
  plugins: [ApolloServerPluginLandingPageGraphQLPlayground],
});

now open graphql playground and type this query in

query {
  hello
}

output :

{
  "data": {
    "hello": "hello world from graphql"
  }
}