GraphQL Oversimplified

#graphql #webdev #programming #javascript

GraphQL is a query language for your API, and a runtime for executing those queries against your data. It was created by Facebook as an alternative to REST APIs, which have been the standard way of exposing data through APIs for many years.

However, graphqls new way of writing APIs can make it difficult for developers accustomed to working with REST. Some core concepts of GraphQL are essential to understand how GraphQL works. I will be covering those core concepts in this post. However, if you are entirely new to GraphQL, you should start with GraphQL docs first and then come and read this post.

1 - Schema Definition Language (SDL)

The Schema Definition Language (SDL) is a way to define GraphQL schemas using a simple and straightforward syntax. It allows you to define the types, fields, and relationships in your data model, and it is used to create a GraphQL schema that a server can use to process GraphQL queries.

Here is an example of a GraphQL SDL that defines a simple data model with a single type called "Person":

type Person {
  id: ID!
  name: String!
  age: Int!
  address: String
}

This SDL defines a type called Person with four fields:

id: an ID field that is required (denoted by the ! symbol)
name: a String field that is required
age: an Int field that is required
address: a String field that is optional (not required)

The SDL also allows you to define relationships between types, as in the following example:

type Person {
  id: ID!
  name: String!
  age: Int!
  address: String
  friends: [Person]
}

This defines a one-to-many relationship between Person objects, where a person can have multiple friends but each friend can only have one person.

2 - Queries

In GraphQL, a query is a request for data from a server. Queries are used to fetch data from a GraphQL server and are typically used to retrieve data for display in a client application.

Queries are written in the GraphQL query language, which is a syntax for specifying the data you want to retrieve. A GraphQL query consists of a set of fields, with each field representing a piece of data you want to retrieve. Fields can be nested to represent relationships between data.

Here is an example of a simple GraphQL query that retrieves the name and age of a person with a specific ID:

query {
  person(id: "123") {
    name
    age
  }
}

This query includes a single field, person, which takes an argument (the ID of the person we want to retrieve). The person field itself has two subfields, name and age, which specify the data we want to retrieve for that person.

Queries can also include variables, which allow you to pass dynamic values into your query. For example:

query GetPerson($id: ID!) {
  person(id: $id) {
    name
    age
  }
}

In this example, the query includes a variable called $id of type ID!, which means it is a required variable of type ID. The variable is used in the query as an argument to the "person" field. To execute this query, you would need to provide a value for the $id variable.

3 - Mutations

While queries are great, we also need to update information using APIs. In GraphQL, a mutation is a way to change or update data on the server. Mutations are used to create, update, or delete data, and they are typically used to update the server's data in response to user actions.

Mutations are written in the GraphQL query language, and they are similar in structure to queries. A mutation consists of a set of fields, each of which represents an action to be performed on the server.

Here is an example of a simple GraphQL mutation that creates a new person in the database:

mutation {
  createPerson(name: "John Smith", age: 30, address: "123 Main St.") {
    id
    name
    age
    address
  }
}

This mutation includes a single field, createPerson, which takes a set of arguments (the person's name, age, and address). The createPerson field itself has four subfields, id, name, age, and address, which specify the data that should be returned after the mutation is executed.

Mutations can also include variables, which allow you to pass dynamic values into your mutation. For example:

mutation CreatePerson($name: String!, $age: Int!, $address: String) {
  createPerson(name: $name, age: $age, address: $address) {
    id
    name
    age
    address
  }
}

In this example, the mutation includes three variables: $name, $age, and $address, which correspond to the arguments passed to the createPerson field. To execute this mutation, you would need to provide values for these variables.

4 - Subscriptions

Another one of the critical GraphQL Core Concepts is around the topic of subscriptions. In many modern applications, it is essential to have a real-time connection between server and client so that the client can be immediately informed about important events.

In GraphQL, a subscription is a way to receive real-time updates from the server. Subscriptions allow a client to subscribe to a specific event or set of events, and the server will send updates to the client as those events occur.

Subscriptions are written in the GraphQL query language, and they are similar in structure to queries and mutations. A subscription consists of a set of fields, each of which represents an event that the client is interested in receiving updates for.

Here is an example of a simple GraphQL subscription that listens for new messages in a chat room:

subscription {
  newMessage(roomId: "123") {
    id
    text
    sender
  }
}

This subscription includes a single field, newMessage, which takes an argument (the ID of the chat room we want to listen for messages in). The newMessage field itself has three subfields, id, text, and sender, which specify the data we want to receive when a new message is received.

Once the client sends the above subscription request to the server, a connection is opened between them. Whenever a new mutation happens that creates an unknown author, the server sends information to the client as below:

{
  "newMessage": {
    "id": "123456",
    "text": "Hello everyone, hope you guys will like this tutorial",
    "sender": "Arafat"
  }
}

Conclusion

As you can see, we have successfully gone through the Core Concepts of GraphQL. We understood the concept of Schema and how your clients can interact with the GraphQL server using queries, mutations, and subscriptions. There is still a lot to discover in the Graphqls universe, so feel free to visit their documentation. Thanks for reading this article. I will see you guys in my next article.😍😊