GraphQL API with JavaScript: Step-by-Step Practical Tutorial

Introduction to GraphQL and Its Advantages

GraphQL is a query language and runtime for APIs, developed by Facebook. Unlike REST, where you receive fixed data structures, GraphQL allows the client to request only what it needs. This makes APIs more flexible and efficient.

In this step-by-step tutorial, we will create a full-fledged GraphQL API with JavaScript using Node.js. You will learn how to set up a server, define schemas, and handle queries and mutations. By the end of the article, you will have a working API ready for integration into any project.

1. Project Setup and Dependency Installation

First, let's create a new Node.js project and install the necessary packages. We will use apollo-server — a popular library for building GraphQL servers.

Step 1: Project Initialization

mkdir graphql-tutorial\ncd graphql-tutorial\nnpm init -y

Step 2: Installing Apollo Server and GraphQL

npm install apollo-server graphql

After installation, create the main file index.js, where our server will reside.

2. Creating a Basic GraphQL Server

Now let's write a minimal server that will accept requests and return responses. To do this, we will define a schema and resolvers.

Step 1: Defining the Data Type

Let's create a simple Book type with fields id, title, and author.

const { ApolloServer, gql } = require('apollo-server');\n\n// GraphQL Schema\nconst typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n`;\n\n// Sample data (in a real project — a database)\nconst books = [\n  { id: '1', title: 'War and Peace', author: 'Leo Tolstoy' },\n  { id: '2', title: 'Crime and Punishment', author: 'Fyodor Dostoevsky' },\n  { id: '3', title: 'The Master and Margarita', author: 'Mikhail Bulgakov' }\n];\n\n// Resolvers — functions that return data\nconst resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  }\n};\n\n// Creating the server\nconst server = new ApolloServer({ typeDefs, resolvers });\n\n// Starting the server\nserver.listen().then(({ url }) => {\n  console.log(`🚀  Server ready at: ${url}`);\n});

Step 2: Running and Testing

Run the command node index.js and open http://localhost:4000 in your browser. You will see the GraphQL Playground — a tool for testing queries.

Try executing a simple query:

{\n  books {\n    title\n    author\n  }\n}

The response should contain a list of books with the specified fields.

3. Adding Mutations and Extending the Schema

Now let's add the ability to modify data through mutations. This will allow creating, updating, and deleting records.

Step 1: Defining Mutations in the Schema

const typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  input BookInput {\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n\n  type Mutation {\n    addBook(input: BookInput!): Book\n    deleteBook(id: ID!): Book\n  }\n`;

Step 2: Implementing Resolvers for Mutations

const resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  },\n  Mutation: {\n    addBook: (parent, args) => {\n      const newBook = {\n        id: String(books.length + 1),\n        title: args.input.title,\n        author: args.input.author\n      };\n      books.push(newBook);\n      return newBook;\n    },\n    deleteBook: (parent, args) => {\n      const index = books.findIndex(book => book.id