マネージド GraphQL サービス AppSync 入門

AWS AppSync の紹介です。

Transcript

1. Amazon Web Services Japan Tsukagoshi Keisuke   GraphQL   AppSync
    Building Realtime Application
2. Who am I ? e gd B A @ Mobile / DevOps / Serverless W SJ ba W J c S=
3. Overview c G E E R Q Aa A G I G I G S T Q LPR I We G
4. GraphQL
   
5. GraphQL ? • GraphQLAPI &%.  TypeSystem "
   &%." !'0+0-/($, • GraphQL&-$#/*'0+0)0("  !!)0( 
6. 2.GraphQL%*:0#9$ -REST API 4!- • REST API 4" 4! • API 4E?KJND%  • API 4&;+94%  • API 4E?KJND1 %,:00AN> • @L=<ND$84
    • PIOC;+9437 API ;$2(:6282# • -/$'=HNDEMGN3/0#07BOFO14 5 Request / Response4 %4)9
7. GraphQL,/&' • ".0',#1)10%1*1$"/10 •  1)1+&( • API(!-,0' 
    • API  
8. GraphQL   – GraphQL 
   - • P ) A • A ) B A C • A I B A P )
9. GraphQL   – GraphQL 
   - • P ) A • A ) B A C • A I B A P )
10. ! type Todo { id: ID! name: String description: String status: TodoStatus } type Query { getTodos: [Todo] } enum TodoStatus { done pending } A N I S D )
11. )
12. )
13. ) ) PL • La G p - G PL G P hp r I C P P • I C P P G B - P G QI • I A QG P I -I G
14. ) { "id": "1", "name": "Get Milk", “priority": "1" }, { "id": “2", "name": “Go to gym", “priority": “5" },… type Query { getTodos: [Todo] } type Todo { id: ID! name: String description: String priority: Int duedate: String } query { getTodos { id name priority } }  ! !  
      ! 
15. )    
     != Graph database NoSQL, Relational, HTTP, etc.    GraphQL /posts /postInfo /postJustTitle /postsByAuthor /postNameStartsWithX /commentsOnPost
16. ) ) PL • La G p - G PL G P hp r I C P P • I C P P G B - P G QI • I A QG P I -I G
17. ) ) #$ & Mutation#& %& & - &"$ !&&
     mutation addPost( id:123 title:”New post!” author:”Nadia”){ id title author } data: [{ id:123, title:”New Post!” author:”Nadia” }]
18. type Subscription { addedPost: Post @aws_subscribe(mutations: ["addPost"]) deletedPost: Post @aws_subscribe(mutations: ["deletePost"]) } type Mutation { addPost(id: ID! author: String! title: String content: String): Post! deletePost(id: ID!): Post! } subscription NewPostSub { addedPost { __typename version title content author url } }
19. ) ) Subscription NewPostSub { addedPost{…} } WebSocket URL and Connection Payload Secure Websocket Connection (wss://)
20. const AllPostsWithData = compose( graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network‘ }, props: (props) => ({ posts: props.data.posts, subscribeToNewPosts: params => { props.data.subscribeToMore({ document: NewPostsSubscription, updateQuery: (prev, { subscriptionData: { newPost } }) => ({ ...prev, posts: [newPost, ...prev.posts.filter(post => post.id !== newPost.id)] }) }); }); …//more code )
21. Demo: 
     
22. AppSync
    
23. AWS AppSync   GraphQL   GraphQL 
      
24. OV;5V; • R-S>/K •  %,01A@ +?A9NIVF • &'R-S>/K!DV>, • 6QITV9PU •  OV8V,-HR5V9PU • F3NLUEC3;ELA<V:#"((#6 UCUB>/H, • =V9MSLD.- • =V9MSLD.-*@MAE •  OV8V!%LA<V:U4,7JVE • 2GQ/U !)-HR5V9PU,
    !  $  Sync
25. AppSync7CXGNI •  )) 0' %$"',  1@MS>XWEHA65;<4%$"', • , (-* "  0'&( %+,$ +"* # &! • !"',$,0  *)# *(/0 87TA?FI7 • *)# *(/0  TA?FI7QHLXB1CXMTAI7KXJTXB1=AGF CXIWYU • )"*,$('  -"*0 -,,$(' -+ *$),$(' 65 *)# 7@OVYDRX •  ,$('  *)# 29 -+ *$"* 87  • "+(%."*  TA?FI VFPXF7
    ; 3: 
26. AppSync Overview AWS AppSync Am azon Dynam oDB AW S Lam bda Elasticsearch    
        
27. dynamoDBAmazonES Am azon Dynam oDB ElasticSearch   -1,+1*& "%$  !#
     (101. /')1   e.t.c
28. Lambda3rdPartyAPI      Lambda"DataSource!# ! WebAPI"
     
29. #       !"
    
30. 
            
31. 
            
32. 
     AWS AppSync Am azon Dynam oDB AW S Lam bda Elasticsearch            
33. (%,* • (%,*',) #  &$+# !
    " • GraphQL API 1 GraphQL (%,* " SDL(Schema Definition Language)  !
34.    schema { query:Query mutation: Mutation subscription: Subscription }   Query :
     Mutation :  Subscription :
35. $  type Query { getTodos: [Todo] } type Todo { id: ID! name: String description: String status: TodoStatus } enum TodoStatus { done pending } %'#"
      Not Null  ID! &"! [String!]
36.     "  ""   !  Resolver Mapping Template 
    
37. AppSync Overview AWS AppSync Am azon Dynam oDB AW S Lam bda Elasticsearch    
        
38. *+#/'$..%,/!2 • '$..%,/! GraphQL*! // 
      //   GraphQL,&.   • Apache Velocity Template Language0VTL1 • %-)(." • https://docs.aws.amazon.com/appsync/latest/devguide/resolver- mapping-template-reference-programming-guide.html
39. ;+<2@7.3?%/?5=@1
    • $*)&?1>@< • !/804#<1 • 2;0@(:?4#@7.1 • 0@,  • ;)17.5 • 9@'@ID=)6?)4 <,;?%/ • -".$
40.     
     •    •    
41. 
    :     { "version" : "2017-02-28", "operation" : "GetItem", "key" : { "id" : { "S" : "${context.arguments.id}" } } }
42. 
    :     $utils.toJson($context.result) { "id" : ${context.data.id}, "title" : "${context.data.theTitle}", "content" : "${context.data.body1} ${context.data.body2}" }    
43. 
     
44. DynamoDB
    
45. 
            
46. AppSync Overview AWS AppSync Am azon Dynam oDB AW S Lam bda Elasticsearch    
        
47. GraphQL Endpoint
     export default { "graphqlEndpoint": "https://**.appsync-api.**.amazonaws.com/graphql", "region": "us-east-1", "authenticationType": "API_KEY", "apiKey": ”***" }
48. Client
     const client = new AWSAppSyncClient({ url: awsconfig.ENDPOINT, region: AWS.config.region, auth: { type: AUTH_TYPE.AWS_IAM, credentials: Auth.currentCredentials() } }); const WithProvider = () => ( <ApolloProvider client={client}> <Rehydrated> <AppWithData /> </Rehydrated> </ApolloProvider> );  
     https://aws.github.io/aws-amplify/
49. Client
     //API Key const client = new AWSAppSyncClient({ url: awsconfig.ENDPOINT, region: awsconfig.REGION, auth: { type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey} });
50. Client
     //IAM  auth: { type: AUTH_TYPE.AWS_IAM, credentials: Auth.currentCredentials() } //Cognito User Pool   auth: { type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS, jwtToken: Auth.currentSession().accessToke.jwtToken }
51. Demo: GraphQL
    
52.  
      • AWS AppSync GraphQL Photo Sample • https://github.com/aws-samples/aws-amplify-graphql • GraphQL starter application • https://github.com/aws-samples/aws-mobile-appsync- events-starter-react
53. AWS AppSync GraphQL Photo Sample
54. B • B B ) C • C ) A I I P C • C P C P P )
55. Happy coding with AppSync! AWS AppSync Am azon Dynam oDB AW S Lam bda Elasticsearch              AWS AppSync #
    "&%-*(+  GraphQL API # '),$!