Enviar pesquisa
Carregar
AppSyncをReactで使ってみた
•
0 gostou
•
394 visualizações
T
Takahiro Kobaru
Seguir
FukuokaJS #6で話した内容です
Leia menos
Leia mais
Engenharia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 39
Baixar agora
Baixar para ler offline
Recomendados
03 spring cloud eureka service discovery
03 spring cloud eureka service discovery
Janani Velmurugan
Rails api + JS app
Rails api + JS app
knomedia
Access to User Activities - Activity Platform APIs
Access to User Activities - Activity Platform APIs
Atlassian
Making share point rock with angular and react
Making share point rock with angular and react
Joseph Jorden
Building a Lightning App with Angular Material Design
Building a Lightning App with Angular Material Design
Salesforce Developers
QAing in a data platform project - Kalyan Muthiah
QAing in a data platform project - Kalyan Muthiah
Thoughtworks
R.A.P. (Rely on Android Platform)
R.A.P. (Rely on Android Platform)
Aditium
The New & Improved Confluence Server and Data Center
The New & Improved Confluence Server and Data Center
Atlassian
Recomendados
03 spring cloud eureka service discovery
03 spring cloud eureka service discovery
Janani Velmurugan
Rails api + JS app
Rails api + JS app
knomedia
Access to User Activities - Activity Platform APIs
Access to User Activities - Activity Platform APIs
Atlassian
Making share point rock with angular and react
Making share point rock with angular and react
Joseph Jorden
Building a Lightning App with Angular Material Design
Building a Lightning App with Angular Material Design
Salesforce Developers
QAing in a data platform project - Kalyan Muthiah
QAing in a data platform project - Kalyan Muthiah
Thoughtworks
R.A.P. (Rely on Android Platform)
R.A.P. (Rely on Android Platform)
Aditium
The New & Improved Confluence Server and Data Center
The New & Improved Confluence Server and Data Center
Atlassian
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Emily Hurn
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
AWS User Group - Thailand
State in stateless serverless functions
State in stateless serverless functions
Alex Pshul
Timesheet Approval Process
Timesheet Approval Process
Regroove
TechEvent 2019: Nachhaltige Client-Architekturen mit Angular Elements; Thomas...
TechEvent 2019: Nachhaltige Client-Architekturen mit Angular Elements; Thomas...
Trivadis
AWS Community Day Bangkok 2019 - Dev Ops Philosophy Increase Productivity
AWS Community Day Bangkok 2019 - Dev Ops Philosophy Increase Productivity
AWS User Group - Thailand
Alon Fliess: APM – What Is It, and Why Do I Need It? - Architecture Next 20
Alon Fliess: APM – What Is It, and Why Do I Need It? - Architecture Next 20
CodeValue
React Context API
React Context API
NodeXperts
2016 - Easing Your Way Into Docker: Lessons From a Journey to Production
2016 - Easing Your Way Into Docker: Lessons From a Journey to Production
devopsdaysaustin
First Look at Azure Logic Apps (BAUG)
First Look at Azure Logic Apps (BAUG)
Daniel Toomey
I've (probably) been using Google App Engine for a week longer than you have
I've (probably) been using Google App Engine for a week longer than you have
Simon Willison
Building 3D Models with Skycatch & Autodesk Recap API's
Building 3D Models with Skycatch & Autodesk Recap API's
Christopher Bumgardner
The Works 2018 - Software Track - Development 101: Build Using API and Overvi...
The Works 2018 - Software Track - Development 101: Build Using API and Overvi...
David Dourgarian
Angular2 + New Firebase in Action
Angular2 + New Firebase in Action
Ruben Chavarri
Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015
David Isbitski
Going Serverless with Iron.io
Going Serverless with Iron.io
Isak Rickyanto
Silver Linings - North Queensland IT Industry Conference
Silver Linings - North Queensland IT Industry Conference
Tristan Davey
AWS Community Day Bangkok 2019 - Building & Deploying AWS Lambda with Serverl...
AWS Community Day Bangkok 2019 - Building & Deploying AWS Lambda with Serverl...
AWS User Group - Thailand
AWS Community Day Bangkok 2019 - Hello ClaudiaJS
AWS Community Day Bangkok 2019 - Hello ClaudiaJS
AWS User Group - Thailand
CREATING REAL TIME DASHBOARD WITH BLAZOR, AZURE FUNCTION COSMOS DB AN AZURE S...
CREATING REAL TIME DASHBOARD WITH BLAZOR, AZURE FUNCTION COSMOS DB AN AZURE S...
CodeOps Technologies LLP
Redux Universal
Redux Universal
Nikolaus Graf
Intro react js
Intro react js
Vijayakanth MP
Mais conteúdo relacionado
Mais procurados
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Emily Hurn
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
AWS User Group - Thailand
State in stateless serverless functions
State in stateless serverless functions
Alex Pshul
Timesheet Approval Process
Timesheet Approval Process
Regroove
TechEvent 2019: Nachhaltige Client-Architekturen mit Angular Elements; Thomas...
TechEvent 2019: Nachhaltige Client-Architekturen mit Angular Elements; Thomas...
Trivadis
AWS Community Day Bangkok 2019 - Dev Ops Philosophy Increase Productivity
AWS Community Day Bangkok 2019 - Dev Ops Philosophy Increase Productivity
AWS User Group - Thailand
Alon Fliess: APM – What Is It, and Why Do I Need It? - Architecture Next 20
Alon Fliess: APM – What Is It, and Why Do I Need It? - Architecture Next 20
CodeValue
React Context API
React Context API
NodeXperts
2016 - Easing Your Way Into Docker: Lessons From a Journey to Production
2016 - Easing Your Way Into Docker: Lessons From a Journey to Production
devopsdaysaustin
First Look at Azure Logic Apps (BAUG)
First Look at Azure Logic Apps (BAUG)
Daniel Toomey
I've (probably) been using Google App Engine for a week longer than you have
I've (probably) been using Google App Engine for a week longer than you have
Simon Willison
Building 3D Models with Skycatch & Autodesk Recap API's
Building 3D Models with Skycatch & Autodesk Recap API's
Christopher Bumgardner
The Works 2018 - Software Track - Development 101: Build Using API and Overvi...
The Works 2018 - Software Track - Development 101: Build Using API and Overvi...
David Dourgarian
Angular2 + New Firebase in Action
Angular2 + New Firebase in Action
Ruben Chavarri
Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015
David Isbitski
Going Serverless with Iron.io
Going Serverless with Iron.io
Isak Rickyanto
Silver Linings - North Queensland IT Industry Conference
Silver Linings - North Queensland IT Industry Conference
Tristan Davey
AWS Community Day Bangkok 2019 - Building & Deploying AWS Lambda with Serverl...
AWS Community Day Bangkok 2019 - Building & Deploying AWS Lambda with Serverl...
AWS User Group - Thailand
AWS Community Day Bangkok 2019 - Hello ClaudiaJS
AWS Community Day Bangkok 2019 - Hello ClaudiaJS
AWS User Group - Thailand
CREATING REAL TIME DASHBOARD WITH BLAZOR, AZURE FUNCTION COSMOS DB AN AZURE S...
CREATING REAL TIME DASHBOARD WITH BLAZOR, AZURE FUNCTION COSMOS DB AN AZURE S...
CodeOps Technologies LLP
Mais procurados
(20)
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
Angular2 + Ng-Lightning + Lightning Design System = Great Apps
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
AWS Community Day Bangkok 2019 - Build a Serverless Web Application in 30 mins
State in stateless serverless functions
State in stateless serverless functions
Timesheet Approval Process
Timesheet Approval Process
TechEvent 2019: Nachhaltige Client-Architekturen mit Angular Elements; Thomas...
TechEvent 2019: Nachhaltige Client-Architekturen mit Angular Elements; Thomas...
AWS Community Day Bangkok 2019 - Dev Ops Philosophy Increase Productivity
AWS Community Day Bangkok 2019 - Dev Ops Philosophy Increase Productivity
Alon Fliess: APM – What Is It, and Why Do I Need It? - Architecture Next 20
Alon Fliess: APM – What Is It, and Why Do I Need It? - Architecture Next 20
React Context API
React Context API
2016 - Easing Your Way Into Docker: Lessons From a Journey to Production
2016 - Easing Your Way Into Docker: Lessons From a Journey to Production
First Look at Azure Logic Apps (BAUG)
First Look at Azure Logic Apps (BAUG)
I've (probably) been using Google App Engine for a week longer than you have
I've (probably) been using Google App Engine for a week longer than you have
Building 3D Models with Skycatch & Autodesk Recap API's
Building 3D Models with Skycatch & Autodesk Recap API's
The Works 2018 - Software Track - Development 101: Build Using API and Overvi...
The Works 2018 - Software Track - Development 101: Build Using API and Overvi...
Angular2 + New Firebase in Action
Angular2 + New Firebase in Action
Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015
Going Serverless with Iron.io
Going Serverless with Iron.io
Silver Linings - North Queensland IT Industry Conference
Silver Linings - North Queensland IT Industry Conference
AWS Community Day Bangkok 2019 - Building & Deploying AWS Lambda with Serverl...
AWS Community Day Bangkok 2019 - Building & Deploying AWS Lambda with Serverl...
AWS Community Day Bangkok 2019 - Hello ClaudiaJS
AWS Community Day Bangkok 2019 - Hello ClaudiaJS
CREATING REAL TIME DASHBOARD WITH BLAZOR, AZURE FUNCTION COSMOS DB AN AZURE S...
CREATING REAL TIME DASHBOARD WITH BLAZOR, AZURE FUNCTION COSMOS DB AN AZURE S...
Semelhante a AppSyncをReactで使ってみた
Redux Universal
Redux Universal
Nikolaus Graf
Intro react js
Intro react js
Vijayakanth MP
Retrofit library for android
Retrofit library for android
InnovationM
Retrofit Library In Android
Retrofit Library In Android
InnovationM
Serverless Angular, Material, Firebase and Google Cloud applications
Serverless Angular, Material, Firebase and Google Cloud applications
Loiane Groner
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
Elyse Kolker Gordon
20171108 PDN HOL React Basics
20171108 PDN HOL React Basics
Rich Ross
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Loiane Groner
React custom renderers
React custom renderers
Giovanni Jiayi Hu
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Loiane Groner
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Loiane Groner
Migrate your Existing Express Apps to AWS Lambda and Amazon API Gateway
Migrate your Existing Express Apps to AWS Lambda and Amazon API Gateway
Amazon Web Services
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + Angular
Loiane Groner
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Ontico
Modern android development
Modern android development
Khiem-Kim Ho Xuan
Angular resolver tutorial
Angular resolver tutorial
Katy Slemon
Angular 4 for Java Developers
Angular 4 for Java Developers
Yakov Fain
Universal JS Applications with React
Universal JS Applications with React
Thanh Trần Trọng
RxSwift to Combine
RxSwift to Combine
Bo-Young Park
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Loiane Groner
Semelhante a AppSyncをReactで使ってみた
(20)
Redux Universal
Redux Universal
Intro react js
Intro react js
Retrofit library for android
Retrofit library for android
Retrofit Library In Android
Retrofit Library In Android
Serverless Angular, Material, Firebase and Google Cloud applications
Serverless Angular, Material, Firebase and Google Cloud applications
Building Universal Web Apps with React ForwardJS 2017
Building Universal Web Apps with React ForwardJS 2017
20171108 PDN HOL React Basics
20171108 PDN HOL React Basics
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
React custom renderers
React custom renderers
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Migrate your Existing Express Apps to AWS Lambda and Amazon API Gateway
Migrate your Existing Express Apps to AWS Lambda and Amazon API Gateway
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + Angular
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Паразитируем на React-экосистеме (Angular 4+) / Алексей Охрименко (IPONWEB)
Modern android development
Modern android development
Angular resolver tutorial
Angular resolver tutorial
Angular 4 for Java Developers
Angular 4 for Java Developers
Universal JS Applications with React
Universal JS Applications with React
RxSwift to Combine
RxSwift to Combine
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Mais de Takahiro Kobaru
Erlangでソフトウェアルータを作ってる話
Erlangでソフトウェアルータを作ってる話
Takahiro Kobaru
SSOとか、SAMLとか、認証してみる
SSOとか、SAMLとか、認証してみる
Takahiro Kobaru
Mnesiaで分散ノードに入門してみた
Mnesiaで分散ノードに入門してみた
Takahiro Kobaru
ReactでGraphQLを使っている
ReactでGraphQLを使っている
Takahiro Kobaru
Phoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってる
Takahiro Kobaru
GoとElixir、同時開発した時の気づき
GoとElixir、同時開発した時の気づき
Takahiro Kobaru
Elixir ライブラリ 「absinthe」でGraphQLに入門
Elixir ライブラリ 「absinthe」でGraphQLに入門
Takahiro Kobaru
Mais de Takahiro Kobaru
(7)
Erlangでソフトウェアルータを作ってる話
Erlangでソフトウェアルータを作ってる話
SSOとか、SAMLとか、認証してみる
SSOとか、SAMLとか、認証してみる
Mnesiaで分散ノードに入門してみた
Mnesiaで分散ノードに入門してみた
ReactでGraphQLを使っている
ReactでGraphQLを使っている
Phoenix + Reactで 社内システムを 密かに作ってる
Phoenix + Reactで 社内システムを 密かに作ってる
GoとElixir、同時開発した時の気づき
GoとElixir、同時開発した時の気づき
Elixir ライブラリ 「absinthe」でGraphQLに入門
Elixir ライブラリ 「absinthe」でGraphQLに入門
Último
Unit 2- Effective stress & Permeability.pdf
Unit 2- Effective stress & Permeability.pdf
RagavanV2
Thermal Engineering Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
DineshKumar4165
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Arindam Chakraborty, Ph.D., P.E. (CA, TX)
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
dharasingh5698
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
BhangaleSonal
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
chapter 5.pptx: drainage and irrigation engineering
chapter 5.pptx: drainage and irrigation engineering
mulugeta48
Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - V
DineshKumar4165
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
RishantSharmaFr
NFPA 5000 2024 standard .
NFPA 5000 2024 standard .
DerechoLaboralIndivi
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
9953056974 Low Rate Call Girls In Saket, Delhi NCR
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
Call Girls in Nagpur High Profile Call Girls
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
dharasingh5698
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
ankushspencer015
Online banking management system project.pdf
Online banking management system project.pdf
Kamal Acharya
Unit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdf
RagavanV2
Generative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPT
bhaskargani46
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
sivaprakash250
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
Asst.prof M.Gokilavani
Último
(20)
Unit 2- Effective stress & Permeability.pdf
Unit 2- Effective stress & Permeability.pdf
Thermal Engineering Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Navigating Complexity: The Role of Trusted Partners and VIAS3D in Dassault Sy...
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Top Rated Call Girls In chittoor 📱 {7001035870} VIP Escorts chittoor
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
chapter 5.pptx: drainage and irrigation engineering
chapter 5.pptx: drainage and irrigation engineering
Thermal Engineering-R & A / C - unit - V
Thermal Engineering-R & A / C - unit - V
Unleashing the Power of the SORA AI lastest leap
Unleashing the Power of the SORA AI lastest leap
NFPA 5000 2024 standard .
NFPA 5000 2024 standard .
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
VIP Call Girls Ankleshwar 7001035870 Whatsapp Number, 24/07 Booking
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
Call Girls in Ramesh Nagar Delhi 💯 Call Us 🔝9953056974 🔝 Escort Service
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
Online banking management system project.pdf
Online banking management system project.pdf
Unit 1 - Soil Classification and Compaction.pdf
Unit 1 - Soil Classification and Compaction.pdf
Generative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPT
UNIT - IV - Air Compressors and its Performance
UNIT - IV - Air Compressors and its Performance
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
CCS335 _ Neural Networks and Deep Learning Laboratory_Lab Complete Record
AppSyncをReactで使ってみた
1.
AppSync React #6 FukuokaJS 2018/9/13
2.
• • Fusic • Twitter
@kobatako_ • Qiita @kobatako
3.
• AppSync • React •
4.
AppSync
5.
AppSync • AWS GraphQL
API • • • Schema • Data Source • Resolvers
6.
AppSync • GraphQL Schema •
Query Mutation Subscription • Scalars AWSDateTime AWSPhone AWSIPAddress
7.
AppSync • Data Source •
AppSync • Lambda DynamoDB Elasticsearch
8.
AppSync • Resolvers • Data
Source • DynamoDB DynamoDB
9.
AppSync •
10.
AppSync
11.
AppSync • • React React
Native NodeJS iOS Android SDK • AppSync Client Apollo Client
12.
AppSync • • API_KEY • AWS_IAM •
OPENID_CONNECT • AMAZON_COGNITO_USER_POOLS
13.
14.
Cognito AppSync React DynamoDB
15.
• Cognito • Amazon
Cognito • DynamoDB • Key Value NoSQL •
16.
• React • React
Router v4 • React Redux • Bloomer CSS • AppSync Client AppSync • Amplify AWS SDK
17.
• Cognito AWS
Amplify • AWS Amplify • MFA •
18.
React
19.
AppSync
20.
AppSync • AppSync API •
21.
AppSync • Event App
22.
AppSync • • API_KEY
23.
AppSync • Schema • DynamoDB
24.
AppSync • Schema • DynamoDB
25.
AppSync • Cognito • Cognito Region
user pool
26.
AppSync • AppSync
27.
AppSync • AppSync Client #
AppSync.js { "graphqlEndpoint": “https://xxxxxxxxxxxxxxx.appsync-api.ap-northeast-1.amazonaws.com/graphql", "region": "ap-northeast-1", "authenticationType": "AMAZON_COGNITO_USER_POOLS", "apiKey": null }
28.
React
29.
React • AppSync import appSyncConfig
from “./AppSync"; // AppSync import AWSAppSyncClient from "aws-appsync"; import awsmobile from './AwsExports'; import Amplify, { Auth } from 'aws-amplify'; Amplify.configure(awsmobile); const client = new AWSAppSyncClient({ disableOffline: true, url : appSyncConfig.graphqlEndpoint, region: appSyncConfig.region, auth: { type: appSyncConfig.authenticationType, jwtToken: async () => (await Auth.currentSession() .then(data => { return data }) .catch(err => { return err })).getIdToken().getJwtToken(), }, }); AppSync.js
30.
React • Provider import React,
{ Component } from 'react'; import './App.css'; import appSyncConfig from "./AppSync"; import { ApolloProvider } from 'react-apollo'; class App extends Component { render() { return ( <div className="App"> <Provider store={ store }> <PersistGate loading={ null } persistor={ persistor }> <ApolloProvider client={ client }> <MainContainer /> </ApolloProvider> </PersistGate> </Provider> </div> ); } }
31.
32.
React • Sign In import
SignInContainer from '../containers/signInContainer.jsx'; class MainContainer extends Component { render() { return ( <Router> <Switch> <Route exact path="/" component={ ConditionsContainer } /> <Route exact path="/conditions" component={ ConditionsContainer } /> <Route exact path="/conditions/add" component={ CreateConditionContainer } /> <Route exact path="/conditions/edit/:id" component={ UpdateConditionContainer } /> <Route /> </Switch> </Router> ); } } export default withAuthenticator(MainContainer, true, [ <SignInContainer />, <ConfirmSignIn />, <VerifyContact />, <SignUp />, <ConfirmSignUp />, <ForgotPassword />, ]); SignInContainer Sign In SignUp
33.
React • Sign In import
Amplify, { Auth } from 'aws-amplify'; class SignInContainer extends SignIn { signIn(user) { if (user) { Auth.signIn(user.name, user.password) .then( u => { this.props.signIn({name: u.username}); this.props.onStateChange("signedIn", u); }) .catch( e => console.error(e)); } } then catch
34.
Cognito
35.
• Apollo GraphQL import
gql from 'graphql-tag'; export default gql` mutation createCondition($condition: CreateConditionInput!) { createCondition(input: $condition) { id user_name day physical_state physical_note work_state work_note work_after leave_time } }`; export default connect( mapStateToProps, )(compose( graphql(CreateConditionMutation, { props: (props) => ({ onCreate: (condition) => { console.log(condition); props.mutate({ variables: { condition: condition } }) } }),
36.
• Mutation DynamoDB
37.
38.
• AppSync GraphQL •
AppSync • Lambda ElasticSearch • DynamoDB DynamoDB
Baixar agora