react graphql起手和特性介紹（二）

緊接第一篇文章，react+graphql起手和特性介紹（一），我們接下來實現resolver，和自定義請求上下文，來完成建立使用者，發帖，檢視所有帖子的功能

首先，我們進行自定義請求上下文，來模擬資料庫和會話，儲存我們的使用者資料，帖子資料，登入狀態。在server目錄下建立context.js檔案。

// server/context.js
const store = new map(); // 模擬資料庫，儲存註冊使用者，建立的帖子資料
const sessionstore = ;
module.exports = (context) => = context; // 我們是將graphql與koa整合在一起，
// 這裡的ctx就是koa提供的請求上下文
// 我們為 graphql 的 context 新增 session 和 store 
context.session = ,
set(value) 
};context.store = store;
return context;
}

接下來我們實現user的reslover和對應的schema

// server/resolver/user.js
const idskey = 'user_ids';
let idcount = 0;
const genid = () => ;
module.exports = = ctx;
return session.get();
},// 查詢所有使用者
users(root, query, ) );
return res;
},// 使用者登入
login(root, , ) 
},gender: ,
// mutation 是與query一樣的根節點，與query沒有什麼區別，只有語義上的區分，
// 對資料進行修改和新增的操作都放在 mutation 中
mutation: , ) }}

# server/schema/user.graphql ...extend type query # input 代表輸入type，需要輸入的型別需要用input進行定義。 # 比如建立使用者的json資料，其結構需要用input定義，才能使用 input userinput extend type mutation

為使我們返回的自定義型別資料生效，修改下對mock進行如下修改

// server/mock.js
module.exports = 
}

好了，我們的使用者相關功能已經實現完成，現在啟動服務，我們建立乙個使用者，登入，並查詢

在mutation上我們先定義$user變數，語法規定需以$開頭，它的型別是userinput!，對應我們的schema定義，然後在createuser查詢中使用此變數$user，它對應的schema解析變數是data，data就是我們在reslover中訪問請求引數的變數名。具體的請求資料，我們通過query variables進行定義，它是json格式的資料，"user"對應我們的$user變數，裡面的結構與userinput!一一對應，並輸入值。建立完使用者之後會將使用者資料返回，並有對應的id值。

登入使用者

查詢所有使用者

根據我們的定義，查詢出來的是陣列型別

讓我們繼續完成帖子的功能

// server/resolver/post.js
const idskey = 'post_ids';
let idcount = 0;
const genid = () => ;
module.exports = ) ,
posts(root, query, ) );
return res;}},
post: ) }},
mutation: , ) }}

為了格式化錯誤，在建立服務時，自定義formaterror

// server/index.js
...const server = new apolloserver(,
});...

繼續完善post schema

# server/schema/post.graphql ...extend type query input postinput extend type mutation

如果會話有異常，沒有cookie資訊，修改下graphql gui客戶端的配置

修改 "request.credentials": "omit" 為 "request.credentials": "include"

下面我們進行建立帖子和查詢帖子的操作

可以看到，我們在**createpost和posts**中並沒有查詢user，這裡也會返回user資料，是因為我們定義了post的user欄位對應的reslover方法，在返回型別為post時，posts/createpost返回的資料user欄位為空，graphql就會自動呼叫user的reslover方法，並且之前posts/createpost返回的資料會作為user的reslover中root引數傳入，這樣我們就可以從root資料中獲取userid，然後對user資料的查詢只用放在乙個地方執行就可以。graphql很好地分化了型別資料的處理邏輯，使每個resolver只關注處理此層對應的資料，剩下的資料拼接graphql會幫我們處理好。

最後我們將用自定義指令，來實現服務端鑑權操作

建立檔案directive.js

// server/directive.js
const = require('apollo-server-koa');
class authdirective extends schemadirectivevisitor else };}
}module.exports =

在schema中定義指令

# server/schema/schema.graphql ...# 使用directive關鍵子定義指令， auth 指令名，age為此指令接收的引數 directive @auth( age: int, ) on field_definition # field_definition 表示此指令應用於字段定義

使用指令

# server/schema/post.graphql ...extend type query

...

現在我們再進行查詢，發現指令已經生效，使用者age小於20是不能查出posts資料的，而post是可以查出資料的

到此，我們graphql後端服務的搭建和特性就介紹完了，後面我們會介紹前端react如何整合graphql

react graphql起手和特性介紹（二）

Python起手式型別和物件

Python 起手式檔案操作

spring boot起手式踩的坑

react graphql起手和特性介紹（二）

Python起手式 型別和物件

Python 起手式 檔案操作

spring boot起手式踩的坑

相關推薦

Python起手式型別和物件

Python 起手式檔案操作