Exploring GraphQL: How to Build a Simple API with Apollo Server

 

Feel annoyed with APIs that offer you more info than you need? Or are you tired of making several requests for similar information? You are not alone! GraphQL may work for you. Unlike standard REST APIs, GraphQL lets you request just the data you require. This article explains how to develop a basic, efficient Apollo Server API. Ready to test GraphQL? Let's begin!

 

What is GraphQL?

Simply described, it is an API query language and runtime that executes queries using a type system you design. Sounds lengthy, right? Let's simplify it.

GraphQL allows more flexible data requests than REST APIs. You may combine numerous endpoints for different data into a single query, talk about efficiency! Introspective GraphQL lets you explore the data you can request. This powerful tool simplifies API interaction. Imagine customising your demands. Sounds amazing, huh?

Why Use Apollo Server for GraphQL? 

Apollo Server is GraphQL API development's champion. But why Apollo, not another? Apollo Server is popular for its simplicity, flexibility, and scalability. Apollo makes GraphQL simple to start. It interacts smoothly with Node.js and lets you design clean, maintainable GraphQL schema and resolvers.

Even better? Apollo Server offers caching, real-time subscriptions, and monitoring. Its excellent documentation and active community make learning and troubleshooting easy. Apollo Server makes it easy to construct reliable APIs for small apps or large ones.

Setting Up the Project 

Okay, now that you are excited about what GraphQL and Apollo can do, let's set up your project! Make a new Node.js project to get started. You will need to install Node.js if you have not already. Do not worry, it is easy and quick. 

Let's get the important things set up once your environment is ready. Open your terminal and run:

npm init -y
npm install apollo-server graphql

For your API to work, this will install the Apollo Server and GraphQL tools. Next, call your new file server.js. We will set up the server and our first GraphQL structure here. Are you ready? Let's look at the code!

Building a Simple API 

It is time to get our hands dipped and build the GraphQL API. You will start by setting up your GraphQL structure. In GraphQL, a template is just a plan for what your API can do. First, we will make a simple query to fetch information about users.

Step 1: Define Your Schema

Let's add a simple User type and a Query that gets a list of people to your server.js file.

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

const typeDefs = gql`
  type Query {
    users: [User]
  }

  type User {
    id: ID
    name: String
  }
`;

const resolvers = {
  Query: {
    users: () => [
      { id: 1, name: "John Doe" },
      { id: 2, name: "Jane Smith" },
    ],
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

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

Step 2: Add More Data and Queries

Let's add more tools to our API to scale it. Take the following example: let us add a query to retrieve a single person by ID.

const typeDefs = gql`
  type Query {
    users: [User]
    user(id: ID!): User
  }

  type User {
    id: ID
    name: String
  }
`;

const resolvers = {
  Query: {
    users: () => [
      { id: 1, name: "John Doe" },
      { id: 2, name: "Jane Smith" },
    ],
    user: (_, { id }) => {
      const users = [
        { id: 1, name: "John Doe" },
        { id: 2, name: "Jane Smith" },
      ];
      return users.find(user => user.id == id);
    },
  },
};

Step 3: Handling Mutations (Optional)

We can also define mutations if we want to create new users. Here's an example of how to make a new user by adding a mutation.

const typeDefs = gql`
  type Query {
    users: [User]
    user(id: ID!): User
  }

  type Mutation {
    createUser(name: String!): User
  }

  type User {
    id: ID
    name: String
  }
`;

const resolvers = {
  Query: {
    users: () => [
      { id: 1, name: "John Doe" },
      { id: 2, name: "Jane Smith" },
    ],
    user: (_, { id }) => {
      const users = [
        { id: 1, name: "John Doe" },
        { id: 2, name: "Jane Smith" },
      ];
      return users.find(user => user.id == id);
    },
  },
  Mutation: {
    createUser: (_, { name }) => {
      const newUser = { id: Math.random(), name };
      return newUser;
    },
  },
};

You can now send a request to make a new user with this mutation!

Testing the API with Apollo Studio

You may be thinking, "How do I test this?" once your server is up and running. Apollo Studio makes it really simple. Apollo Studio is a great way to test and learn more about your GraphQL APIs.

Just go to Apollo Studio and enter the URL of your server. You can now start trying questions right in your browser. Type this:

{
  users {
    id
    name
  }
}

A nice JSON answer with the list of people will come back to you. It really does work like magic! 

Conclusion 

You have used Apollo Server to build a fully working GraphQL API in just a few easy steps. You have given your APIs a whole new level of freedom and speed with GraphQL. And GraphQL will help you get there faster whether you are making small apps or big ones.