Achieving end-to-end type safety in a modern JS GraphQL stack – Part 1

Read Time:5 Minute, 15 Second

In this article, we will create a simple GraphQL application, a message board, by combining many recent open-source technologies. This article aims to be a showcase of technologies that work well together rather than a complete tutorial on project setup. It is however a long read, so we decided to split it in two parts to make it easier to read.

What is end-to-end type safety?

Type safety is the property of a program that guarantees that all value types are known at build time. It prevents a lot of bugs from happening before running the program. The most common way to achieve type safety in a JavaScript project is to use TypeScript:

When using TypeScript in a project, you get type safety in this very project. End-to-end type safety, on the contrary, is achieved when several projects interact together (e.g., with an API) in a type-safe way.

We will build a message board relying only on type-safe technologies: TypeScript for the API and the application, GraphQL as a way to interact between them, and a SQLite database.

Data and type flows

The data flow of an application is the way data travels and is transformed throughout the application. It is usually represented by a directed graph like this one:

Database -> API -> App” loading=”lazy” width=”884″ height=”164″><figcaption>Dataflow diagram</figcaption></figure>
<p><!--kg-card-begin: markdown--></p>
<p>Since data has a type, <strong>there also exists a type flow, which is the path of types through said application.</strong></p>
<p>Here, our data flows from left to right, with the database as the data source. Our types follow the same path, with the database schema as the source of types. This is why I prefer code-first over schema-first GraphQL APIs: the data and type flows overlap.</p>
<p>I annotated the diagram with the technologies we will use in this article, and we will set up these technologies from left to right too.</p>
<h2 id=Project setup

If you want to have everything working by the end of this article, you can follow the steps below. Otherwise, you can skip to the next section.

If you don’t have Node or Yarn on your machine, you can install them easily with Volta:

We use Yarn 4 because it ships with a few tools to manage monorepos that we will use later.

Prisma

Prisma is an ORM for Node.js and TypeScript, focused on developer experience. Among all of its features, Prisma offers a top-notch type-safe database client.

The last command installs the following tools:

This command creates a few files, but the most interesting one is prisma/schema.prisma. Prisma offers to describe a database through a schema file: we will use this file to have Prisma create the tables for us.

This model declares that we want a Post table with three columns. Our database doesn’t exist yet, so let’s create it:

Everything is up and running! Prisma created a SQLite database for us in packages/api/prisma/dev.db.

Let’s try to interact with it; create a file named packages/api/src/index.ts with the following code:

To run this code, we will need to complete the project setup:

1. Create a tsconfig.json file in packages/api

Let’s make use of the preset we installed earlier:

2. Update the package.json

The following lines tell Node.js that we write ECMAScript modules rather than CommonJS modules. In other words, we will use import rather than require(). We also define two package scripts to make our lives easier.

3. Fasten your seatbelt – we’re ready for takeoff

You should see your first post printed in the console. Hello World!

Prisma types all the arguments and return values, allowing TypeScript to catch typos and provide relevant autocompletion. You can ensure that TypeScript does its job by removing the title or body of the post.create call and then run yarn build in the directory; you should see something like this:

We’re done with the database part; let’s move on to the backend.

Pothos

Pothos is a breeze of fresh air when it comes to building GraphQL APIs. It is a library that lets you write code-first GraphQL APIs with an emphasis on pluggability and type safety. And it has an awesome Prisma integration! (I am genuinely excited about this one, it makes my life so much easier.)

We will add a GraphQL API on top of our database, with a query to get articles and a mutation to create a new one.

Let’s install Pothos and Yoga in the packages/api directory:

And let’s also create a few files to define a simple GraphQL API:

src/schema.ts

This file will contain our queries and mutations. It’s a good practice to split the schema file into several files to allow it to scale, the Pothos documentation has a dedicated section about it, but we will keep it simple for now.

This is enough to declare a type, a query, and a mutation.

You will soon be able to read the resulting schema in build/schema.graphql; it will look like this:

src/index.ts

This file will be the entry point of our application. It creates the GraphQL server and starts it.

src/post-build.ts

This file is not necessary to run the application, but it will come in handy to have a simple way to generate the schema file.

Update the build script in package.json

And we’re all settled! You can run yarn dev if it’s not already running and go to localhost:4000/graphql to play with the GraphQL API. Behold the magnificent GraphiQL interface! It looks really nice compared to its previous version, doesn’t it?

You can try fetching and inserting data with the following queries:

A screenshot of GraphiQL, a GraphQL IDE
GraphiQL, a GraphQL IDE

Things are working well… Let’s make them look good!


This is the topic of the second part! We will create a simple frontend to interact with the endpoint, with complete type-safety at build time.

See you soon 😉

Source: https://escape.tech/blog/achieving-end-to-end-type-safety-in-a-modern-js-graphql-stack-part-1/

WP Ad Inserter plugin for WordPress

Tag Cloud

Java Java Logical Programs OTP Generation in Java python Recursion youtube video ASCII Upper and Lower Case blockchain javascript graph learn to code software development Successful Software Engineers breadth first search Java Array Programs Java Programs Uncategorized android ios programming kotlin web-development django data sql cybersecurity database swiftui serverless aws swift rust react background-position gradients loader mask grid nth-child pseudo elements indieweb WordPress Print Array without brackets C++ factorial Java String Programs Final Keyword Static Variable Axie Infinity Cryptokitties NFT games tool inserting MISC Tips Codes python code python projects python3 system info python project Bigginers How to Do Integrations Payment Gateways PHP checkout page in php Implement stripe payment gateway in Step by step in PHP integrate stripe gatway in php mysql payment gateway integration in php step by step payment gateway integration in php step by step with source code payment gateway integration in website PHP Integrate Stripe Payment Gateway Tutorial PHP shopping cart checkout code shopping cart in php stripe php checkout PHP/MySQL/JSON best international payment gateway does google pay accept international payments how to accept international payments in india paytm payment gateway razorpay codeigniter github razorpay custom checkout github razorpay get payment details razorpay integration in codeigniter github razorpay international payments Razorpay payment gateway integration in CodeIgniter razorpay payment gateway integration in php code Razorpay payment gateway integration with PHP and CodeIgniter Razorpay payment gateway setup in CodeIgniter Library & Frameworks Tips & Tricks UI/UX & Front-end coding birds online html code for google sign in login with google account in PHP login with google account using javascript login with google account using javascript codeigniter login with google account using php login with google account using php source code
dev.to is for webdevs and beginners – I have data to prove it Previous post dev.to is for webdevs and beginners – I have data to prove it
Reactjs Protected Route Next post Reactjs Protected Route

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.