What is GraphQL
Tags: graphql, api, beginners, database
Published: 2022-06-23 20:04:44

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; How you ever wondered, “I wish there was a way I could query an API without getting a bunch of unnecessary data?” Well, you might be interested in GraphQL. “What is it?”, you ask. 
I've seen heard it mentioned on blogs and videos (it should be mentioned that I'm an intermediate learner and my course-load until recently was chosen for me), never really giving it much thought. Then I decided to investigated. 

> GraphQL is a query language for your API, and a server-side runtime for executing queries using a type system you define for your data. GraphQL isn't tied to any specific database or storage engine and is instead backed by your existing code and data. A GraphQL service is created by defining types and fields on those types, then providing functions for each field on each type.
<sub> – [Introduction to GraphQL](https://graphql.org/learn/)</sub>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; I've seen heard it mentioned on blogs and videos (it should be mentioned that I'm an intermediate learner and my course-load until recently was chosen for me), never really giving it much thought. Then I decided to investigate. 

#####_Comparing to REST API_
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; So, I can use GraphQL to query the data from an API. How is that different from the standard http methods like `GET`, `POST`, `PATCH`, `PUT`, and `DELETE`? GraphQL uses different methods called Query, Mutation, and Subscriptions. 

_Query_

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; In GraphQL, query is used to fetch data from the data store like a `GET` request in a REST API. The difference is how GraphQL is set up and how much of the data to request from the endpoint. In the dataset below, we have a dataset of `customers` which could potentially be very large. 

![graphQL-query](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ia5b164opj66c47li4w4.jpg)

We, however, only need their names and ages in this case, so that's all we query. That's the appeal of GraphQL. Like everything, there's usually a drawback but we'll get to that in a bit.


_Mutations_

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mutations are ways to change data using GraphQL, like `POST`, `PUT`, `PATCH`, and `DELETE`. If we wanted to add, change, or remove from our data we would use a mutation.

Notice here we are adding "Harry" to our customer list by specifying which fields to add (and only those will get added).

![QLadd](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyv64da8c9rk299pjxm3.jpg)

But then we decide to remove to remove Harry for whatever reason (sorry Harry). We only need to provide his Id.

![Qldelete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndqafqlshovku6sc9wzd.jpg)

#####_Getting Started_
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Getting setup to use GraphQL is straightforward. Below is just a basic server setup with express. But GraphQL is compatible with many different 
architectures and languages. If we went to `localhost:400/graphql` in our browser, we would get to the "GraphiQL" UI we saw above 
because we set it in our instance `graphiql:true`.


![QLserver](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5djjwwskvjmtaqpeuf8d.jpg)

_Schema_
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Now that we have our server set up we can define a basic Schema and type out the fields in out data set. We start by instantiating a `GraphQLObjectType` and define each field. In this case we're using basic types `GraphQLString` and `GraphQLInt` but there are others as well.

![QLtypes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g0yk860bd2hh6sastvp.jpg
) 

After the types we'll set our `RootQuery` and `Mutations`. 

![QLquery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6otst66by1ydxzkwnmg.jpg)  

![QLmutation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cd31bis1upavnv4rem3t.jpg)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; There's a lot happening here so let's go over it quickly. We start with a `GraphQLObjectType` like we did for `CustomerType` and for each field, in this case of the `RootQuery`, `customer` and `customers`, we'll have a resolver, which essentially does the heavy lifting. For the `Mutation` we do basically the same thing with the `addCustomer`, 
`deleteCustomer`, and `editCustomer` fields. If we want a value to be required, we wrap with the `GraphQLNonNull` type. After we're done, we export inside  `GraphQLSchema` and we're well on our way.


![QLschema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8k7nahx0ngovqp0nyfm.jpg)

##### _To REST or not to REST_
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; When should you use GraphQL vs http? I would say it depends on the side of your project and 
the size of the data set you want to access. The benefit of GraphGL is that it tends to be faster because its return less data; Worth it if you want to scale your project and the data you want to access has a lot of info you don't need. Conversely, REST API are compatible with all browsers and have been around for longer, has better error handling, and built-in caching. GraphQL error handling is lacking, and caching must be set up manually. GraphQL is new and shiny and has real potential. REST is old and trusted. So, take your pick. Good hunting.

Links: 
https://graphql.org/
https://github.com/royce-reed/graphQL-demo