REST vs. GraphQL: Which API Style Should You Choose?

REST vs. GraphQL: Which API Style Should You Choose?

REST vs. GraphQL: Selecting the Right API Approach

Reagan Mwangi's photo
Reagan Mwangi
·

5 min read

Table of contents

REST vs. GraphQL: Creating APIs with Style

Introduction: The API Face-off

Welcome to the grand showdown between two titans of the API world: REST and GraphQL! Whether you're a front-end developer looking to fetch data for your latest project or just someone curious about the buzzwords flying around in tech circles, this post is for you. Buckle up, because we’re about to dive into the what, why, and how of creating RESTful and GraphQL APIs. Let's get this party started!

Round 1: What Are They?

RESTful APIs

REST stands for Representational State Transfer. It's the old guard of APIs, reliable and well-established. In REST, each resource (like a user, a post, or a comment) is represented by a URL. You interact with these resources using HTTP methods:

  • GET: Retrieve data

  • POST: Create data

  • PUT: Update data

  • DELETE: Remove data

Think of REST as a menu at a restaurant: you order what you want, and the server brings it to you exactly as described.

GraphQL APIs

GraphQL, on the other hand, is the new kid on the block, developed by Facebook. Unlike REST, GraphQL allows clients to specify exactly what data they need, and nothing more. It’s like having a direct line to the chef, telling them precisely how you want your dish prepared.

With GraphQL, you write queries to fetch data, and these queries can include multiple resources in one go, reducing the number of requests.

Round 2: Why Use Them?

RESTful APIs

  1. Simplicity: REST is straightforward and easy to use, especially for simple CRUD (Create, Read, Update, Delete) operations.

  2. Caching: RESTful endpoints can be cached, improving performance.

  3. Wide Adoption: It’s been around for a while, so there's plenty of documentation and community support.

GraphQL APIs

  1. Flexibility: Fetch exactly what you need with a single request, no more, no less.

  2. Efficiency: Combine multiple resources in one query, reducing network overhead.

  3. Strong Typing: With a well-defined schema, clients know exactly what data they can request and what they'll get back.

Round 3: Creating the APIs

Creating a RESTful API

Let's build a simple RESTful API using Node.js and Express. Imagine we're creating a to-do list application.

  1. Setup:

    • First, ensure you have Node.js installed.

    • Initialize a new project: npm init -y

    • Install Express: npm install express

Create the Server:
javascript

const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json());

let todos = [
  { id: 1, task: 'Learn REST', done: false },
  { id: 2, task: 'Learn GraphQL', done: false },
];

// GET all todos
app.get('/todos', (req, res) => {
  res.json(todos);
});

// GET a single todo
app.get('/todos/:id', (req, res) => {
  const todo = todos.find(t => t.id == req.params.id);
  if (todo) res.json(todo);
  else res.status(404).send('Todo not found');
});

// POST a new todo
app.post('/todos', (req, res) => {
  const newTodo = { id: todos.length + 1, task: req.body.task, done: false };
  todos.push(newTodo);
  res.status(201).json(newTodo);
});

// PUT update a todo
app.put('/todos/:id', (req, res) => {
  const todo = todos.find(t => t.id == req.params.id);
  if (todo) {
    todo.task = req.body.task;
    todo.done = req.body.done;
    res.json(todo);
  } else res.status(404).send('Todo not found');
});

// DELETE a todo
app.delete('/todos/:id', (req, res) => {
  todos = todos.filter(t => t.id != req.params.id);
  res.status(204).send();
});

app.listen(PORT, () => {
  console.log(Server running on <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:${PORT});" style="pointer-events: none">localhost:${PORT}`);
});

Creating a GraphQL API

Now, let's create a GraphQL API for the same to-do list application using Node.js, Express, and Apollo Server.

  1. Setup:

    • Ensure you have Node.js installed.

    • Initialize a new project: npm init -y

    • Install necessary packages: npm install express apollo-server-express graphql

Create the Server:
javascript

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

const PORT = 3000;

let todos = [
  { id: 1, task: 'Learn REST', done: false },
  { id: 2, task: 'Learn GraphQL', done: false },
];

// Define the schema
const typeDefs = gql<br>&nbsp; type Todo {<br>&nbsp; &nbsp; id: ID!<br>&nbsp; &nbsp; task: String!<br>&nbsp; &nbsp; done: Boolean!<br>&nbsp; }<br><br>&nbsp; type Query {<br>&nbsp; &nbsp; todos: [Todo]<br>&nbsp; &nbsp; todo(id: ID!): Todo<br>&nbsp; }<br><br>&nbsp; type Mutation {<br>&nbsp; &nbsp; addTodo(task: String!): Todo<br>&nbsp; &nbsp; updateTodo(id: ID!, task: String, done: Boolean): Todo<br>&nbsp; &nbsp; deleteTodo(id: ID!): Boolean<br>&nbsp; }<br>;

// Define the resolvers
const resolvers = {
  Query: {
    todos: () => todos,
    todo: (parent, args) => todos.find(t => t.id == args.id),
  },
  Mutation: {
    addTodo: (parent, args) => {
      const newTodo = { id: todos.length + 1, task: args.task, done: false };
      todos.push(newTodo);
      return newTodo;
    },
    updateTodo: (parent, args) => {
      const todo = todos.find(t => t.id == args.id);
      if (todo) {
        todo.task = args.task !== undefined ? args.task : todo.task;
        todo.done = args.done !== undefined ? args.done : todo.done;
        return todo;
      }
      throw new Error('Todo not found');
    },
    deleteTodo: (parent, args) => {
      const initialLength = todos.length;
      todos = todos.filter(t => t.id != args.id);
      return todos.length < initialLength;
    },
  },
};

// Create the server
const server = new ApolloServer({ typeDefs, resolvers });
const app = express();
server.applyMiddleware({ app });

app.listen(PORT, () => {
  console.log(Server running on <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:${PORT}${server.graphqlPath});" style="pointer-events: none">localhost:${PORT}${server.graphqlPath}`);
});

Conclusion: Which One to Choose?

Both REST and GraphQL have their strengths and choosing between them depends on your needs:

  • Choose REST if you prefer a simpler, more traditional approach, especially for CRUD operations and when dealing with standard data fetching.

  • Choose GraphQL if you need flexibility, efficiency, and precise data fetching, especially in complex applications with multiple data sources.

Remember, there's no one-size-fits-all solution. Sometimes, the best approach is to combine both, using REST for some parts of your application and GraphQL for others. Happy coding, and may your APIs be ever-responsive!

REST APIGraphQLAPIsFrontend DevelopmentSoftware EngineeringJavaScript