This document discusses using AppSync with React for building serverless applications. It describes how AppSync provides a GraphQL API with a schema and resolvers to query data from sources like DynamoDB. It also discusses using Cognito for user authentication and authorization with AppSync APIs. The document then covers integrating AppSync with a React app using the AppSync client and making GraphQL queries, mutations and subscriptions to retrieve, add and update data.

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

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

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

38. • AppSync GraphQL
• AppSync
• Lambda ElasticSearch
• DynamoDB
DynamoDB