Typesafe, Fullstack React 및 GraphQL with AWS Amplify

이것은 제가 React Summit 및 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 이 있다고 가정합니다.

라이브코드 데모 스크립트

먼저 미리 만들어진 React + TypeScript 앱을 복제하고 AWS Amplify 프로젝트로 초기화합니다.

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

이 시점에서 모의 ​​데이터가 포함된 간단한 앱이 있습니다.



이는 React 및 TypeScript를 사용하여 강력한 형식의 프런트엔드를 제공합니다! React와 TypeScript를 잘 사용하는 방법을 배우고 싶다면 제가 !

React 및 TypeScript 치트 시트 GraphQL 데이터베이스 추가

이제 Amplify 및 AWS AppSync를 사용하여 프런트엔드를 보완하기 위해 강력한 유형의 백엔드를 추가합니다.

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

GraphQL SDL을 사용하여 데이터베이스 스키마를 정의합니다.

# amplify/backend/api/myapiname/schema.graphql
type Blog @model {
  id: ID!
  title: String!
  image: String!
  body: String!
}

@model AppSync에서 이라는 라이브러리를 통해 GraphQL 모델과 함께 인프라를 프로비저닝하는 데 사용하는 특별한 GraphQL 지시문이 있습니다. 백엔드에 추가할 수 있는 @auth , @searchable , @function 및 @predictions 와 같이 직접 탐색할 수 있는 더 많은 기능이 있습니다.

AWS에서 이 인프라를 프로비저닝하는 데는 시간이 오래 걸리므로 나머지 앱에서 작업하는 동안 백그라운드에서 시작할 것입니다.

amplify push -y # skips the yes check

GraphQL 변환 백엔드를 프런트엔드에 연결

우리는 홈 스트레치에 있습니다. 프런트엔드에서 상호 작용하려면 aws-amplify 라이브러리가 필요합니다.

yarn add -D aws-amplify

amplify init 동안 aws-exports.js 파일이 src 폴더에 생성되었으며 백엔드에 대한 일부 비비밀 정보가 포함되어 있습니다. 이를 사용하여 앱을 AWS Amplify와 연결합니다.

// // 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 동안 src/graphql에 많은 GraphQL 쿼리가 포함된 자동 생성된 폴더가 있음을 알 수 있습니다. 우리는 이것을 우리 앱에서 사용할 것입니다!

첫 번째 선택적 단계 - 유형 및 자동 가져오기가 작동하도록 typescript를 생성하도록 codegen을 구성할 수 있습니다.

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

질문이 있으실 거라 확신합니다. 질문을 들어봅시다!