Stripe
Course Description
TypeScript offers a delightful authoring experience, but all bets are off once you make an API call and receive an `any` response. We'll build a Twitter App with React and generate TypeScript code based on a GraphQL schema. Combine TypeScript and GraphQL's type systems to create full-stack, fully-type-checked codebases (even the data layer!), making the entire codebase shockingly easy to evolve, refactor and maintain.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Just wrapped up "Fullstack TypeScript (feat. GraphQL & Node.js)" by Mike North on Frontend Masters!
Great workshop on how to get end-to-end type safety across the stack 👼

Ashley Thompson
ashleygthompson
Course Details
Published: May 11, 2022
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 23 minutes
- Mike North introduces the course by providing some personal background, benefits, and downsides of using TypeScript, what material will be covered in the course, and discusses what GraphQL is and what it aims to solve. A Twitter clone will be created using TypeScript and GraphQL to accomplish a full-stack application.
- Mike walks through setting up an Apollo server, discusses the functions of the given server code, and demonstrates querying the server in Apollo studio. A student's question regarding what enforces non-nullable fields is also covered in this segment.
Resolvers
Section Duration: 32 minutes
- Mike demonstrates how to create a resolver to grab the data that the Apollo server will organize and deserialize. A resolver is a function responsible for populating the data for a single field in the schema.
- Mike walks through pulling out the schema from the apollo-server.ts into its schema.graphql file. Getting the resolvers out and breaking them down into smaller sub-objects is also covered in this segment.
- Mike demonstrates adding types to the resolvers to all TypeScript to enforce type checking. Providing a type for the context object created for every new request is also covered in this segment.
Consuming Data
Section Duration: 58 minutes
- Mike demonstrates how to wire up the UI to consume real data from the Apollo graphQL client. A brief walkthrough of the contents of the API request is also provided in this segment.
- Mike walks through how to make a call to the database to replace the fixture data array with new data from the database. This call will pull in the current user and follow suggestions.
- Mike discusses nested data as the concept of relationships and embedding records related to other existing records. Generating updated TypeScript types, setting up context caches, resolvers, nested types, and inner resolvers are also covered in this segment.
- Mike discusses transforming data as data that converts from the database representation to the GraphQL representation. Creating a tweets function and a brief discussion regarding the adapter design pattern are also covered in this segment.
- Mike walks through creating user and tweet inner resolvers and implementing them in the resolvers.ts file. Requesting current user stats and tweets from the database and rendering them to the DOM are also covered in this segment.
Mutations
Section Duration: 44 minutes
- Mike demonstrates adding mutations to the GraphQL schema and implementing mutation resolvers to allow new tweets to be created. The TypeScript compiler option noUncheckedIndexAction can be used to allow the return type the possibility of being undefined.
- Mike walks through modifying the React component ComposePanel, how to fix the resulting UI bug, and answers a few student questions. The tweet data will persist, but Apollo will need to re-fetch the data when clicking the create tweet button.
- Mike demonstrates adding the favorites feature, which involves two mutations creating a liked tweet and deleting a tweet when it is unliked. Running yarn codegen on both client and server, adding a new transform function to the transform.ts file on the backend, and replacing them are also covered in this segment.
App Development
Section Duration: 24 minutes
- Mike walks through implementing favorites interactivity allowing users to like and unlike tweets by clicking the like button. Implementing an async handleFavoriteClick function with error catching is also covered in this course.
- Mike demonstrates populating the trends section of the Twitter clone and discusses the concept of union types. Creating a new transform for the Trend object, a new top-level Query resolver, and a new Trend resolver module are all covered in this segment.
Wrapping Up
Section Duration: 6 minutes
- Mike wraps up the course by answering student questions regarding whether a type could be defined to verify a hashtag key and some things to remember about the cache. Brief closing thoughts for the course are also provided in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops