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.
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).
But then we decide to remove to remove Harry for whatever reason (sorry Harry). We only need to provide his Id.
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.
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.
After the types we'll set our RootQuery and Mutations.
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.
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)
Is there a source to learn Graphql server with express js hhh?
GrapgQL documentation has for getting started with various server side technologies including Express. graphql.org/