Full-stack Type Safety with React, GraphQL, and TypeScript

on YouTube ↗35m

" summary

A working todo app wired with React, Apollo, GraphQL and TypeScript demonstrates full‑stack safety: backend schema comes from TypeGraphQL resolvers annotated in TypeScript, the API is deliberately broken by adding a required priority: Float field, the front end runs graphql-codegen generated types and fails at compile time showing the exact missing property, and hot-reload plus codegen surfaces the error before any manual UI test.

AI-written summary · about

" chapters (7)

1. 0:00Start
2. 3:31React Application
3. 4:09Graph Ql Api
4. 6:32Api Breaking
5. 7:42Experimental Decorators
6. 15:57Add a Route Field
7. 22:50State Management

" related talks

• 26mFull Stack Type Safety with React, GraphQL, and TypeScriptRobert Zhu · Nordic.js 2019
• 25mType-safe GraphQL with TypeScriptAaron Powell · OpenJS World 2021
• 27mWeb applications of the future with TypeScript and GraphQLRoy Derks · Conf42 JavaScript 2022
• 57mType safe GraphQL with TypeScriptAaron Powell · NDC Melbourne 2022
• 38mWeb Applications of the Future With TypeScript and GraphQLRoy Derks · React Alicante 2022
• 47mRock-Solid Components with TypeScript and GraphQLMat Warger · NDC Porto 2019
• 25mWeb applications of the future with TypeScript and GraphQLRoy Derks · ConFrontJS 2019
• 30mReact Superpowers with GraphQL and TypeScriptRoy Derks · React Live Online Conference 2020