Fullstack Type-Safety with GraphQL and Hasura

Rate this content
Bookmark

In this workshop, we’ll learn how to build a type-safe chain from API to the client with generated TypeScript tooling. Creating a type-safe environment for development reduces the number of bugs that get shipped to production, but also creates faster feature development once the ground-work is in place.

This will be a fast-paced workshop covering an opinionated stack of features, but in the end, you’ll have a functioning framework for eloquent and type-safe development.

Table of contents

- We’ll begin creating a GraphQL API on Hasura Cloud and define some basic access controls and actions.
- Then we’ll scaffold a TypeScript-ready framework with NextJs.
- With the framework and API in place, we’ll generate an SDK using GraphQL Zeus.
- Lastly, we’ll generate some type-safe state management wrappers with easy-peasy for implementing a basic login and authentication flow.

This workshop has been presented at React Advanced 2021, check out the latest edition of this React Conference.

FAQ

GraphQL Zeus is a library that generates typings and a local SDK for GraphQL endpoints, facilitating a tightly coupled interaction between the GraphQL server and front-end applications. It allows for querying data in a structured, predictable way with the convenience of type checking.

The Apollo Client in Next.js is configured to work with server-side and client-side data fetching. It includes setting up a fetch policy, handling cookies for authentication purposes, and integrating with Next.js's hydration features for efficient data management across client and server.

Easy Peasy is used for state management in the application, providing a straightforward way to manage global state with hooks. It allows for defining models, actions, and thunks, making it easier to handle state changes and asynchronous operations in a React application.

The issue with the HTTP cookie not being set during the demonstration could be related to the browser or server settings, such as security configurations that prevent cookies from being set properly. It might also involve issues with the response handling in the application code.

Debugging in GraphQL applications can involve inspecting network requests and responses, checking the GraphQL queries and mutations for errors, and using developer tools to monitor the state and performance of the application. Proper logging and error handling strategies are also crucial.

Jesse Martin
Jesse Martin
203 min
19 Oct, 2021

Comments

Sign in or register to post your comment.
Video Summary and Transcription
This workshop explores back to front type safety in building front-end applications using TypeScript and Next.js. It covers setting up a cloud project with Hazura, creating login and signup actions, handling API endpoints with a Next.js application, and querying and displaying user data using Apollo Client. The workshop also includes setting up state management with easy peasy and debugging authentication and state management issues. Overall, it provides insights into building future-proof, stable, and secure apps using these tools and technologies.

1. Introduction to Back to Front Type Safety

Short description:

In this workshop, we will be exploring back to front type safety. We will generate a GraphQL layer for type safety in building front end applications using TypeScript and Next.js. TypeScript helps reduce bugs in production code. Let's learn how to build more future-proof, stable, and secure apps using these tools and technologies.

My name is Jesse. I am going to be leading, working with you today in this workshop. And I am a developer outreach person for Hazura. Hazura is a cloud provider and beta layer provider doing all kinds of amazing things. If you are not familiar with us, definitely check it out. We'll be having a look at some of what it does today. And this is the back to front type safety workshop.

What does that mean? That means that we are starting with a concept of generating a GraphQL layer that is going to be our type starting point. And we'll be using that to generate an SDK to essentially give us type safety for building front end applications using a TypeScript application for Next.js.

Now, here's some critical pieces to know about that process. One is, I'm not a TypeScript guru. So, I'm like the sweet spot of what TypeScript is actually supposed to be solving. And maybe many of you are as well. TypeScript is actually helping us produce less bugs in our code that we ship to production. So, there will be some cases where maybe even many of you know the answer better if a TypeScript error arises. And in that case, I would love to have you let me know. I'm not proud. I'm not going to pretend like I'm the TypeScript person. I am a GraphQL person. I am a data modeling person. So, questions around that, I'm definitely happy to help with. But this is basically all of us learning how do we build apps in a more future proof, more stable, more secure way going forward with some tools and technologies that really have provided a lot of stability and yeah, type safe footprint for the community as a whole. So, that's basically the premise.

2. Introduction and Workshop Guidelines

Short description:

We're going to start from scratch and build this together. Feel free to turn on your cameras, ask questions, and code along. Let's make this a collaborative experience.

What I have, if you'll see the GitHub repo, we're going to start from scratch. And as we go through, I will be pasting code both inside of the, you'll be seeing the code inside of the window. We'll build this together. And then I'll be making most of that code available through the repo. And what I'm wondering, because at the moment, nobody else is turning on their cameras. So, it may just be, you know, a bit of watching me code today from what it's looking like. Hey, I've got somebody.

What we may do is I may just start to flesh out this repo as we go through and then we'll be able to kind of keep pushing it forward. So, I really appreciate having the first camera on. This is a casual workshop. This is not a here's my slides and please don't ask me any questions. Everybody is allowed to turn on the cameras. You're allowed to interject, raise your hands, have a question. We've got breakout rooms available. If there's a spot where we say, hey, let's go ahead and take five minutes and let, we'll break it up into smaller groups to kind of figure out what we're doing. But it's meant today that everybody can kind of code together. So, does that sound good? Are there any questions before I get started? I'm looking at Zoom. I'm looking at Discord.

Watch more workshops on topic

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced 2022React Advanced 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Full Stack Components
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
RedwoodJS: The Full-Stack React App Framework of Your Dreams
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: The Full-Stack React App Framework of Your Dreams
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.