The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

GraphQL with Node.js

Next ►
►

GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. It provides a more efficient, powerful, and flexible alternative to REST. In this section, we will explore how to integrate GraphQL with Node.js.

Key Concepts

  1. GraphQL Schema: Defines the structure of the API, including types, queries, and mutations.
  2. Resolvers: Functions that handle the logic for fetching the data for each type in the schema.
  3. Queries: Read operations to fetch data.
  4. Mutations: Write operations to modify data.
  5. GraphQL Server: The server that processes GraphQL queries and returns the results.

Setting Up GraphQL with Node.js

Step 1: Initialize a Node.js Project

First, create a new Node.js project and install the necessary dependencies.

mkdir graphql-nodejs
cd graphql-nodejs
npm init -y
npm install express express-graphql graphql

Step 2: Create the Server

Create a file named server.js and set up a basic Express server with GraphQL.

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');

// Define the schema
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Define the resolvers
const root = {
  hello: () => {
    return 'Hello, world!';
  },
};

// Create an Express server and a GraphQL endpoint
const app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));

app.listen(4000, () => console.log('Server running on http://localhost:4000/graphql'));

Step 3: Run the Server

Run the server using the following command:

node server.js

You can now navigate to http://localhost:4000/graphql in your browser and use the GraphiQL interface to run the query:

{
  hello
}

Defining a More Complex Schema

Let's expand our schema to include more complex types and operations.

Step 1: Update the Schema

Modify the schema to include a User type and queries to fetch users.

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    user(id: ID!): User
    users: [User]
  }
`);

Step 2: Add Resolvers

Update the resolvers to handle the new queries.

const users = [
  { id: '1', name: 'John Doe', email: '[email protected]' },
  { id: '2', name: 'Jane Doe', email: '[email protected]' },
];

const root = {
  user: ({ id }) => users.find(user => user.id === id),
  users: () => users,
};

Step 3: Test the Queries

Restart the server and test the following queries in the GraphiQL interface:

{
  user(id: "1") {
    id
    name
    email
  }
}

{
  users {
    id
    name
    email
  }
}

Adding Mutations

Mutations allow you to modify data. Let's add a mutation to create a new user.

Step 1: Update the Schema

Add a mutation to the schema.

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Query {
    user(id: ID!): User
    users: [User]
  }

  type Mutation {
    createUser(name: String!, email: String!): User
  }
`);

Step 2: Add the Mutation Resolver

Update the resolvers to handle the new mutation.

const { v4: uuidv4 } = require('uuid');

const root = {
  user: ({ id }) => users.find(user => user.id === id),
  users: () => users,
  createUser: ({ name, email }) => {
    const newUser = { id: uuidv4(), name, email };
    users.push(newUser);
    return newUser;
  },
};

Step 3: Test the Mutation

Restart the server and test the following mutation in the GraphiQL interface:

mutation {
  createUser(name: "Alice", email: "[email protected]") {
    id
    name
    email
  }
}

Practical Exercise

Exercise: Extend the Schema

  1. Add a Post type with fields id, title, content, and authorId.
  2. Add queries to fetch a single post and all posts.
  3. Add a mutation to create a new post.

Solution

Step 1: Update the Schema

const schema = buildSchema(`
  type User {
    id: ID!
    name: String!
    email: String!
  }

  type Post {
    id: ID!
    title: String!
    content: String!
    authorId: ID!
  }

  type Query {
    user(id: ID!): User
    users: [User]
    post(id: ID!): Post
    posts: [Post]
  }

  type Mutation {
    createUser(name: String!, email: String!): User
    createPost(title: String!, content: String!, authorId: ID!): Post
  }
`);

Step 2: Add Resolvers

const posts = [];

const root = {
  user: ({ id }) => users.find(user => user.id === id),
  users: () => users,
  post: ({ id }) => posts.find(post => post.id === id),
  posts: () => posts,
  createUser: ({ name, email }) => {
    const newUser = { id: uuidv4(), name, email };
    users.push(newUser);
    return newUser;
  },
  createPost: ({ title, content, authorId }) => {
    const newPost = { id: uuidv4(), title, content, authorId };
    posts.push(newPost);
    return newPost;
  },
};

Step 3: Test the Queries and Mutations

Restart the server and test the following queries and mutations in the GraphiQL interface:

mutation {
  createPost(title: "My First Post", content: "This is the content of my first post", authorId: "1") {
    id
    title
    content
    authorId
  }
}

{
  posts {
    id
    title
    content
    authorId
  }
}

Conclusion

In this section, we covered the basics of integrating GraphQL with Node.js. We learned how to set up a GraphQL server, define schemas, create resolvers, and handle queries and mutations. By extending the schema and adding more complex types and operations, you can build powerful and flexible APIs with GraphQL and Node.js.

◄ Previous
◄
Next ►
►

Node.js Course

Module 1: Introduction to Node.js

Module 2: Core Concepts

Module 3: File System and I/O

Module 4: HTTP and Web Servers

Module 5: NPM and Package Management

Module 6: Express.js Framework

Module 7: Databases and ORMs

Module 8: Authentication and Authorization

Module 9: Testing and Debugging

Module 10: Advanced Topics

Module 11: Deployment and DevOps

Module 12: Real-World Projects

The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved