How does GraphQL get the data from the database?

GraphQL is a hip and trendy framework from Facebook that all the cool kids are using.

REST, on the other hand, has been here for many years. It’s not perfect but it’s a safe option. Noone has got fired for choosing REST.

So, is it worth switching out REST in favor of GraphQL?

To be able to make a good decision, we need to learn how GraphQL works.

One thing that confuses many is how it gets the data from the database. In this article, I will go through how the server process a GraphQL-query from the client, and how it decides what data to send back to the client.

What is GraphQL

If you have never heard about GraphQL before, I recommend to go to the official site and browse through the first page. You can find a nice graphical introduction there.

GraphQL on the backend

When setting up GraphQL on your backend you basically define two things: the type definitions for your queries and the resolver functions.

Type definitions

The type definitions tell the GraphQL library what format your queries should be on. It automatically gives an error message when the input query is in the wrong format or if the query asks for fields that do not exist.

The language used for defining the type definitions is the “GraphQL schema language”. This is an example:

<code class="language-graphql">type Color {
  name: String,
  htmlCode: String
}

type Phone {
  name: String,
  color: Color,
  imageUrl: String,
  description: String
}



It uses types that you recognize from javascript such as String, Integer, etc. You can also create objects that can reference other objects like I did in the example above (Phone references Color).


#### The query type


Every GraphQL service must have one query type. _The query type defines the entry point of every GraphQL query_. This is an example of a query type:


<code class="language-graphql">type Query {
  phone(brand: String, model: String): Phone
  tablet(brand: String, model: String): Tablet
}

You can query phones and/or tablets! An example query looks like this:

<code class="language-graphql">query {
  phone("apple", "iphone-x-64gb-black") {
    name, color
  }
}



The query type is important to understand the next important GraphQL concept: the resolver functions.


#### Resolver functions


All objects inside the Query type has a corresponding resolver function. The resolver is just a simple JavaScript function which takes the input parameter from the query. The data the function returns is the data that is returned by the query.

The resolver functions from our query previously defined can be as simple as this:


```javascript
    {
      Query: {
          phone: (root, { brand, model }) => {
              // the root variable is often not used
              // brand and model variable could be used to
              // look up the correct data from the database.
              // In this example we just use static data:
              return {
                  name: "iPhone",
                  color: {
                      name:"Space grey",
                      htmlCode: "#000000"
                  },
                  imageUrl: "",
                  description: ""
              };
          },
          tablet: (root, { brand, model }) => {
              // return some data here...
          }
      }
    }

Usually, you do something fancier than serve static data. For example, you might serve data from a database.

- Do I need to reimplement my whole backend in Node to be able to use this?

No! You can implement your GraphQL backend in almost any backend language. Look at this list of officially supported libraries for backend languages.

GraphQL is a protocol specification. If you can’t find an official supported library for your backend language you can implement it yourself.

What’s next?

Follow me on Twitter to get real-time updates with tips, insights, and things I build in the frontend ecosystem.

tags:

graphql