GraphQL and Apollo: A Beginner’s Guide

Are you tired of making multiple API calls just to retrieve the data you need? Say hello to GraphQL, the revolutionary query language that’s changing the way we think about APIs.

GraphQL is a query language for APIs that was developed by Facebook in 2012 and has since become a popular alternative to REST APIs. It allows clients to request specific data and reduces the need for multiple API endpoints, making it more flexible and efficient than traditional REST APIs.

One of the key features of GraphQL is the ability to specify exactly what data you want to retrieve in a single query, rather than having to make multiple requests to multiple endpoints. This is done using a query language that is similar to the syntax of JavaScript object notation (JSON).

For example, consider a simple GraphQL API for retrieving information about users:

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

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

To request the name and email of a user with an ID of “123”, you could use the following GraphQL query:

query {
  user(id: "123") {
    name
    email
  }
}

The server would then return the requested data in the following format:

{
  "data": {
    "user": {
      "name": "John Smith",
      "email": "john@example.com"
    }
  }
}

In addition to querying data, GraphQL also allows you to perform mutations to modify data on the server. For example, you could use the following mutation to update a user’s email address:

mutation {
  updateUser(id: "123", email: "new@example.com") {
    name
    email
  }
}

GraphQL also supports subscriptions, which allow clients to receive real-time updates whenever the data they are subscribed to changes. This can be useful for building real-time applications, such as chat apps or collaborative platforms.

Here is a basic outline for creating a REST API using GraphQL

1. Choose a programming language: GraphQL can be implemented in a variety of programming languages, such as JavaScript, Python, or Java. Choose the language that you are most familiar with or that best fits your needs.
2. Set up your development environment: Install any necessary tools and libraries, such as a code editor, a package manager, and a web server.
3. Define your GraphQL schema: A GraphQL schema defines the types, fields, and relationships of your data, as well as the operations that can be performed on it. Use the GraphQL schema language to define your schema.
4. Implement your GraphQL server: Use a GraphQL library, such as Apollo Server or GraphQL.js, to set up a GraphQL server that can handle requests and return data.
5. Test and debug your API: Use a tool like GraphQL Playground or GraphiQL to test your API and make sure it is working as expected.
6. Deploy your API: Choose a hosting platform, such as Heroku or AWS, and deploy your API so that it can be accessed by clients.

Here is an example of a simple GraphQL server implemented in Node.js using the express-graphql library:

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

// Construct a schema using the GraphQL schema language
const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

// Define the root value for the GraphQL API
const rootValue = {
  hello: () => 'Hello, world!'
};

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: rootValue,
  graphiql: true
}));

app.listen(4000, () => {
  console.log('GraphQL API server running at localhost:4000/graphql');
});

This server defines a single GraphQL API endpoint at “/graphql” and a single query, “hello”, which returns the string “Hello, world!”. The graphiql option enables the GraphiQL debugger, which allows you to test and debug your API using a web-based interface.

To start the server, run the following command:

node server.js

You can then access the GraphiQL debugger at http://localhost:4000/graphql

Or Curl

curl -X POST \
-H "Content-Type: application/json" \
-d '{"query": "{ hello }"}' \
http://localhost:4000/graphql

Result would be

{"data":{"hello":"Hello world!"}}

That’s it! Now you can play around and dive deeper.

Apollo GraphQL

Apollo Server is a popular library for implementing a GraphQL server in Node.js. Here is an example of how to set up a simple GraphQL server using Apollo Server:

npm i @apollo/server graphql

Define your GraphQL schema:

const typeDefs = `#graphql
  type Movie {
    title: String
    director: String
  }

  type Query {
    movies: [Movie]
  }
`;

Define your resolvers:

const resolvers = {
  Query: {
    movies: () => movies,
  },
};

Create an instance of ApolloServer:

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

Start the server:

// Passing an ApolloServer instance to the `startStandaloneServer` function:
//  1. creates an Express app
//  2. installs your ApolloServer instance as middleware
//  3. prepares your app to handle incoming requests

const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });

Before that let’s change our package type so that we can do imports

Change the type to the module in package.json

{
  "name": "graphqlex",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "dependencies": {
    "@apollo/server": "^4.3.0"
  },
  "devDependencies": {
    "graphql": "^16.6.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC"
}

Here is the final code for server.js

import { ApolloServer } from '@apollo/server';
import { startStandaloneServer } from '@apollo/server/standalone'

// A schema is a collection of type definitions (hence "typeDefs")
const typeDefs = `#graphql
  type Movie {
    title: String
    director: String
  }

  type Query {
    movies: [movie]
  }
`;

const movies = [
  {
    title: 'Avatar: Way of water',
    director: 'James Cameroon',
  },
  {
    title: 'RRR',
    director: 'Rajmoulo',
  },
];

const resolvers = {
  Query: {
    movies: () => movies,
  },
};

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

// Passing an ApolloServer instance to the `startStandaloneServer` function:
//  1. creates an Express app
//  2. installs your ApolloServer instance as middleware
//  3. prepares your app to handle incoming requests

const { url } = await startStandaloneServer(server, { listen: { port: 4000 } });

console.log(`🚀 Server listening at: ${url}`);

http://localhost:4000/

Now it’s your turn to play around.

— — — -

I hope this helps as a starting point for setting up a GraphQL.

Happy Learning !!