Amplify API (GraphQL) が簡単すぎて泣けてくる #jawsug_asa #jawsug

https://jawsug-asa.connpass.com/event/180589/
#jawsug_asa #jawsug

AWS Amplify の API (GraphQL) の話。

Transcript

1. גࣜձࣾϊʔεσΟςʔϧ
   ։ൃ%JWJTJPO
   ٕज़ਪਐ(SPVQ
   ໦ݪ
   ୎໵ +"846(ேձ
   
   KBXTVH@BTB "NQMJGZ
   "1*
   (SBQI2-
   ͕
   ؆୯͗ͯ͢ٽ͚ͯ͘Δ ೥݄೔
2. +"846(ேձ
   
   KBXTVH@BTB ୭ 2 PHP Conference Hokkaido 2019 ໊લ ໦ݪ ୎໵ / ɹɹ@tacck ॴଐ גࣜձࣾϊʔεσΟςʔϧ
 ։ൃDivision ٕज़ਪਐGroup / Leader ओ࠵ ΏΔWebษڧձ@ࡳຈ εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ ޷͖ͳ
 AWSαʔϏε Route 53 ޷͖ͳ
 ϑΟΪϡΞεέʔτͷٕ εϓϨουɾΠʔάϧ
3. +"846(ேձ
   
   KBXTVH@BTB 3 "NQMJGZ
   "1*
   (SBQI2-
   ͕
   ؆୯͗ͯ͢ٽ͚ͯ͘Δ
4. +"846(ேձ
   
   KBXTVH@BTB "84
   "NQMJGZ 4 https://aws.amazon.com/jp/amplify/
5. +"846(ேձ
   
   KBXTVH@BTB "84
   "NQMJGZ 5 https://aws.amazon.com/jp/amplify/ ৭ʑศརͳ͍͢͝΍ͭ
6. +"846(ேձ
   
   KBXTVH@BTB 6 ࡞੒ྫ
7. +"846(ேձ
   
   KBXTVH@BTB • ͜͜࠷ۙɺ໷ͳ໷ͳ࡞͍ͬͯ·͢ɻ FNPGVMM
   ϦϞʔτײ৘ڞ༗αʔϏε 7 ΞΫηεͯ͠Έ͍ͯͩ͘͞ʂʂʂ https://emofull.com/
8. +"846(ேձ
   
   KBXTVH@BTB ࣾ಺πʔϧ
   ϑϦʔΞυϨε࠲੮֬ೝ 8 https://www.northdetail.co.jp/blog/870/
9. +"846(ேձ
   
   KBXTVH@BTB 9
10. +"846(ேձ
    
    KBXTVH@BTB 10 "1*
    (SBQI2-
11. +"846(ேձ
    
    KBXTVH@BTB • AWS AppSync ΛɺϑϩϯτΤϯυ͔Β؆୯ʹ࢖͑Δɻ
 (ඪ४ͩͱɺ DynamoDB ΛετϨʔδͱͯ͠࢖͏ɻ) • Amplify CLI Λ࢖͏ͱɺ͍ΘΏΔ CRUD ͷΫΤϦΛ
 ੜ੒ͯ͘͠ΕΔɻ • ݺͼग़͠ํ͕Θ͔Ε͹ɺ͙͢ʹ࢖͑Δɻ "1*
    (SBQI2- 11
12. +"846(ேձ
    
    KBXTVH@BTB 12 GraphQL Schema ϑΝΠϧ amplify/backend/api/asuuyt/schema.graphql ~~~ type Todo @model { id: ID! name: String! description: String }
13. +"846(ேձ
    
    KBXTVH@BTB 13 import { API, graphqlOperation } from 'aws-amplify' import { getTodo, listTodos } from ‘@/graphql/queries’ ~~~ // queries const todo = await API.graphql( graphqlOperation(getTodo, { id: this.todoId }), ).catch(err => console.error('getTodo', err)) const todos = await API.graphql( graphqlOperation(listTodos, {}), ).catch(err => console.error('listTodos', err))
14. +"846(ேձ
    
    KBXTVH@BTB 14 import { API, graphqlOperation } from 'aws-amplify' import { createTodo, updateTodo, deleteTodo } from '@/graphql/mutations' ~~~ // mutations const createdTodo = await API.graphql( graphqlOperation(createTodo, { input: { name: 'new todo', description: 'sample description' }, }), ).catch(err => console.error('createTodo', err)) const updatedTodo = await API.graphql( graphqlOperation(updateTodo, { input: { id: createdTodo.data.createTodo.id, name: 'update todo', description: 'update description', }}), ).catch(err => console.error('updateTodo', err)) const deletedTodo = await API.graphql( graphqlOperation(deleteTodo, { input: { id: createdTodo.data.createTodo.id }, }), ).catch(err => console.error('deleteTodo', err))
15. +"846(ேձ
    
    KBXTVH@BTB 15 import { API, graphqlOperation } from 'aws-amplify' import { onCreateTodo, onUpdateTodo, onDeleteTodo } from '@/graphql/subscriptions' ~~~ // subscriptions const subscriptionCreateTodo = API.graphql( graphqlOperation(onCreateTodo), ).subscribe({ next: data => console.log(data) }) const subscriptionUpdateTodo = API.graphql( graphqlOperation(onUpdateTodo), ).subscribe({ next: data => console.log(data) }) const subscriptionDeleteTodo = API.graphql( graphqlOperation(onDeleteTodo), ).subscribe({ next: data => console.log(data) })
16. +"846(ேձ
    
    KBXTVH@BTB 16 const todo = await API.graphql( graphqlOperation(getTodo, { id: this.todoId }), ).catch(err => console.error('getTodo', err)) const createdTodo = await API.graphql( graphqlOperation(createTodo, { input: { name: 'new todo', description: 'sample description' }, }), ).catch(err => console.error('createTodo', err)) const subscriptionCreateTodo = API.graphql( graphqlOperation(onCreateTodo), ).subscribe({ next: data => console.log(data) })
17. +"846(ேձ
    
    KBXTVH@BTB 17 const todo = await API.graphql( graphqlOperation(getTodo, { id: this.todoId }), ).catch(err => console.error('getTodo', err)) const createdTodo = await API.graphql( graphqlOperation(createTodo, { input: { name: 'new todo', description: 'sample description' }, }), ).catch(err => console.error('createTodo', err)) const subscriptionCreateTodo = API.graphql( graphqlOperation(onCreateTodo), ).subscribe({ next: data => console.log(data) })
18. +"846(ேձ
    
    KBXTVH@BTB 18
    
    
19. +"846(ேձ
    
    KBXTVH@BTB 19 ·ͱΊ
20. +"846(ேձ
    
    KBXTVH@BTB • Amplify API (GraphQL) 
 ࢖͍࢝ΊΔͷ͸؆୯͗ͯ͢ٽ͚ͯ͘Δɻ • ಛʹϦΞϧλΠϜ௨஌(subscriptions)͕ɺ
 ؆୯͗ͯ͢େ߸ٽɻ ·ͱΊ 20
21. +"846(ேձ
    
    KBXTVH@BTB • Amplify API (GraphQL) 
 ࢖͍࢝ΊΔͷ͸؆୯͗ͯ͢ٽ͚ͯ͘Δɻ • ಛʹϦΞϧλΠϜ௨஌(subscriptions)͕ɺ
 ؆୯͗ͯ͢େ߸ٽɻ • ηΩϡϦςΟΛߴΊΑ͏ͱ͢Δͱɺ
 Α͘Θ͔Βͳ͘ͳ͖ͬͯͯٽ͚ͯ͘Δɻ ·ͱΊ 21
22. +"846(ேձ
    
    KBXTVH@BTB • ϒϩάͰӶҙࣥචத ͓·͚ 22 https://www.northdetail.co.jp/blog/905/
23. +"846(ேձ
    
    KBXTVH@BTB 23 FOE