GraphQL Learn Log

5 min readDec 28, 2021

Here, I am logging everything I did to learn GraphQL and a small description of GraphQL as well.

Introduction to GraphQL

I started by watching Hussein Nasser’s video GraphQL Crash Course (just because I love his way of teaching where he is having a conversation with himself in his mind). Here he starts by talking about what GraphQL is, and here is what it is:

GraphQL is an open-source query language for APIs developed by Facebook that intends to provide the data that the client wants from an API rather than the complete data that the server delivers.

What this means is that instead of the server exposing tens or hundreds of APIs which serve only a particular type of data each, using GraphQL, we expose only a single API and we give the flexibility to the client to specify what it needs.

Demonstration of its usage

For an example of what a GraphQL application looks like to a client, Hussein uses github.com’s GraphQL Endpoint (https://api.github.com/graphql).

In this demonstration, you can see the 2 steps that we need to take to build any client for a GraphQL backend:

Get the Schema Defined in the Backend: We create a GET call at the endpoint, that returns the schema as the response. In the response, if we check data.__schema.types, we find a lot of objects. Each of these objects is a field that is defined by the backend that is used while querying the backend for data. From this data, we get the name, kind, and a brief description of the different fields. These are the things that will help you design your query by helping you decide what values and their types are.
Query the Backend for data: In GraphQL, all the queries to the backend are POST requests. The body of the request is the actual GraphQL query, which defines all the data that you need in the response and the conditions for filtering/choosing the data. For example,

`{
    repository (name: "IPC", owner: "naman-gupta99") {
        name
        forkCount
        description
    }
}'

The query here returns the name, count of forks, and the description of the repository with the name “IPC” and owner “naman-gupta99”. The best part of this is that even though there are hundreds of fields in the repository object, the response contains only the fields that we have requested.

{
    "data": {
        "repository": {
            "name": "IPC",
            "forkCount": 3,
            "description": "Inter Platform Chat"
        }
    }
}

Sample Project v1 (Basic)

Introductions

We’re going to build a bare minimum application that uses GraphQL. We’ll be trying to do Add and Query on dummy data.

Tech Stack

We’ll use NodeJS and ExpressJS to build the server.

First of all credits to @Hitesh Choudhary’s GraphQL Crash Course. In this tutorial, he shares basic steps to get started with an application with GraphQL and NodeJS.

Steps

We start by creating a Node Express Project. I used Babel to create an ES6 project, although this isn’t necessary.
For GraphQL, we install the dependencies using the following command:

npm install graphql express-graphql

Next, we create a basic script to start the server. Then we create a schema for the data that we are going to operate on.
- What is a Schema? Schema is a string that defines the shape of the data that GraphQL is going to work upon. It defines a hierarchy of types with fields that the data we have fits in. Schema also specifies all the queries (ways to fetch data) and mutations (ways to change the data) that can be used by the clients.

const schema = buildSchema(`
    type Repository {
        owner: String
        name: String
        forkCount: Int
        description: String
        techStack: [Technology]
        platform: Platform
    }type Technology {
        name: String
        version: String
    }enum Platform {
        WEB
        MOBILE
        DESKTOP
        OTHER
    }type Query {
        getRepository(name: String!): Repository
    }input CourseInput {
        owner: String!
        name: String!
        forkCount: Int
        description: String
        techStack: [TechnologyInput]
        platform: Platform
    }input TechnologyInput {
        name: String
        version: String
    }type Mutation {
        createRepository(input: CourseInput): Repository
    }
`);

Next, we need resolvers that define the methods that we have defined under types Query and Mutation.
- What are Resolvers? Resolvers are the methods that are responsible for working upon the data that we are serving through GraphQL for example the Query methods pull and formats the data from the data sources and returns it as the response whereas the Mutation methods modify the data in the data sources.

class Repository {
  constructor(name, { owner, forkCount, description, techStack, platform }) {
    this.owner = owner;
    this.name = name;
    this.forkCount = forkCount;
    this.description = description;
    this.techStack = techStack;
    this.platform = platform;
  }
}const repositories = {};const resolvers = {
  getRepository: ({ name }) => {
    return repositories[name];
  },
  createRepository: ({ input }) => {
    const { name, owner, forkCount, description, techStack, platform } = input;
    const repository = new Repository(name, {
      owner,
      forkCount,
      description,
      techStack,
      platform,
    });
    repositories[name] = repository;
    return repository;
  },
};export default resolvers;

Lastly, we add the application level Middleware to define a route to use the GraphQL API, like so

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

Here, “graphiql” is set to true so that we can view the web interface to interact with the API, this can be set to false in a production environment.

Now, after running the server we can go to <server-address>/graphql that shows a query editor and runner for GraphQL where we can run different queries and test if the output is what we expect it to be.

Resources

Github for sample project: Link

This is an in-progress story… Next up are the next level of concepts that I am going to learn. Stay tuned. I will update on my LinkedIn and Twitter.

For more content, check out my Youtube Channel.