GraphQl: The Big Picture

Hi Guys , in this article we will discuss about a query language for our api called GraphQl. We will divide our discussion into some point, to increase the understanding of GraphQl:

1. History of GraphQl
2. What is GraphQl ?
3. Difference between Rest & GraphQl
4. Benefits of GraphQl
5. Datatypes of GraphQl
6. Queries of GraphQl
7. Architecture of GraphQl
8. Why GraphQl ?
9. Conclusion
10. History of GraphQl ?

GraphQl provides clients the power to ask for exactly what they need and nothing more. GraphQl API’s get all the data,which our application needs in a single request. GraphQl is language agnostic, plenty of client and server libraries are available. GraphQl is a query language for our api which increases multi-team productivity ,Rapid product development, improved performance for Web or Mobile App and reduced cost for Testing and Deployment.

In 2012, Facebook started the GraphQl project to overcome data fetching issues in their native mobile platform. GraphQl was open sourced in 2015 .Ever since then,there has been huge community involvement. GraphQl came into existence due to the need for flexibility and efficiency between client-server communication.

2. What is GraphQl ?

GraphQl is Query Layer for our Api .It has developed as flexible and efficient alternative to REST Api. Let see how Rest Api works before GraphQl:

Rest Api

In Rest Api , we hit what is called a API endpoint for the client and Api returns a massive JSON object with a lot of things in the response ,then after that is what we have been used to for many many years now. So what make GraphQl new, exciting and different let’s see:

GraphQl API

Instead of hitting URL endpoints and getting a massive JSON object back,GraphQl let us write a query to request for exactly the data that we want and receive the results back with just that .GraphQl provides client the power to ask for exactly what they need and nothing more. GraphQl API get all the data our application needs in a single request.

3. Difference between Rest Api & GraphQl ?

Difference between GraphQl and Rest Api

4. Benefits of GraphQl

1. GraphQl increases multi team productivity.
2. Rapid product development.
3. Improved performance in Web and Mobile App.
4. Reduced cost in Testing and Deployment.

5. Datatypes of GraphQl

Types schema is a connect between the client and server in GraphQl.

There are primitive datatypes in GraphQl which are called GraphQl Scalar Types:

Int: A signed 32-bit integer.

float: A signed double precision floating point value.

String: A UTF-8 character sequence.

Boolean: True or False.

Id:Unique identifier used to re-fetch an object or as the key for caching.

Enumeration: These are special scalar type that are restricted to a particular set of allowed values.

Mutation type: Every GraphQl service has a query type .It may or may not have a mutation type .They acts as an entry point into the schema.

Non-Nullable Type: By default each of the case scalar types can be set to null ,to override this default behavior to ensure that a field cannot be null this is used.

6. Queries of GraphQl

There are several Queries ,those are as follows:

Fields: A GraphQl is all about asking for specific fields on object.

Arguments: In GraphQl we can pass arguments to fields .Every fields are nested object which can get it’s own set of arguments .By this we can get rid of multiple Api fetches.

Alias: We can’t query for the same field with different arguments, Hence We need aliases.They let us rename the result of a field with anything we want.

Fragments: Fragments are GraphQl reusable units.They let us build sets of fields and then include them in multiple queries:

Fragments of GraphQl

Operation Name: A meaningful and explicit name for our operation.These are like a function name in a programming language.

Variable: Arguments to fields can be dynamic, GraphQl uses variable to factor dynamics values out of the query and pass them as a separate dictionary:

Variables of GraphQl

Mutations: Mutations are used to make changes to the data (Create,update,delete data) GraphQl assumes side-effects after mutations and changes the dataset after the mutation.While query fields are executed in parallel,mutation fields run in series one after the other.

Mutations in GraphQl

For more details we can check out the official documentation of GraphQl: https://graphql.org/learn/queries/

7. Architecture of GraphQl:

Architecture of GraphQl

Basically GraphQl Client are the layer that talks with server and server response back. GraphQl Server is responsible for creation of Api to handle the query of the client and sends the appropriate data back.We will discuss each of these steps one by one:

GraphQl Client: It handles sending requests(queries) to the server and receiving response(JSON) from the server.It integrates with our view components and updates the Ui. GraphQl Client is also responsible for caching Query results,Error handling ,schema validation,local state management and caching pagination.

GraphQl Server: In simple terms a GraphQl Server receives the query from the client and responds back. GraphQl Server implements this using resolve function.Resolve function is a function that resolves a value for a type/fields in the GraphQl Schema. GraphQl execution engine passes query from client,validate schema ,return json response and executes resolve function for each fields by Batch resolving. By making Batch request,we ensure that the backend make multiple request for the same items over and over again.

Database to GraphQl Server: Prisma sits between the GraphQl Server and the databases. Prisma replace traditional ORM’s and simplifies database workflows.Data access layer that makes it ensures that Api Server will talk to Database through Prisma.

8. Why GraphQl ?

1. GraphQl performs Declarative Data fetching ,which avoids round trips to fetch data,thus there is no over fetching or under fetching of data.We specify exactly the data we need,as GraphQl gives us exactly what we need for.
2. GraphQl is a strictly typed languages,and it’s schema should have type for all object that it uses.The schema serves as a contract between client and server.
3. GraphQl relies on a query language with a type system ,which makes code predictable. Frontend and backend team can work independently which facilities building high quality client tools,It will also provide earlier detection of errors which speeds the development.
4. GraphQl offers a lot of flexibility , there is no versioning and non breaking changes.
5. Team can work independently ,Front-end team and Back-end team can work independently, with strictly typed schema,teams can work in parallel. Frontend can continue work with mock version of Api , can evolve there api without versioning,can add new fields and can also change type of GraphQl Api without any code break. GraphQl provides application continuous access to new features.Developer don’t have to maintain multiple versions of the Api.
6. GraphQl provides modern ecosystem tools. Tools like GraphiQl,IDE provides excellent developer experience.There are plenty of GraphQl clients for Ui framework(Apollo).Lots of server side libraries ,client side libraries services across several languages are available for GraphQl.
7. GraphQl is also cost effective.It rapid up product development cycle.Multiples team work in parallel.It also helps developer to have self documentation of Api. Plenty of hours saved from writing elaborate Api documentation.It also save money with minimal trips ,it’ s easy to onboard developers on GraphQl.

9. Conclusion:

So it’s a basic article on GraphQl,to get the big picture of GraphQl to start working with it.Hope this article has given a detailed overview of what is GraphQl and the architecture of GraphQl. We can go through the documentation for more details it’s really nice and helpful: https://graphql.org/learn/

HAPPY CODING…:)