Introduction to GraphQL
GraphQL is a query language for API that executes queries by using a system with a definition of data on the server-side. It’s not linked with any particular type of database or storage engine. It even makes API calls flexible and independent from database implementation.
There are three taglines:
- Describe your data
- Ask for what you want
- Get predictable results
Way to implement GraphQL
We can define GraphQL as a service that is created by mention types and fields on those types, that further define functions for each field on each type. For example, a GraphQL API’s that gives us a to-do list that might look something like below:
//mention types and fields
type Query {
list: Todo
}
type Todo {
id: ID
name: String
}
//define functions
function Query_list(todo) {
return todo.getList();
}
function Todo_name(todo) {
return todo.getName();
}
Once a GraphQL service is running (typically at a URL on a web service), it can be sent to GraphQL queries to validate and execute.
For example the query:
{
list {
name
}
}
Could produce the JSON result:
{
"list": {
"name": "Need to clean the house",
"name": "Drink milk"
}
}
History
Facebook started using GraphQL in 2012 in its native mobile apps. Interestingly though, GraphQL has mostly been picked up to be used in the context of web technologies and has gained only little traction in the native mobile space. Later on React.js Conf 2015 Facebook announced to make it open source.
Who’s using GraphQL?
Nowadays, GraphQL is used by lots of companies such as GitHub, Twitter, Yelp and Shopify – to name only a few.
Core Concepts
Schema Definition Language (SDL)
GraphQL has schema define for an API. The syntax for writing schemas is called Schema Definition Language (SDL).
Here is an example of how we can use the SDL to define a simple type called User:
type User {
name: String!
mobile: Int!
}
This type has two fields, they’re called name and mobile and are respectively of type String and Int. The !following type means that this field is required.
It’s also possible to express relationships between types. In the example of a recipe sharing platform, a User could be associated with a recipe:
type Recipe {
name: String!
ingredient: String!
chef: User!
}
In reverse, the other end of the relationship needs to be placed on the User type:
type User {
name: String!
mobile: Int!
recipes: [Recipe!]! // Array of recipes related to particular chef
}
Query
In REST APIs, there are specific endpoints to fetch the data with HTTP verbs such as GET, POST, PUT with different URL’s. But in GraphQL there is a single endpoint which is POST HTTP verb. That means the client needs to send more information to the server to express its data needs – this information is called a query.
Basic Queries
For example:
{
allUsers {
name
}
}
Result
{
"allUsers": [
{ "name": "John" },
{ "name": "mike" },
{ "name": "Marry" }
]
}
Notice that each person only has the name in the response, but the mobile is not returned by the server.
If the client also needs the person’s mobile, all it has to do is slightly adjust the query and include the new field in the query’s payload:
{
allUsers {
name
mobile
}
}
Result
{
"data": {
"allUsers": [
{
"name": "John",
"mobile": 123456789
},
{
"name": "mike",
"mobile": 0987654321
},
{
"name": "Marry",
"mobile": 1633434343
}
]
}
}
Mutations
We need to modify the data of the server typically the operations are below. In GraphQL, these changes are called mutations.
- creating new data – insert
- updating existing data – update
- deleting existing data – delete/ destroy
Mutations follow the same structure as queries, but they always need to start with the mutation keyword. Here’s an example of how we might create a new User:
mutation {
createUser(name: "Ellen", mobile: 456234978) {
name
mobile
}
}
Result
{
"data": {
"createPerson": {
"name": "Ellen",
"mobile": 456234978
}
}
}
Subscriptions
If we need a real-time connection with the server to get an immediate response to any event, then we can use subscriptions. For instance, a chat system, web notifications, transactions, webhooks, etc. To implement real-time events, we need stream connection with servers like Web sockets or other third party subscriptions of events.
Whenever an event happens on the server, it will push the message to the subscriber in the client-end.
Subscriptions are written using the same syntax as queries and mutations. Here’s an example where we subscribe on events (recipeLike) happening on the Recipe type:
subscription {
recipeLike {
name
liked_by
}
}
A connection is opened between client and server when a client sent a subscription to a server. Then, whenever a recipe is liked by the user , the server sends the information about this to the client:
{
"recipeLike": {
"name": "Fried Chicken with soup",
"liked_by": 23
}
}
We can interact with the GraphQL server to fetch/send the data using a tool called GraphiQL. That’s all for the introductory parts of GrahpQL.