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

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