Top 5 GraphQL Scalars

I’ve recently been taking advantage of building custom scalars to simplify presentational logic across all my API clients. Before I share with you my favorite scalars, let’s talk about what scalars are and what custom scalars can allow you to do.

What are Scalars?

Scalars are another type and represent leaf values of the GraphQL type system. A good way to look at this is through this graph:

The leaves of this graph are the scalars.

Even if you didn’t know what scalars were, there’s a good chance you have used them in GraphQL development.

String, Int, Boolean, Float are all built-in scalars that you can do a lot with out of the box!

But what really interested me about scalars was this excerpt from the GraphQL specification:

GraphQL provides a number of built‐in scalars, but type systems can add additional scalars with semantic meaning.

The semantic meaning leaves it open to the interpretation of the engineers implementing their system!

Why add custom scalars?

Well the goal of leveraging this customization is to unify how data is transferred between your clients and server.

Let’s take an example where you returned a date to the clients as a Float, and you use a library like moment to format it into a display date. What happens to your iOS or Android applications? For them, they would have to convert it to a date object just to convert it back to a string. 3 different clients doing 3 different things to represent the same thing to the user? Sounds like the job for a custom scalar.

Another use case comes with validation. A GraphQL server’s job is to parse incoming requests, validate them, and execute. With custom scalars you can add some type checking for more product specific use cases. For example, let’s say your input type looks like this

input SocialUrl {
  url: String
}

User’s could put any string that may or not be a valid url! A custom scalar for enforcing the shape of this could be useful in your system

input SocialUrl {
  url: SocialMediaUrl
}