TypeSafe、FullStack反応&GETのAWSを増幅
これは、私が反応サミットとReactathon 2020で与えた話のブログ形式です
私は、the slides, which are available here.以上でスキムするつもりです
このデモのためのGithubレポ:https://github.com/sw-yx/talk-typesafe-fullstack-react-demo-cms
私は、あなたがすでにAWS Amplify CLI setup and configuredを持っていると仮定します.
最初に、我々はあらかじめ作られた反応+ typescriptアプリをクローン化して、AWS拡大プロジェクトとしてそれを初期化します:
これは私たちに反応とtypescriptで強く型付けされたフロントエンドを与えます!あなたはどのように反応し、入力スクリプトを振るう方法を学びたい場合は、私は維持しているReact and TypeScript cheatsheetをチェック!
今では、フロントエンドを補完するために、強くタイプされたバックエンドを追加します.
AWSでこのインフラストラクチャをプロビジョニングするのは長い時間がかかるので、我々はアプリケーションの残りの部分で動作しながらバックグラウンドでそれをキックします
我々はホームストレッチしている.フロントエンドからの対話のために
省略可能な手順-最初にCodeGenを構成して、typescriptを生成します.その結果、型と自動インポートが動作します.
それからブログを追加して更新するためにも同じことを行います.
あなたはここでhttps://github.com/sw-yx/talk-react-summit-demo-cms/blob/withAWS/src/App.tsxアプリとスライドのhereアプリの完成版を見ることができます立ち往生した.
私はあなたの質問があると確信している-それらを聞かせてみましょう!
資源
私は、the slides, which are available here.以上でスキムするつもりです
このデモのためのGithubレポ:https://github.com/sw-yx/talk-typesafe-fullstack-react-demo-cms
私は、あなたがすでにAWS Amplify CLI setup and configuredを持っていると仮定します.
デモスクリプト
最初に、我々はあらかじめ作られた反応+ typescriptアプリをクローン化して、AWS拡大プロジェクトとしてそれを初期化します:
git clone https://github.com/sw-yx/talk-typesafe-fullstack-react-demo-cms
cd talk-typesafe-fullstack-react-demo-cms
yarn
amplify init # select defaults for everything
この時点でいくつかの模擬データを我々のシンプルなアプリがあります:これは私たちに反応とtypescriptで強く型付けされたフロントエンドを与えます!あなたはどのように反応し、入力スクリプトを振るう方法を学びたい場合は、私は維持しているReact and TypeScript cheatsheetをチェック!
データベースの追加
今では、フロントエンドを補完するために、強くタイプされたバックエンドを追加します.
amplify add api
# choose the graphql option and defaults for the rest
? Please select from one of the below mentioned services: GraphQL
? Provide API name: myapiname
? Choose the default authorization type for the API API key
? Enter a description for the API key:
? After how many days from now the API key should expire (1-365): 7
? Do you want to configure advanced settings for the GraphQL API No, I am do
ne.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID,
name, description)
The following types do not have '@auth' enabled. Consider using @auth with @model
- Todo
Learn more about @auth here: https://docs.amplify.aws/cli/graphql-transformer/directives#auth
GraphQL schema compiled successfully.
? Do you want to edit the schema now? Yes
GraphSQL SDLを使用してデータベーススキーマを定義します.# amplify/backend/api/myapiname/schema.graphql
type Blog @model {
id: ID!
title: String!
image: String!
body: String!
}
その@model
は、特別なGraphSQLディレクティブです.AppSyncは、GraphQL Transformと呼ばれるライブラリを使用して、GraphSQLモデルと一緒にインフラストラクチャを提供するために使用します.それはあなた自身、あなたのバックエンドに追加することができます@auth
、@searchable
、@function
と@predictions
のように、独自に探索することができます負荷より多くのグッズを持っています.AWSでこのインフラストラクチャをプロビジョニングするのは長い時間がかかるので、我々はアプリケーションの残りの部分で動作しながらバックグラウンドでそれをキックします
amplify push -y # skips the yes check
フロントエンドへのバックエンドの配線
我々はホームストレッチしている.フロントエンドからの対話のために
aws-amplify
ライブラリが必要になります.yarn add -D aws-amplify
amplify init
の間、aws-exports.js
ファイルがあなたのバックエンドのための若干の非秘密の情報であなたのsrc
フォルダで生成されたことに注意してください.我々は、AWSアンプで我々のアプリを配線するために、これを使います:// // src/index.tsx
// the other imports
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
// rest of the app
また、amplify push
の間、GraphSQLクエリの束でsrc/graphql
に自動生成されたフォルダがあったことに気付きます.我々は我々のアプリでこれを使用します!省略可能な手順-最初にCodeGenを構成して、typescriptを生成します.その結果、型と自動インポートが動作します.
amplify codegen configure
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/
graphql/**/*.ts
? Enter the file name for the generated code src/API.ts
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
その後、我々はアプリでlistBlogs
クエリを使用します!// src/App.tsx
import { API } from 'aws-amplify'; // new
import { listBlogs } from "./graphql/queries"; // new
// other imports here
function App() {
// new
React.useEffect(fetchBlogs);
function fetchBlogs() {
const query = API.graphql({ query: listBlogs }) as Promise<any>
query.then(
({
data: {
listBlogs: { items },
},
}) => setBlogs(items)
);
}
// etc
}
これは、バックグラウンドからアプリケーションを再構築するたびにリフレッシュするブログアイテムを設定します.それからブログを追加して更新するためにも同じことを行います.
// make sure to import createBlog and updateBlog
async function addBlog(values: Blog) {
const timestamp = new Date();
const newBlog: Blog = {
...values,
id: uuidv4(),
createdAt: timestamp,
updatedAt: timestamp,
};
setBlogs([...blogs, newBlog]);
await API.graphql({query: createBlog, variables: {input: values}}) // NEW!
}
function _updateBlog(oldValues: Blog) {
return async function (newValues: Blog) {
const timestamp = new Date();
const newBlog: Blog = {
...newValues,
createdAt: oldValues.createdAt,
updatedAt: timestamp,
};
setBlogs([...blogs.filter((x) => x.id !== oldValues.id), newBlog]);
const { createdAt, updatedAt, ...input } = newBlog; // NEW!
await API.graphql({ query: updateBlog, variables: { input } }); // NEW!
};
}
そして、あなたはそれを持っている!エンドツーエンドタイプのアプリの基礎!あなたはここでhttps://github.com/sw-yx/talk-react-summit-demo-cms/blob/withAWS/src/App.tsxアプリとスライドのhereアプリの完成版を見ることができます立ち往生した.
私はあなたの質問があると確信している-それらを聞かせてみましょう!
Reference
この問題について(TypeSafe、FullStack反応&GETのAWSを増幅), 我々は、より多くの情報をここで見つけました https://dev.to/swyx/typesafe-fullstack-react-graphql-with-aws-amplify-b3aテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol