Node.js

Getting Started With GraphQL

In this article, we will learn about the basics of GraphQL like What it is? How it is used? etc

What is GraphQL?

GraphQL is a query language and server-side runtime for API that prioritizes giving clients exactly the data they request and no more. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.

GraphQL has a lot of features, like:

  • You write the data that you want, and you get exactly the data that you want. No more over-fetching of information as we are used to with REST.
  • It gives us a single endpoint, no more version 2 or version 3 for the same API.
  • GraphQL gives API maintainers the flexibility to add or deprecate fields without impacting existing queries.
  • When we request GraphQL queries to the server, the server returns the response in a simple, secure, and predictable shape. So, it facilitates you to write a specific query according to your requirement. This makes GraphQL really easy to learn and use.

Why use GraphQL?

We no longer have to worry about things like response codes and planning out our urls like

/project/v1/data1/youGetThePoint, /project/v2/data2/youGetThePoint.

We have not to worry about the endpoints,

A GraphQL architecture like,

What is Query and Mutations in GraphQL?

A GraphQL query is used to read or fetch values while a mutation is used to write or post values. In either case, the operation is a simple string that a GraphQL server can parse and respond to with data in a specific format.

The syntax to define a query is as follows :

query{
  me {
    name
  }
}

Could produce the following JSON result:

{
"data": {
  "me": {
    "name": "GraphQL"
   }
 }
}

one more thing – the query above is interactive. That means you can change it as you like and see the new result.

Query with Arguments:

GraphQL would already be a very useful language for data fetching. But when you add the ability to pass arguments to fields, things get much more interesting.

{
  me(id: "1000") {
    name
    height
  }
}

Could produce the following JSON result:

{
  "data": {
    "me": {
      "name": "code hubs",
      "height": 1.72
    }
  }
}

Mutations:

Mutation queries modify data in the data store and return a value. It can be used to insert, update, or delete data. Mutations are defined as a part of the schema.

The way you’re going to modify data on the server and get updated data back (create, update, delete).

Just like in queries, if the mutation field returns an object type, you can ask for nested fields. This can be useful for fetching the new state of an object after an update. Let’s look at a simple example mutation:

The syntax of a mutation query is given below :

mutation CreateReviewEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

Could produce the following JSON result:

{
  "data": {
    "createReview": {
      "stars": 5,
      "commentary": "This is a great movie!"
    }
  }
}

What is Schemas and Types in GraphQL?

GraphQL is a strongly typed language. Type System defines various data types that can be used in a GraphQL application. The type system helps to define the schema, which is a contract between client and server.

type Character {
  name: String!
  appearsIn: [Episode!]!
}
  • Character is a GraphQL Object Type, meaning it’s a type with some fields. Most of the types in your schema will be object types.
  • name and appearsIn are fields on the Character type.
  • String is one of the built-in scalar type.
  • String! means that the field is non-nullable.
  • [Episode!]! represents an array of Episode objects. Since it is also non-nullable

Schemas:

A GraphQL schema is at the core of any GraphQL server implementation. It describes the functionality available to the client applications that connect to it. We can use any programming language to create a GraphQL schema and build an interface around it.

In GraphQL, the Schema manages queries and mutations, A schema defines a GraphQL API’s type system. It describes the complete set of possible data (objects, fields, relationships, etc.) that a client can access.

schema {
  query: Query
  mutation: Mutation
}

To learn more about GraphQL, check the official documentation.

I hope this article helps you and you will like it.

Please give your valuable feedback and if you have any questions or issues about this article, please let me know.

Hit Sutariya

I'm Web Developer at Vision Infotech. Strong in design and development with intuitive problem-solving skills. Proficient in Python, NodeJs, ReactJs, BOOTSTRAP, CSS, and JAVASCRIPT. Passionate about implementing and launching new projects. Ability to translate business requirements into technical solutions.

Recent Posts

Testing hk

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Operation

Testing

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

Create and Used PIPE in angular

In this article, we have to show Create and Used PIPE in angular

2 years ago

TETS NEW

test

2 years ago