[Net Core] 與 GraphQL 整合的初次體驗

更新 發佈閱讀 3 分鐘
  1. 首先先開啟一個 Api 專案


raw-image

2 . 接著請安裝以下幾個套件


raw-image

當我們這些套件必備安裝好後,就要開始加入進我們的服務內

首先我們要先知道三種東西,我自己這樣看待

一、Type : 我把他定義為 他就是我們Api回傳的Model,可是我們只是把這Api回傳的Model再跟GraphQL的Model 再次的跟他對接Mapping

二、Query:我把他定義為這就是他所謂的Api,那個他的Request Response我們就在這邊寫上,並且回傳我們Api的Model,他會自動轉變成GraphQL專用的Model

三、Schema: 他就像是定義我們的Api,一旦定義完成之後才會去到Query

我們接下來就來嘗試操作

範例:假設我們今天有書本資料庫,我們要查書,請查關於名為 秘密 的書

操作開始

第一步

建立我們跟資料庫的關連,先建立起Type

先假裝我們的DB,建立DB Model


raw-image

再來建立我們的GraphQL的Type


raw-image

第二步 建立我們的Query,也就是我們API Controller接收後操作


raw-image

這邊我建立一個Api叫做books,並且可以帶入一個參數,再來取得這參數的值並且把這參數待去假的資料裡面查詢,查詢後回傳

第三步 把我們寫的這API 定義起來,讓大家可以找的到它

raw-image

這幾個動作都建立完以後,我們就剩下最後一個地方,也就是Startup

要設定我們的GraphQL設定

Startup Configure


raw-image

Startup ConfigureServices

有兩種方式,一種是自己註冊跟自動註冊,要注意,上面用的註冊BooksSchema物件,如果你是加入ISchema你上面的要使用ISchema,反之則是BooksSchema

raw-image

這樣就大功告成啦,我們就可以執行程式

輸入網址:

Playground - https://localhost:5001/graphql

這時候就可以連進去囉

右邊都有文檔跟定義,大家都可以去看,

左側邊則是你輸入的語法,右邊為顯示的結果,

我要呼叫books並且帶入queryString參數並且是秘密,回來的結果我想要 id,title,content

query{

books(queryString:"秘密"){

id,

title,

content

}

}

結束囉,喜歡可以幫個拍手等等的支持,讓我有多一點動力


留言
avatar-img
Alan & Jane的沙龍
0會員
4內容數
Alan & Jane的沙龍的其他內容
2021/11/09
當我們是一個API專案,我們可能會有 Swagger , 我們有Swagger之後,可能又是用  NJsonSchema NSwag.AspNetCore NSwag.Core 此時在我們的專案因為有了這三個存在,這是在今日時都還有的問題 我們會跳出錯誤, 偵測到 Microsofe
2021/11/09
當我們是一個API專案,我們可能會有 Swagger , 我們有Swagger之後,可能又是用  NJsonSchema NSwag.AspNetCore NSwag.Core 此時在我們的專案因為有了這三個存在,這是在今日時都還有的問題 我們會跳出錯誤, 偵測到 Microsofe
看更多
你可能也想看
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
※ 什麼是Web API API 就是後端開出來讓前端來用的介面,讓前端與後端可以溝通。 API流程: 終端使用者用任何一種裝置進入瀏覽器。 瀏覽器透過 API 向後端發出請求,請求查詢或修改資料。 後端透過 API 收到前端的請求後,取得資料並回應給前端。 前端渲染畫面,終端使用者
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
在 Vue 專案中使用 Apollo Graphql Client 從 API 獲取資料,由於資料結構較為複雜,筆者便跟著網路教學使用 codegen 工具自動化產生 TypeScript 型別定義。在某個元件中,需要使用 defineProps 來撰寫型別定義,結果⋯⋯
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
先前幾篇筆記介紹了網路請求,瀏覽器儲存資料的方式,那麼實務上,前端最常需要發送網路請求的時候,就是透過呼叫 API,去向後端工程師發送/請求資料,所以今天來記錄什麼是 API吧!
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
※ 基本操作:SQL 語法,SELECT, WHERE, CREATE, UPDATE, DELETE。 SELECT:從資料庫中或資料表中指定要選擇的欄位中取得資料,稱之為查詢 (query)。 ※ 語法:要由兩部分構成,第一部分是要 "拿什麼" 資料 (若有多項用逗號隔開);第二部分則為
Thumbnail
🚀 在Gin中整合GraphQL和MongoDB:靈活的數據查詢 隨著Web應用的複雜度增加,開發者尋找更靈活和高效的方式來查詢和操作數據。GraphQL作為一種查詢語言,允許用戶精確地指定他們想要的數據,而MongoDB作為一個靈活的NoSQL數據庫,可以很好地支持這種查詢。結合這兩者,我
Thumbnail
🚀 在Gin中整合GraphQL和MongoDB:靈活的數據查詢 隨著Web應用的複雜度增加,開發者尋找更靈活和高效的方式來查詢和操作數據。GraphQL作為一種查詢語言,允許用戶精確地指定他們想要的數據,而MongoDB作為一個靈活的NoSQL數據庫,可以很好地支持這種查詢。結合這兩者,我
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
Thumbnail
隨著Web應用的發展,前端和後端的需求也在變得越來越複雜。RESTful APIs已經不再滿足當前的需求,而GraphQL作為一個新興的數據查詢語言,提供了更靈活的查詢能力。在這篇文章中,我們將探討如何在Gin中實現GraphQL API,為你的應用帶來現代化的數據查詢。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
Thumbnail
不論是 GraphQL 與 RESTful API 都需要生態系的支撐,才會好用與完整 這篇會先介紹 GraphQL 的生態系工具。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News