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) の話。

13725f35541aa680ed5f85d16b85947a?s=128

Kihara, Takuya

July 22, 2020
Tweet

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