Creating a Robust JavaScript Development Experience with Both TypeScript and GraphQL

Typescript testing

Anyone who develops in JavaScript (JS) is familiar with the frustration, and flexibility, that comes with its loose typing. Though loose typing can allow for succinct code and fast development times, it introduces some terrible headaches when working with a team or when trying to maintain or debug an app.

Imagine encountering a variable named itemNumber. Is that variable going to be a number? Or could it be a string? Is it possible that it’s undefined or null? With vanilla JS, it’s impossible to know without tracing through how the variable is created and used in the app.

Using TypeScript to Improve JavaScript

This is where TypeScript enters to save the day. TypeScript is a superset of JS, meaning that it contains the functionality of JS but adds additional tooling and functionality of its own. As the name suggests, the primary contribution to JS is the notion of strong types. Requiring (or rather strongly encouraging) all variables to be assigned types prevent the aforementioned headaches and allow for extensive logical checks before code is even built.

TypeScript Plays Better with GraphQL

All of this sounds great until one needs to develop against an API (Application Programming Interface). An API is a way for an application to interact with a certain system, application, library, etc. RESTful APIs can often contain tens, if not hundreds, of endpoints, all of which may return uniquely shaped data. This means that it’s on the developer to manually write out the expected types for the responses from every endpoint. What’s worse is that APIs can change over time, effectively breaking any handwritten types within the client code.

This is where GraphQL enters to save the day. GraphQL offers an alternative to RESTful APIs, one which intrinsically contains type information about any piece of data that can be requested by the client-side code. What makes GraphQL wildly different than REST is that the client requests only the exact pieces of data that are needed in a particular context. This is in stark contrast to RESTful endpoints which rigidly return a prescribed shape of data.

The Outcome of Successfully Pairing TypeScript and GraphQL

The major takeaway is that, after writing some GraphQL queries on the client-side, one can use any number of community tools to automatically generate the types of expected responses from the GraphQL server. Moreover, the types can be automatically regenerated if any data structures on the backend change.

Combined, TypeScript and GraphQL provide a tremendously robust JS development experience. They allow developers to easily write clean, maintainable code with upfront bug catching, and they allow for predictable interaction with backend APIs.

We at CQL have been thrilled to implement these technologies and hope to see their adoption grow among our many projects. We invite you to contact our team today for more information about how we can help your company improve your site’s overall performance.