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-
   ͕
   ؆୯͗ͯ͢ٽ͚ͯ͘Δ
   ೥݄೔
   

   View Slide

2. +"846(ேձKBXTVH@BTB
   ୭
   2
   PHP Conference Hokkaido 2019
   ໊લ ໦ݪ ୎໵ / ɹɹ@tacck
   ॴଐ
   גࣜձࣾϊʔεσΟςʔϧ

   ։ൃDivision ٕज़ਪਐGroup / Leader
   ओ࠵
   ΏΔWebษڧձ@ࡳຈ
   
   εϚʔτεϐʔΧʔͰ༡΅͏ձ@ࡳຈ
   ޷͖ͳ

   AWSαʔϏε Route 53
   ޷͖ͳ

   ϑΟΪϡΞεέʔτͷٕ
   εϓϨουɾΠʔάϧ
   

   View Slide

3. +"846(ேձKBXTVH@BTB
   3
   "NQMJGZ"1* (SBQI2-
   ͕
   ؆୯͗ͯ͢ٽ͚ͯ͘Δ
   

   View Slide

4. +"846(ேձKBXTVH@BTB
   "84"NQMJGZ
   4
   https://aws.amazon.com/jp/amplify/
   

   View Slide

5. +"846(ேձKBXTVH@BTB
   "84"NQMJGZ
   5
   https://aws.amazon.com/jp/amplify/
   ৭ʑศརͳ͍͢͝΍ͭ
   

   View Slide

6. +"846(ேձKBXTVH@BTB
   6
   ࡞੒ྫ
   

   View Slide

7. +"846(ேձKBXTVH@BTB
   • ͜͜࠷ۙɺ໷ͳ໷ͳ࡞͍ͬͯ·͢ɻ
   FNPGVMM ϦϞʔτײ৘ڞ༗αʔϏε
   
   7
   ΞΫηεͯ͠Έ͍ͯͩ͘͞ʂʂʂ
   https://emofull.com/
   

   View Slide

8. +"846(ேձKBXTVH@BTB
   ࣾ಺πʔϧ ϑϦʔΞυϨε࠲੮֬ೝ
   
   8
   https://www.northdetail.co.jp/blog/870/
   

   View Slide

9. +"846(ேձKBXTVH@BTB
   9
   

   View Slide

10. +"846(ேձKBXTVH@BTB
    10
    "1* (SBQI2-
    
    

    View Slide

11. +"846(ேձKBXTVH@BTB
    • AWS AppSync ΛɺϑϩϯτΤϯυ͔Β؆୯ʹ࢖͑Δɻ

    (ඪ४ͩͱɺ DynamoDB ΛετϨʔδͱͯ͠࢖͏ɻ)
    
    • Amplify CLI Λ࢖͏ͱɺ͍ΘΏΔ CRUD ͷΫΤϦΛ

    ੜ੒ͯ͘͠ΕΔɻ
    
    • ݺͼग़͠ํ͕Θ͔Ε͹ɺ͙͢ʹ࢖͑Δɻ
    "1* (SBQI2-
    
    11
    

    View Slide

12. +"846(ேձKBXTVH@BTB
    12
    GraphQL Schema ϑΝΠϧ
    amplify/backend/api/asuuyt/schema.graphql
    ~~~
    type Todo @model {
    id: ID!
    name: String!
    description: String
    }
    

    View Slide

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))
    

    View Slide

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))
    

    View Slide

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) })
    

    View Slide

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) })
    

    View Slide

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) })
    

    View Slide

18. +"846(ேձKBXTVH@BTB
    18
    
    

    View Slide

19. +"846(ேձKBXTVH@BTB
    19
    ·ͱΊ
    

    View Slide

20. +"846(ேձKBXTVH@BTB
    • Amplify API (GraphQL) 

    ࢖͍࢝ΊΔͷ͸؆୯͗ͯ͢ٽ͚ͯ͘Δɻ
    
    • ಛʹϦΞϧλΠϜ௨஌(subscriptions)͕ɺ

    ؆୯͗ͯ͢େ߸ٽɻ
    ·ͱΊ
    20
    

    View Slide

21. +"846(ேձKBXTVH@BTB
    • Amplify API (GraphQL) 

    ࢖͍࢝ΊΔͷ͸؆୯͗ͯ͢ٽ͚ͯ͘Δɻ
    
    • ಛʹϦΞϧλΠϜ௨஌(subscriptions)͕ɺ

    ؆୯͗ͯ͢େ߸ٽɻ
    
    • ηΩϡϦςΟΛߴΊΑ͏ͱ͢Δͱɺ

    Α͘Θ͔Βͳ͘ͳ͖ͬͯͯٽ͚ͯ͘Δɻ
    ·ͱΊ
    21
    

    View Slide

22. +"846(ேձKBXTVH@BTB
    • ϒϩάͰӶҙࣥචத
    ͓·͚
    22
    https://www.northdetail.co.jp/blog/905/
    

    View Slide

23. +"846(ேձKBXTVH@BTB
    23
    FOE
    

    View Slide