[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
留言分享你的想法!
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
2021/01/10
2021/01/10
看更多
你可能也想看
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
Thumbnail
「欸!這是在哪裡買的?求連結 🥺」 誰叫你太有品味,一發就讓大家跟著剁手手? 讓你回購再回購的生活好物,是時候該介紹出場了吧! 「開箱你的美好生活」現正召喚各路好物的開箱使者 🤩
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