Before GraphQL, developers were able to consume data from an API via REST. While this sounds simple enough to implement, it has two downsides. The first is under fetching. Let's say we want to retrieve data for a list of cars as well as their owners. Using REST, we would have to make multiple calls to two different entry points, one for cars and the other for their owners. Using GraphQL we are able to make a single request to retrieve data via a typed schema. The other drawback is over-fetching. It is often the case that we query for more data than we actually need. With a traditional SQL database, we would receive a whole row of data instead of the few column values we need. GraphQL eliminates the overhead involved by getting the exact data you want.

So what is GraphQL?

GraphQL is a query language for your API. It creates a graph to which you have access and allows you to perform queries and mutations in order to retrieve and update data, preventing under and over-fetching that comes with REST.

We will be looking at a simple application that saves to do notes as an example. All we need for this application is the Apollo Client, GraphQL, and some data which we will have locally stored for ease of understanding. To be more specific we will be looking at client-side GraphQL.

What is Apollo Client?

Apollo Client is a comprehensive state management library for JavaScript that enables you to manage both local and remote data with GraphQL. You can use it to fetch, cache, and modify application data, all while automatically updating your UI.

We will be covering queries, mutations, schemas and finally resolvers.

Queries

A query in GraphQL is very similar if not the same in concept with a query in SQL. It is a way to obtain data from a database or a data source you have.

The query below "getTodoItemsQuery" returns a list of to do items. Each to do item has an id, a title and finally the some content. The gql tag referenced below is a template literal tag stating that the following is a GraphQL query. By default GraphQL queries will always return a data object.

In React, we use hooks as the primary means for executing queries in an Apollo application. TheuseQuery hook returns data, loading and error objects. The data object will contain our to do items and its properties.

Queries are a quick and easy way to retrieve data because it returns data in any shape or form without much overhead.

Mutations

Mutations are a way to update data using GraphQL. They contain arguments to let the server know what to mutate. In the example below, we can see that the "createToDo" mutation accepts input of type TodoInput and returns type Todo. These types are declared in the schema which we will cover shortly.

Similar to useQuery, useMutation is the primary means for executing mutations in React. You can see in the example code below that it returns data, loading and error objects along with a mutate function, "createToDo". Mutations serve as an easy way to manage data and integrates seamlessly with modern day UI frameworks.

Schema

You can think of the schema as a description or a template of the data that clients can request from a GraphQL API. The schema contains both types and inputs. Inputs are mainly used for mutations whereas types are a bit more versatile. They can be used to declare input, query as well as mutation types. Below we have declared a range of types and inputs used in our application. These type definitions are then provided as an argument when instantiating the Apollo server, giving our application access to these types. The schema also ensures that the correct payload is sent and received.

Resolvers

A resolver is a function you define responsibilities for in regards to populating data for fields in your schema. It may act as both your model and data layer containing business logic where you can manipulate data before inserting it into the database. It maps onto your schema and matches against the name of your associated queries and mutations. When our mutation function is called, the resolver is triggered and fires an upsert as a result. For simplicity, we have returned an array of predefined todos, this would usually be returned via a fetch from your database.

Conclusion

GraphQL is a fantastic solution tackling both under and over fetching issues. It's safe, performant and simple to use. Having a large support community behind it and being maintained by one of the world's biggest tech giants, GraphQL continues to help companies scale in the right direction. This example was just an entry point into how it works. Extending from this idea, we can add multiple users and be able to return data in relation to both entities with one single query. GraphQL can be hard to grasp initially but I hope this helped you understand a little bit more about what it's all </about>.