DEV Community

Cover image for What is GraphQL
Royce
Royce

Posted on

What is GraphQL

       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.
Introduction to GraphQL

       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

       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

       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

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

       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

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

Qldelete

Getting Started

       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

Schema
       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

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

QLquery

QLmutation

       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

To REST or not to REST

       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

Top comments (2)

Collapse
 
oussamamaz profile image
oussamaMAZ

Is there a source to learn Graphql server with express js hhh?

Collapse
 
royce_reed profile image
Royce

GrapgQL documentation has for getting started with various server side technologies including Express. graphql.org/