Part 1: Creating A GraphQL Server With Node.js

GraphQL is a powerful tool that offers more flexibility and efficiency than traditional REST APIs. Designed with a focus on performance, it addresses many of the shortcomings developers often face when working with REST APIs.

Exploring the GraphQL IDE

GraphQL comes with a built-in IDE, which facilitates interactive documentation and collaboration. Several versions of the GraphQL IDE exist within the programming community, including GraphiQL, GraphQL Playground, Postman, and Apollo Studio. In this blog, we’ll focus specifically on Apollo Studio.

GraphQL IDE

GraphQL provides a built-in IDE for interactive documentation and collaboration. There are variations of GraphQL IDE in the programming community, such as GraphiQL, GraphQL Playground, Postman, and Apollo Studio. In this lesson, we’ll focus on Apollo Studio.

Let’s see how this scenario would be handled by both REST and GraphQL.

Apollo Studio’s first screen

To understand the differences, let’s take a closer look at the pizza application we mentioned in this previous section. A pizza application needs to display the available pizza toppings, sizes, and upgrades.

REST vs. GraphQL: A Comparative Look

To understand the differences between REST and GraphQL, let’s take a look at a hypothetical pizza application. This application needs to display the available pizza toppings, sizes, and upgrades.

Using REST API

In a REST API-based approach, we populate the data by accessing multiple API resources from different endpoints. For instance, to get all available toppings, we need to call ‘/pizzas/toppings’, and for available sizes, we fetch ‘/pizzas/sizes’.

Using GraphQL

GraphQL works a little differently. With GraphQL, the server can fulfill multiple data requests as defined in a single client query.

Operation name on getPizzas query

Arguments in GraphQL

GetPizzas query arguments

Now, imagine we have a pizza detail screen where we need to get pizza information based on the pizza id.

Add the mutation examples in server.js

Run the queries mentioned below in the following code :

Query 1

Query 2

The GetPizzaById query above would return this as a response:

{
  "data": {
    "pizza": {
      "id": 1,
      "pizza": "Neapolitan Pizza"
    }
  }
}

The GetPizzas query above would return this as a response:

{
  "data": {
    "pizzas": [
      {
        "id": 2,
        "pizza": "Chicago Pizza"
      }
    ]
  }
}

GraphQL aliases

Let’s create queries to get pizzas with Neapolitan and Chicago in their names in a single query.

Will the query above work?

Unfortunately, no. The query won’t work because the two fields clash. However, the advantage of GraphQL is that we can alias them with different names, so we can still receive both results in one request.

Let’s make revisions to our query. Put the alias “Neapolitan” on our first pizza query and “Chicago” on the other. The updated query should look like this:

The above query would return this as a response:

{
  "data": {
    "Chicago": [
      {
        "id": 2,
        "pizza": "Chicago Pizza",
        "toppings": [
          {
            "id": 1,
            "topping": "Cheesy"
          }
        ]
      }
    ],
    "Neopolitan": [
      {
        "id": 1,
        "pizza": "Neapolitan Pizza",
        "toppings": [
          {
            "id": 1,
            "topping": "Cheesy"
          }
        ]
      }
    ]
  }
}

Variables in GraphQL

How to convert hardcoded GraphQL queries

Let’s observe the GetPizzas query again.

Before converting the hardcoded GraphQL queries, we must do the following:

• In the query, substitute the fixed value with ＄variableName.
• Declare ＄variableName among the query’s acceptable variables.
• The value variableName should be in a separate, transport-specific variables dictionary (typically JSON).

The updated GetPizzas query looks like this:

The variables data looks like this:

Definition of a Variable

In the previous sample GraphQL query, the variable definition is the section that looks like ＄name: String!. It operates in the same way that every strong programming language by defining a parameter type for a function. GraphQL lists all of the variables, beginning with $ and ending with their sort. Enums, scalars, and input types are required for all specified variables. Thus, if we wish to submit a complicated object into a field, we must first determine what input type the server accepts.

Variable definitions may be necessary or optional. Because there’s an exclamation mark (!) next to the name type in the example above, it’s required. If, however, the field we’re supplying is optional, there’s no need to constantly use variables.

Rather than create a new query, we may now pass multiple variables. We shouldn’t use string interpolation to generate queries from user-supplied data, which is why this method is regarded as best-practice to indicate which parameters in our query should be dynamic.

Set variables on GraphQL IDE

We can easily set variable data for our GraphQL query by defining a JSON object in the variable section in the lower middle column of Apollo Studio.

The response would look like this:

{
  "data": {
    "Neapolitan": [
      {
        "id": 1,
        "pizza": "Neapolitan Pizza"
      }
    ]
  }
}

Note: We use GraphQL variables to avoid using hardcoded values while making requests.

In future blogs, I will share more complex aspects of GraphQL, such as using fragments, and dynamic queries, along with directives, mutations, schema types, and validation.