Fullstack TypeScript (feat. GraphQL & Node.js)

3 hours, 11 minutes CC
Fullstack TypeScript (feat. GraphQL & Node.js)

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
Close

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 23 minutes
  • Introduction
    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.
  • Apollo Setup
    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
  • Resolver
    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.
  • Imported Resolver
    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.
  • Typed Resolver
    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

Mutations

Section Duration: 44 minutes
  • Mutations
    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.
  • Client-Side Mutation
    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.
  • Adding Favorites Feature
    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
  • Favorites UI Interactivity
    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.
  • Using Union Types
    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
  • Wrapping Up
    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.
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

Ashley Thompson

ashleygthompson

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now