Web Developers : 4-Setting Up a Local GraphQL Server for Demonstrating Apollo Mutations

Screenshot from the tutorial

Setting Up a Local GraphQL Server for Demonstrating Apollo Mutations

In the world of web development, GraphQL has emerged as a powerful alternative to REST APIs, providing a more efficient way to interact with data. If you’re a web developer looking to understand how to set up a local GraphQL server for demonstrating Apollo mutations, you’ve come to the right place. In this tutorial, we'll walk you through the steps needed to get your local environment up and running.

What You’ll Learn

• How to set up a local GraphQL server using Apollo Server
• How to define a schema with types and mutations
• How to test mutations using Apollo Client

Prerequisites

Before diving in, ensure that you have the following installed on your machine:

• Node.js (v14.x or later)
• npm (Node package manager)
• Basic knowledge of JavaScript and GraphQL

Step 1: Setting Up Your Project

First, let’s create a new directory for our project and initialize it with npm:

mkdir graphql-apollo-server
cd graphql-apollo-server
npm init -y

This command creates a new folder and initializes a new Node.js project with a package.json file.

Step 2: Installing Dependencies

Next, we need to install the required dependencies. For this tutorial, we will use apollo-server and graphql:

npm install apollo-server graphql

• apollo-server: A community-driven, open-source GraphQL server that works with any GraphQL schema.
• graphql: The core library for building GraphQL APIs.

Step 3: Setting Up the GraphQL Server

Now, create a new file named server.js in your project directory. This file will contain the code for our GraphQL server.

// server.js
const { ApolloServer, gql } = require('apollo-server');

// Step 4: Defining the Schema
const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    age: Int!
  }

  type Query {
    users: [User]
  }

  type Mutation {
    addUser(name: String!, age: Int!): User
  }
`;

// Sample data
let users = [
  { id: "1", name: "John Doe", age: 25 },
  { id: "2", name: "Jane Doe", age: 30 },
];

// Step 5: Resolvers
const resolvers = {
  Query: {
    users: () => users,
  },
  Mutation: {
    addUser: (_, { name, age }) => {
      const newUser = { id: String(users.length + 1), name, age };
      users.push(newUser);
      return newUser;
    },
  },
};

// Step 6: Creating the Apollo Server
const server = new ApolloServer({ typeDefs, resolvers });

// Starting the Server
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Breakdown of the Code

1. Type Definitions (Schema):

   • We define a User type with id, name, and age.
   • The Query type lets us retrieve users.
   • The Mutation type allows us to add a new user.

2. Sample Data:

   • A simple array users is initialized to hold our user data.

3. Resolvers:

   • The Query resolver returns the list of users.
   • The Mutation resolver adds a new user to the users array.

4. Apollo Server:

   • An instance of ApolloServer is created with the defined typeDefs and resolvers.

5. Starting the Server:

   • The server listens on a default port (4000) and logs the URL once it’s running.

Step 7: Running Your Server

To run your GraphQL server, execute the following command in your terminal:

node server.js

You should see an output similar to:

🚀 Server ready at http://localhost:4000/

Step 8: Testing Your Mutations

To test your GraphQL mutations, you can use a tool like Apollo Studio or Postman. Here’s an example mutation you can send:

mutation {
  addUser(name: "Alice Smith", age: 28) {
    id
    name
    age
  }
}

Example Response

If your mutation is successful, you should receive a response like:

{
  "data": {
    "addUser": {
      "id": "3",
      "name": "Alice Smith",
      "age": 28
    }
  }
}

Conclusion

In this tutorial, we’ve successfully set up a local GraphQL server using Apollo Server and defined a simple schema with mutations. You can now expand upon this foundation to create more complex applications and explore the powerful features that GraphQL and Apollo offer.

Feel free to reach out with any questions or share your experiences with GraphQL and Apollo in the comments below! Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios