Blazor API Client using REST & GraphQL APIs – Full Course

Les Jackson

In this step-by-step tutorial I take you through how build a Blazor WebAssembly (WASM) app that will allow you to call both REST & GraphQL APIs.

This video includes:

– Application architecture overview
– Blazor theory and core concepts including WebAssembly, SignalR and websockets
– Building Blazor Components
– HttpClient & HttpClientFactory
– Building Data Service to call REST & GraphQL APIs

Level: Intermediate

📕 My Book: https://www.apress.com/gp/book/9781484262542
🤩 Patreon Site (Exclusive Member Benefits!): https://www.patreon.com/binarythistle
📕 Webhooks Course on Udemy: https://www.udemy.com/course/webhooks-with-dotnet-5/?referralCode=707A8D23F3533419E78F
💻 GitHub Repo: https://github.com/binarythistle/S04E02—Blazor-API-Client
🔗 DTO Class Construction: https://app.quicktype.io/
🔗 Open Iconic: https://useiconic.com/open
🔗 Blazor Event Handling: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-5.0
🔗 Bootstrap Course: https://www.udemy.com/course/bootstrap-4-from-scratch-with-5-projects/
🔗 Insomnia Client download: https://insomnia.rest
🔗 JSON Editor Online: https://jsoneditoronline.org/
🔗 Newtonsoft Vs Microsoft: https://docs.microsoft.com/en-us/dotnet/standard/serialization/system-text-json-migrate-from-newtonsoft-how-to

⏲️ Time Codes ⏲️

PART 1 – INTRODUCTION
– 1:20 Welcome
– 2:29 Demo
– 7:00 Course Overview
– 9:30 Solution Architecture
– 12:13 Ingredients

PART 2 – THEORY
– 13:13 What is Blazor?
– 17:58 Why use Blazor?
– 19:10 Size by Size – the 2 flavours of Blazor
– 23:33 Blazor Server Closer Look
– 26:28 Blazor WASM (Client) Closer Look

PART 3 – CODING PART 1 – OUR FIST COMPONENT
– 29:46 dotnet new… (Start the prject build)
– 32:25 Project anatomy
– 47:55 A look at our first Component
– 49:21 Our Component UI
– 1:00:47 Adding UI Events
– 1:05:46 @Code – Adding our methods and properties
– 1:13:37 Error handling

PART 4 – CODING PART 2 – STARTING API CALLS
– 1:15:29 A look at our APIs
– 1:18:10 Exercising our APIs with Insomnia
– 1:29:47 A look at the “Fetch Data” Component
– 1:33:47 Working with JSON & DTOs
– 1:46:58 Calling our REST API
– 1:54:02 Separating Concerns
– 2:00:26 Adding an appsettings.json file
– 2:05:14 HttpClient & HttpCLientFactory

PART 5 – CODING PART 3 – DATA SERVICES
– 2:08:32 Creating our “Launches” Component
– 2:13:04 Introducing Data Services with HttpClientFactory
– 2:24:57 Our REST Data Service
– 2:28:54 Using out Data Service
– 2:32:46 Revisiting the GraphQL Payload
– 2:35:00 A new DTO
– 2:40:35 GraphQL Data Service

PART 6 – WRAP UP
– 2:56:33 Wrap up and Final thoughts
– 3:58:06 Patreon Supporter Credits