API with NestJS #30. Scalar types in GraphQL

JavaScript NestJS TypeScript

This entry is part 30 of 180 in the API with NestJS

With GraphQL, we model our API as a graph. Within a schema, we have various types of nodes that can relate to each other. While the fields in our query might have sub-fields, at some point, we want to work on concrete data. We refer to the type that describes an individual value as the scalar. It does not have any sub-fields and represents a leaf in the graph. In some way, scalars are similar to primitive values.

A leaf in a graph is a node that does not have any children

GraphQL supports a set of scalar types out of the box:

  • : a signed 32-bit integer
    • can’t hold fractional values,
  • : signed double-precision floating-point value,
    • can hold fractional values,
  • : either true or false,
  • : represents a unique identifier, serialized in the same way as .

Scalar types in NestJS

We’ve already used some of the above in the previous parts of this series.

post.model.ts

An important thing to look into above is how we use the decorator. We don’t have to specify the exact scalar type for strings and booleans. Since we can represent numbers either as an or , we should pass an additional parameter to the decorator.

If we don’t pass the parameter with the type, NestJS by default would use the scalar. We could change this behaviour by setting the numberScalarMode parameter to .

Handling dates with NestJS and TypeORM

Under the hood, NestJS implements additional scalars that we should be aware of:

  • : a date-time UTC string,
    • NestJS uses it by default to represent the type,
  • : a numeric string representing the time and date as the number of milliseconds from the start of the UNIX epoch,
    • we can use it instead of .

To observe the behavior of and , let’s add a field to our .

So far in this series, we’ve been using TypeORM. In the documentation, we can see that it has a decorator. It allows us to access the entity’s insertion time. TypeORM sets its value under the hood.

post.entity.ts

The last thing to do is to modify our model:

post.model.ts

Thanks to doing all of the above, we can now query the creation date of our posts.

GraphQL post creation query

By default, NestJS used the custom scalar. We could change this behavior and use timestamps instead by setting the option.

app.module.ts

Defining custom scalars

Aside from using the built-in types, we can also create our own scalars. As an example, let’s replicate the functionalities of the type.

To do that, we need to create a class that implements the interface. it consists of three methods:

    • its job is to parse the result when sending it to the client
    • parses values received from the client during mutation provided as variables in a JSON format
    • also parsers the values provided during mutation, but in the form of hard-coded values as a part of the Abstract Syntax Tree (AST)

Let’s mimic the scalar that NestJS has under the hood:

timestamp.scalar.ts

We also need to add the scalar to the array in our .

Above, we should look a bit deeper into the method. Its argument is of the type and describes the input that the user added in the mutation.

To check its type, we need to compare the with the exported with the graphql library.

Testing our Timestamp scalar

To create a valid use case for and , let’s add a date field that the client can set. An example of that could be in the entity.

post.entity.ts

We also need to add the new field to the model and the input.

post.model.ts

post.input.ts

First, let’s try out the method. To do that, we need to create a mutation while hardcoding the values:

GraphQL custom scalar parseLiteral

Performing the above mutation causes the method to run with the following argument:

To test the method, we need to pass the values as a set of variables:

GraphQL custom scalar parseValue

Summary

In this article, we’ve looked into scalar types in GraphQL and how to apply them in NestJS. We’ve gone through both the basic scalars and the custom ones built into NestJS. On top of that, we’ve created our own custom scalar. By doing so, we’ve got to know the difference between sending the mutation input with variables and inline values.

Series Navigation<< API with NestJS #29. Real-time updates with GraphQL subscriptionsAPI with NestJS #31. Two-factor authentication >>
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Patrick
Patrick
3 years ago

Will you describe usage of Server-Sent Events?