當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

GraphQL 学习

發布時間：2025/3/21 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 GraphQL 学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

GraphQL 學習

一、什么是GraphQL

一種用于 API 的查詢語言

二、學習GraphQL

開始擼碼學習

1.寫一個 server.js 文件

遇上錯誤如上:項目名稱不能使用 grapql，修改成 my-graphql

2.啟動項目測試

命令: node server.js

遇上端口占用問題，停掉或者改用其他端口。

相關命令: lsof -i :4000kill -9 端口號（上圖為,47806）

如上所示，啟動成功。訪問地址: localhost:4000/graphql

訪問成功

3.定義復雜類型

定義一個學生類型 student const express = require('express'); const graphqlHTTP = require('express-graphql'); const {buildSchema} = require('graphql');const schema = buildSchema(`type Student{name:Stringage:Int}type Query {hello: Stringname:Stringstudent:Student} `);const root = {hello: () => 'Hello world!',name:()=>{return 'zhangbf'},student:()=>{return {name:'張三豐',age:18}} };const app = express(); app.use('/graphql', graphqlHTTP({schema: schema,rootValue: root,graphiql: true, })); app.listen(4000, () => console.log('Now browse to localhost:4000/graphql')); 運行結果

4. 定義參數類型

新建一個 baseType.js文件 const express = require('express'); const graphqlHTTP = require('express-graphql'); const {buildSchema} = require('graphql');const schema = buildSchema(`type Query {getClassMates(classNo:Int):[String]} `);const root = {getClassMates({classNo}) {const obj = {301: ['張三豐', '張翠山', '殷素素'],61: ['張大三', '李大四', '王大五'],};return obj[classNo];} };const app = express(); app.use('/graphql', graphqlHTTP({schema: schema,rootValue: root,graphiql: true, })); app.listen(4000, () => console.log('Now browse to localhost:4000/graphql')); 運行該文件 node baseType.js 在瀏覽器查看結果,如下

示例二 const express = require('express'); const graphqlHTTP = require('express-graphql'); const {buildSchema} = require('graphql');const schema = buildSchema(`type Student{name:Stringsex:Stringage:Intgrade(number:Int):String}type Query {getClassMates(classNo:Int):[String]student(username:String):Student} `);const root = {getClassMates({classNo}) {const obj = {301: ['張三豐', '張翠山', '殷素素'],601: ['張無忌', '趙敏', '周芷若'],};return obj[classNo];},student({username}){const name=username;const sex="男";const age=20;const grade=({number})=>{if(number>60){return "及格了"}else{return "垃圾"}};return {name,sex,age,grade}} };const app = express(); app.use('/graphql', graphqlHTTP({schema: schema,rootValue: root,graphiql: true, })); app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

三、使用GraphQL

1.在客戶端訪問graphql的接口

1.1 允許靜態資源訪問目錄

app.use(express.static('public'));

1.2 在 public 目錄下添加 index.html 文件

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>graphql 客戶端訪問接口</title> </head> <body> <button onclick="getData()">獲取數據</button> </body><script>function getData() {const query = `query Student($username:String,$number:Int){student(username:$username){nameagesexgrade(number:$number)}}`;const variables = {username: '張三豐', number: 56};fetch('/graphql', {method: "POST",headers: {'Content-Type': 'application/json','Accept': 'application/json',},body: JSON.stringify({query: query,variables: variables})}).then(res => res.json).then(json => {console.log(json);})} </script> </html>

1.3 重新啟動

node baseType.js

1.4 查看訪問結果

2. 在客戶端修改數據

創建一個文件，用于測試插入數據、更新數據。

2.1 新建一個 mutation.js 文件

創建一個 mutation.js 文件 const express = require('express'); const graphqlHTTP = require('express-graphql'); const {buildSchema} = require('graphql');const schema = buildSchema(`input StudentInput{name:Stringage:Intsex:Stringgrade:Int}type Student{name:Stringage:Intsex:Stringgrade:Int}type Mutation{createStudent(input:StudentInput):StudentupdateStudent(id:ID!,input:StudentInput):Student}type Query{student:[Student]} `);const fakeDb = {};//數據庫對象const root = {student() {const arr = [];for (const index in fakeDb) {arr.push(fakeDb[index]);}return arr;},createStudent({input}) {//類似保存到數據庫fakeDb[input.name] = input;//返回保存結果return fakeDb[input.name];},updateStudent({id, input}) {//保存在一個對象里面const updateStudent = Object.assign({}, fakeDb[id], input);fakeDb[id] = updateStudent;//返回對象return updateStudent;} };const app = express(); app.use('/graphql', graphqlHTTP({schema: schema,rootValue: root,graphiql: true, })); app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

2.2 執行查看結果

node mutation.js

2.3 認證中間件

創建一個 middleware.js 文件，用于測試 const express = require('express'); const graphqlHTTP = require('express-graphql'); const {buildSchema} = require('graphql');const schema = buildSchema(`input StudentInput{name:Stringage:Intsex:Stringgrade:Int}type Student{name:Stringage:Intsex:Stringgrade:Int}type Mutation{createStudent(input:StudentInput):StudentupdateStudent(id:ID!,input:StudentInput):Student}type Query{student:[Student]} `);const fakeDb = {};//數據庫對象const root = {student() {const arr = [];for (const index in fakeDb) {arr.push(fakeDb[index]);}return arr;},createStudent({input}) {//類似保存到數據庫fakeDb[input.name] = input;//返回保存結果return fakeDb[input.name];},updateStudent({id, input}) {//保存在一個對象里面const updateStudent = Object.assign({}, fakeDb[id], input);fakeDb[id] = updateStudent;//返回對象return updateStudent;} };const app = express();const middleware = (req, res, next) => {if (req.url.indexOf('/graphql') !== -1 && req.headers.cookie.indexOf('auth') === -1) {res.send(JSON.stringify({error: '您沒有權限訪問該接口'}));return false;}//放行next(); };//注冊中間件 app.use(middleware);app.use('/graphql', graphqlHTTP({schema: schema,rootValue: root,graphiql: true, }));app.listen(4000, () => console.log('Now browse to localhost:4000/graphql'));

添加 auth值

3. 使用ConstructingTypes 類型

為了便于維護，使用 ConstructingTypes 類型

1.創建 constructingTypes.js 測試文件

四.與數據庫相結合

1.創建測試數據庫 test

在 test數據庫下面創建 student 表

2.在安裝mysql插件

在 npmjs.com 網站找 mysql 安裝npm install mysql2 -S

3. 創建 database.js 測試文件

4.查看演示結果

啟動 node database.js

總結

以上是生活随笔為你收集整理的GraphQL 学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

GraphQL

上一篇： Flask出现Error code 40
下一篇：深入理解Webpack核心模块Tapab