實戰GraphQL.pdf

Transcript

1. 實戰GRAPHQL BY MARK
2. 為你⾃自已學 GRAPHQL
4. ABOUT ME • Web Developer. • 追求穩定，⾼高效能，開發維護成本低，開發速度快的Web開發⽅方法。 • 在軟體開發的規畫和執⾏行行期，持續不斷的追求漸進式進化。
5. INDEX • 1. Introduction • 2. Single page include more and more components:
 Restful API to Component based API • 3. UI Driven Development • —————————————————dividing line——————————————— • 4. Query Arguments • 5. Handle your N+1 query: Dataloader helper. • 6. Apollo&Subscription • 7. About Modal and Route Change • 8. Authorization: router, resolver, directive
9. WHY GRAPHQL?
10. 如果你是BACKEND
 你說要導入GRAPHQL • You are doing your own. • 你正在搞你⾃自已。 • 不過只有剛開始不舒服，之後就會覺得... • API不⽤用⼀一直改來來改去 很爽的啦
11. 如果你是FRONTEND
 你可能在想：
 「什什麼？我⼜又要學新的東⻄西？」 • 這個⼈人得了了便便宜還賣乖 • (其實前端很⾎血汗的)
12. 如果你是UI/UX的⼈人
 你是奇材 • 我以為你是畫wireframe兼設計的⼈人⽽而已。 • 你知道的太多了了 • 過來來寫程式吧
13. 會覺得GRAPHGL是好東⻄西的⼈人 需要⼀一顆考慮 前後端如何做資料交換的⼤大腦 ⽽而且這個⼈人有需要 把前後端分別做出來來
14. COMPONENT BASED
15. • Single page include more and more components.
16. • Restful api doesn’t care client. • But Graphql do.
17. RESTFUL API TO COMPONENT BASED API
19. RESTFUL API TO COMPONENT BASED API
20. RESTFUL API TO COMPONENT BASED API
21. RESTFUL API TO COMPONENT BASED API
22. http://www.igoogleportal.com/
23. • 3. UI Driven Development
24. UI DRIVEN DEVELOPMENT
25. UI DRIVEN DEVELOPMENT • 確定了了Wireframe
 —>定義DB schema
 —>處理理ORM
 —>考慮Data Source • 決定如何query的語法 • 剩下的就是如何做資料的
 CREATE
 UPDATE
 DELETE
26. 理理想的狀狀態
27. • 我們有⼀一份結構清楚的Wireframe • 以致於： • Frontend developer可以識別出⾴頁⾯面上的Component加以切分 • Backend developer給出的
 GraphQL API對每個Componet都可以組出對應的Component
28. ====================
29. 下⾯面的投影片
 是OPEN SOURCE 
 的CODE

30. FRONTEND的⼈人有個概念念就好
31. 因為BACKEND的部分佔了了八成
32. 有興趣的朋友在會後 都可以繼續討論
 看看有沒有更更好的做法
33. • 4.Query Arguments
34. (KNEX EXAMPLE) 動態QUERY參參數 • where query • sort • whereIn • don’t use OR
35. DON’T USE THAT
36. • 只使⽤用必要的屬性做為參參數 • use GET for HTTP caches.
37. • 5.Handle your N+1 query.
38. # Frontend: query query Users{ users(q: JSON){ id username user_data{ # one to one id address } posts { # one to many id title description } groups { # many to many group_name } } } query Posts{ posts(q: JSON){ id title description user { # belongs to id username } } }
39. # Backend: type type Query { users(q: JSON): [User] posts(q: JSON): [Post] } type User { id: Int username: String user_data: UserData posts: [Post] groups: [Group] } type UserData { id: Int address: String } type Post { id: Int title: String description: String user: User } type Group { id: Int group_name: String }
40. # Backend: resolver const resolvers = { Query: { users: async (_, { q }) => { const result = await BasicService.query(User, q) return result }, posts: async (_, { q }) => { const result = await BasicService.query(Post, q) return result }, }, User: { user_data(user, _, { loaders: { user_datas } }) { return user_datas.load({ key: 'user_id', value: user.id }) }, posts(user, _, { loaders: { posts } }) { return posts.load({ key: 'user_id', value: user.id, many: true }) }, groups(user, _, { loaders: { user_groups, groups } }) { let temp = await user_groups.load({ key: 'user_id', value: user.id, many: true }) return temp.map(x => groups.load({ key: 'id', value: x.group_id })) } }, Post: { user(post, _, { loaders: { users } }) { return users.load({ key: 'id', value: post.user_id }) } } }
41. # Backend: dataloader const Database = use('Database') const {DataLoaderHelper} = require('dataloader-helper') const Loader = new DataLoaderHelper(async function (model, ref_id, keys) { // console.log(`*** loading all '${model}' with ids [${keys}] from database`) const data = await Database .raw(`select * from ${model} where ${ref_id} = ANY(?)`, [keys]) return data.rows }) /** * Define your loaders here. * Each key should be a valid * instance of DataLoader. */ const loaders = () => ({ users: Loader.create('users'), user_datas: Loader.create('user_datas'), posts: Loader.create('posts'), user_groups: Loader.create('user_groups'), groups: Loader.create('groups') }) module.exports = loaders
42. # Backend: schema const { makeExecutableSchema } = require('graphql-tools') const fs = require('fs') const typeDefs = fs.readFileSync(__dirname + ‘/type.graphql', { encoding: 'utf8' }) const resolvers = require('./resolvers.js') module.exports = makeExecutableSchema({ typeDefs, resolvers: resolvers })
43. https://github.com/motephyr/dataloader-helper/
44. • 6. Apollo&Subscription.
45. • Subscription只在需要Realtime時使⽤用 • Need Websocket Support. • 由Page做查詢，傳props⾄至Component.
46. apollo: { candidates: { // gql query query: queries.Candidates, // Static parameters variables() { let query = this.$route.query.query ? this.$route.query.query : this.set_init_query_order({ order: { id: -1 } }); return { q: JSON.parse(query) }; }, subscribeToMore: { document: queries.CandidateMutated, updateQuery: (prev, { subscriptionData }) => { const data = subscriptionData.data; if (!data) return prev; return GQLSubscriptionHelper.updateQuery(prev, data.candidateMutated); } } }, calendars: { // gql query query: queries.Calendars, subscribeToMore: { document: queries.CalendarMutated, updateQuery: (prev, { subscriptionData }) => { const data = subscriptionData.data; if (!data) return prev; return GQLSubscriptionHelper.updateQuery(prev, data.calendarMutated); } } } },
47. subscription CandidateMutated { candidateMutated { mutation node{ ...candidateFields calendars { ...calendarFields } company{ ...companyFields } company_department_id company_department { ...companyDepartmentFields } interviewers { ...interviewerFields } information { basic } exams { ...examFields } } } }
48. https://github.com/motephyr/gql-subscription-helper
49. //Server side //singleton const pubsub = use('My/GraphPubSub') //publish this.addHook('afterCreate', async (candidate) => { pubsub.publish(CANDIDATE_MUTATED, { candidateMutated: { mutation: "CREATED", node: candidate.toJSON() }, company_id: candidate.company_id }); }) this.addHook('afterUpdate', async (candidate) => { pubsub.publish(CANDIDATE_MUTATED, { candidateMutated: { mutation: "UPDATED", node: candidate.toJSON() }, company_id: candidate.company_id }); }) this.addHook('afterDelete', async (candidate) => { pubsub.publish(CANDIDATE_MUTATED, { candidateMutated: { mutation: "DELETED", node: candidate.toJSON() }, company_id: candidate.company_id }); }) //subscribe Subscription: { candidateMutated: { subscribe: withFilter( () => pubsub.asyncIterator("CANDIDATE_MUTATED"), (payload, variables, context) => { return context.currentUser.company_id === payload.company_id } ) } }
50. • 7. About Modal and Route Change
52. • React router&Vue router: Nested routes • 將需要保留留狀狀態的⾴頁⾯面做成有網址的路路由，⽅方便便使⽤用者散播資訊。 • 在⾴頁⾯面內瀏覽時，保留留Parent Page的狀狀態，並使⽤用subscription. • 在不同的⾴頁⾯面切換時，以cache-and-network為主
53. • 8. Authorization: router, resolver, directive
55. const getUser = next => async (root, args, context, info) => { try { context.currentUser = await context.auth.getUser() if (!context.currentUser) { throw new Error(`Unauthenticated!`); } } catch (e) { throw new Error(e); } return next(root, args, context, info); }; module.exports = {getUser}
56. posts: getUser(async (_, { q }, { currentUser }) => { const result = await Post.find(currentUser.id) return result })
57. class AuthDirective extends SchemaDirectiveVisitor { visitFieldDefinition(field) { const { resolve = defaultFieldResolver } = field; field.resolve = async function ( source, args, context, info, ) { context.currentUser = await context.auth.getUser() if(context.currentUser.role !== 'ADMIN'){ return null }else{ return resolve.call(this, source, args, context, info) } }; } }
58. REFERENCE https://graphql.org/ https://medium.com/naresh-bhatia/graphql-concepts-i-wish-someone-explained-to-me-a-year- ago-514d5b3c0eab https://codersera.com/blog/nestjs-typeorm-graphql-dataloader-tutorial-with-typescript/ https://medium.com/paypal-engineering/graphql-resolvers-best-practices-cd36fdbcef55 https://medium.com/the-guild/authentication-and-authorization-in-graphql-and-how-graphql-modules-can- help-fadc1ee5b0c2
59. Q&A
60. PROBLEM THAT WAITING TO BE SOLVED • Query Just for this Component? 
 
 Should it be stored in a global state for use or save?