jiaming0708 / graphqldemo

使用 .Net Core 整合 GraphQL 並且使用 Angular 串接

介紹

示範如何使用 .Net Core 3 架設 GraphQL，並且使用 Angular 作為前端框架串接

可以根據commit來一步一步的了解每一個階段應該要怎麼實作

前後端分為兩個專案

• backend (.net core)
• frontend (angular)

backend (.Net Core)

EF Core 3 搭配 GraphQL 3 作為範例，示範如何在 .Net Core 3 中使用 GraphQL 的技術

從 EF 的建置一路到 GraphQL 建置都有放進去commit之中，大家可以一步一步的跟著操作

package介紹

name	version
Microsoft.EntityFrameworkCore	3.0.0
Microsoft.EntityFrameworkCore.Sqlite	3.0.0
GraphQL	3.0.0-preview-1282
GraphQL.Server.Transports.AspNetCore	3.5.0-alpha0033

目錄結構

• Controllers: restAPI接口
• GraphModels: 所有GraphQL需要用到的物件設定
• Models: DB物件定義
• Reporsitories: EF資料串接

執行

可以使用 cli 指令（請記得切換目錄），或者使用 VS 執行

dotnet run watch

frontend (Angular)

使用 apollo-angular 套件連接 graphql server

設定

backend的url設定為 https://localhost:5001/graphql

若endpoint不同請到 graphql.module.ts 中的 uri 修改

執行

yarn start

參考

• EF教學
• GraphQL 官方文件
• GraphQL for .NET
• GraphQL for .NET - Subscription Transport WebSockets
• Apollo Angular
• GraphQL for .NET sample project1
• GraphQL for .NET sample project2
• GraphQL 你好你好