DEV Community

Cover image for Mastering GraphQL Basics: Queries, Mutations, and Schema Explained
Iz Mroen
Iz Mroen

Posted on • Edited on

Mastering GraphQL Basics: Queries, Mutations, and Schema Explained

#graphql #webdev #programming #backend

If you’ve ever worked with REST APIs, you know the pain: fetching too much data, or not enough. You end up with multiple endpoints, over-fetching, or under-fetching data. That’s where GraphQL comes in.

In this blog, I’ll walk you through:

  • What GraphQL is (in simple words)
  • Why it’s useful
  • Basic concepts (Query, Mutation, etc.)
  • A simple example with code

What is GraphQL?

GraphQL is a query language for APIs, and a runtime for executing those queries.

Simply put: With GraphQL, the client decides what data it wants — not the server.

Instead of getting all data from a REST endpoint like /api/users, you can ask for only the fields you want: like the user's name and email, and ignore everything else.

GraphQL vs REST

REST API GraphQL
Multiple endpoints Single endpoint
Over-fetch/under-fetch Get exactly what you need
Fixed structure Flexible and customizable

GraphQL Basics

1. Query: To read/fetch data.

query {
  user(id: "1") {
    name
    email
  }
}
Enter fullscreen mode Exit fullscreen mode

This query asks for the user with ID 1, but only returns their name and email.

2. Mutation: To create, update, or delete data.

mutation {
  createUser(name: "Sarah", email: "sarah@example.com") {
    id
    name
  }
}
Enter fullscreen mode Exit fullscreen mode

This mutation creates a new user and returns the id and name.

3. Schema: Describes your data types and operations.
Example of a simple GraphQL schema:

type User {
  id: ID!
  name: String!
  email: String!
}

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

type Mutation {
  createUser(name: String!, email: String!): User
}
Enter fullscreen mode Exit fullscreen mode

Example with Apollo Server (Node.js)
Let’s create a simple GraphQL server.

Step 1: Install dependencies

npm install apollo-server graphql
Enter fullscreen mode Exit fullscreen mode

Step 2: Write your server code

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

const typeDefs = gql`
  type User {
    id: ID!
    name: String!
    email: String!
  }

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

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

let users = [
  { id: '1', name: 'Alice', email: 'alice@example.com' },
];

const resolvers = {
  Query: {
    user: (_, { id }) => users.find(user => user.id === id),
  },
  Mutation: {
    createUser: (_, { name, email }) => {
      const newUser = {
        id: String(users.length + 1),
        name,
        email,
      };
      users.push(newUser);
      return newUser;
    },
  },
};

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

server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});
Enter fullscreen mode Exit fullscreen mode

Now go to http://localhost:4000 and test your queries in the Apollo Playground!

Final Thoughts

GraphQL is a powerful tool for building flexible and efficient APIs. It puts data control in the hands of the client, and simplifies how we fetch and manipulate data.

Whether you're building a blog, an e-commerce app, or a chat app — GraphQL is worth learning!

Useful Resources

  1. GraphQL
  2. Apollo GraphQL Docs

If you liked this intro, follow me for more dev tips!
Feel free to ask questions or share your GraphQL experience in the comments.

Top comments (0)