Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

AWS Amplify の API (GraphQL) の話。

Kihara, Takuya

July 22, 2020
Tweet

More Decks by Kihara, Takuya

Other Decks in Technology

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