How to Create a Full-Stack Web App Using Blazor WASM and GraphQL

on YouTube ↗24m

" summary

Creates a full‑stack employee CRUD app using Blazor WebAssembly with EF Core and SQL Server, exposes a single /graphql endpoint via Hot Chocolate + Banana Cake Pop IDE and generates a C# client with Strawberry Shake. Uses DB‑first models, repository pattern, GraphQL queries/mutations, and the UseFiltering attribute so client-side search filters as you type; forms use Blazor input components and DataAnnotations for client validation. Demo shows add/edit/delete working and live UI updates.

AI-written summary · about

" chapters (11)

1. 0:00Introduction
2. 1:59What is GraphQL
3. 3:02Hot Chocolate tools explained
4. 5:30Blazor WASM setup
5. 8:39GraphQL queries and mutations
6. 10:26GraphQL server config
7. 12:11Blazor client setup
8. 14:57Blazor form validation
9. 16:26Testing with Banana Cake Pop
10. 21:21CRUD demo and real-time updates
11. 23:50Client-side filtering

" related talks

• 01h 01mBuilding real-time applications with Blazor and GraphQLMichael Staib · NDC Oslo 2020
• 50mBuilding real-time applications with Blazor and GraphQLMichael Staib · .NET Summit 2020 Online Conference
• 01h 13mBuilding Modern Applications with GraphQL and #BlazorMichael Staib · JetBrains .NET Days Online 2021
• 51mBuilding real-time applications with Blazor and GraphQLMichael Staib · .NET Summit 2020 Online Conference
• 01h 05mCreating a GraphQL API with ASP.NET CoreMarco De Sanctis · DotNext 2021 Moscow
• 56mBlazor, GraphQL and a headless CMSPoornima Nayar · NDC London 2021
• 57mBuilding modern applications with GraphQL 2021 and beyond in ASP.NET Core 6Michael Staib · NDC Porto 2022
• 01h 01mBlazor, a new framework for browser-based .NET appsSteve Sanderson · NDC London 2020