GraphQL Environment Setup

GraphQL is an open-source query language for APIs and a server-side runtime that executes queries and returns the requested data. Before starting GraphQL development, it is important to properly set up the required environment.

• GraphQL allows clients to request exactly the data they need from the server.
• Setting up the environment ensures that the server can process and respond to GraphQL queries efficiently.

Setup an Express Server

Setting up an Express server is a fundamental step in building web applications with Node.js. Express is a lightweight and flexible framework that helps developers create APIs and handle HTTP requests easily.

Follow this to create an Express server before proceeding -> Create an Express.js Application

import express from "express";

const app = express();
const PORT = process.env.PORT || 8000;

app.get("/", (req, res) => {
  res.json({ message: "server is up and running" });
});

app.listen(PORT, () => console.log("server is started"));

Setting up the GraphQL

Setting up GraphQL involves installing the required packages and configuring a GraphQL server within your application. This enables the server to process GraphQL queries and return the requested data efficiently.

Step 1: Install Required Packages

Install the following packages to use GraphQL with Express.

npm install @apollo/server
npm install graphql

Step 2: Import Required Libraries

Import the necessary GraphQL and Express libraries in your application.

import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';

const express = require('express');
const { ApolloServer } = require('@apollo/server');
const { expressMiddleware } = require('@apollo/server/express4');

const app = express();
const PORT = process.env.PORT || 8000;

app.get('/', (req, res) => {
  res.json({ message:'server is up and running' });
});

app.listen(PORT, () => console.log('server is started'));

Step 3: Create a GraphQL Server and Define Schema

Create a GraphQL server using Apollo Server and define a schema using GraphQL’s Schema Definition Language (SDL).

Syntax:

const yourServerName = new ApolloServer({
  typeDefs: "",
  resolvers: {},
});

import express from "express";
import { ApolloServer } from "@apollo/server";
import { expressMiddleware } from "@apollo/server/express4";

const app = express();
const PORT = process.env.PORT || 8000;

//create a graphql server and define Schema
const gqlServer = new ApolloServer({
  typeDefs: `
    type Query{
        hello: String
    }`
,
    resolvers: {
      Query: {
        hello: () => `hi this is a graphQL Server`,
      },
    },
});

app.get("/", (req, res) => {
  res.json({ message: "server is up and running" });
});

app.listen(PORT, () => console.log("server is started"));

• The schema is defined using the typeDefs property.
• The resolver for the hello query is defined inside the resolvers property.

Step 4: Start the GraphQL Server

Wrap the application inside an async function and start the GraphQL server.

import express from 'express';
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';

async function init() {
  const app = express();
  const PORT = process.env.PORT || 8000;

  //create a graphql server and define Schema
  const gqlServer = new ApolloServer({
    typeDefs: `
    type Query{
        hello: String
    }
`,
    resolvers: {
      Query: {
        hello: () => `hi this is a graphQL Server`,
      },
    },
  });

   await gqlServer.start();

  app.get('/', (req, res) => {
    res.json({ message:'server is up and running' });
  });

  app.listen(PORT, () => console.log('server is started'));
}

init();

Step 5: Expose the GraphQL Endpoint

Expose the GraphQL server at an endpoint so it can receive GraphQL queries.

app.use("/yourEndpointName", expressMiddleware(yourServerName));

import express from 'express';
import { ApolloServer } from '@apollo/server';
import { expressMiddleware } from '@apollo/server/express4';

async function init() {
  const app = express();
  app.use(express.json());
  const PORT = process.env.PORT || 8000;

  //create a graphql server and define Schema
  const gqlServer = new ApolloServer({
    typeDefs: `
    type Query{
        hello: String
    }`
   ,
    resolvers: {
      Query: {
        hello: () => `hi this is a graphQL Server`,
      },
    },
  });

   await gqlServer.start();

  app.get('/', (req, res) => {
    res.json({ message:'server is up and running' });
  });

  app.use('/graphql', expressMiddleware(gqlServer));

  app.listen(PORT, () => console.log('server is started'));
}

init();

Step 6: Access the GraphQL Endpoint

Start the Express server and open the following URL in your browser:

http://localhost:8000/graphql/

This endpoint allows you to send GraphQL queries to the server.

Dependencies

"dependencies": {
    "@apollo/server": "^4.10.0",
    "express": "^4.18.2",
    "graphql": "^16.8.1"
  },

Project Structure

Output:

Accessing http://localhost:8000/ will respond with.

{
"message": "server is up and running"
}.

Accessing http://localhost:8000/graphql allows sending GraphQL queries.