🔦 GraphQL: Demystified

GraphQL is an alternative to REST APIs for fetching data. It solves common REST problems such as overfetching and underfetching by allowing clients to request exactly the data they need.

Instead of multiple endpoints, GraphQL typically exposes a single endpoint where clients send a query describing the required fields and voilà! The server responds with precisely that data.

GraphQL commonly operates over HTTP (usually POST requests) and introduces its own core operations:

• Query – fetch data
• Mutation – create, update, or delete data

You can learn more about GraphQL concepts and terminology here: 👉 https://graphql.org/learn/

---

Quick Start: Creating a GraphQL Server

In this guide, we’ll build a simple GraphQL server using GraphQL Yoga with Node.js and Express.

I’m using GraphQL Yoga because:

• It has an extremely simple setup
• It’s lightweight compared to Apollo Server
• It provides a built-in UI for testing and debugging

Official docs: 👉 https://the-guild.dev/graphql/yoga-server

---

Step 1: Create new Project

mkdir graphql-yoga-app
cd graphql-yoga-app
npm init -y

Step 2: Install Dependencies

npm install graphql-yoga graphql express

Here’s what each package does:

• graphql – Core GraphQL execution engine
• graphql-yoga – Lightweight GraphQL server with built-in GraphiQL UI
• express – HTTP server to host our GraphQL endpoint

GraphQL Yoga can run without Express, but using Express makes it easy to combine GraphQL with REST endpoints if needed.

Step 3: Create a Hello World Query

Create a file named index.js and add the following code:

const express = require("express");
const { createYoga, createSchema } = require('graphql-yoga');

const app = express();

const typeDefs = `
  type Query {
    hello: String
  }
`;

const resolvers = {
    Query: {
      hello: () => 'Hello, GraphQL!',
    },
};

const yoga = createYoga({
  schema: createSchema({
    typeDefs: typeDefs,
    resolvers: resolvers,
  }),
});

app.use("/graphql", yoga);

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

app.listen(3000, () => {
  console.log("Listening on port 3000!");
});

• The createSchema function is used to create a GraphQL schema from a set of type definitions and resolvers.
• The type definition (typeDefs) specifies the structure of the data that can be queried and mutated.
• The resolvers defines a list of functions that can be used to resolve queries and mutations.
• For type Query, the hello defines resolver function that returns the string
• The createYoga function is used to create a GraphQL Yoga server from a schema.
• Express is used to host the GraphQL (/graphql) endpoint. As you can see, GraphQL uses this single endpoint for all requests.

Step 4: Add Mutation to the Schema

const typeDefs = `
  type Query {
    hello: String
  }
  type Mutation {
    echo(message: String!): String!
  }
`;

const resolvers = {
  Query: {
    hello: () => 'Hello, GraphQL!',
  },
  Mutation: {
    echo: (parent, { message }) => message,
  }
};

• The type Mutation defines a mutation (create, update or delete) in GraphQL
• The echo mutation takes a message as an argument and returns the same message.
• Every mutation is a function that takes a parent and an object containing arguments and returns a value.
• parent refers to the previous resolver in the chain (unused here but important in nested queries).

Step 5: Run the Server

node index.js

Step 6: Test the Server

Go to http://localhost:3000/graphql and you would see the following UI where you can easily test your queries and mutations

---

Conclusion

And that’s it! 🎉 You now have a fully working GraphQL server with queries and mutations.

GraphQL doesn’t have to be intimidating with tools like GraphQL Yoga, getting started is refreshingly simple.