구현

• GraphQL API 및 데이터베이스 생성

  a. 앱 디렉터리의 루트에서 다음 명령을 실행하여 앱에 GraphQL API를 추가합니다.
  

  amplify add api
  
  ? Please select from one of the below mentioned services: GraphQL
  ? Provide API name: notesapp
  ? Choose the default authorization type for the API: API Key
  ? Enter a description for the API key: demo
  ? After how many days from now the API key should expire: 7 (or your preferred expiration)
  ? Do you want to configure advanced settings for the GraphQL API: No, I am done.
  ? Do you have an annotated GraphQL schema?  No
  ? Do you want a guided schema creation?  Yes
  ? What best describes your project: Single object with fields
  ? Do you want to edit the schema now? Yes

  b. 텍스트 편집기에서 GraphQL 스키마를 엽니다. amplify/backend/api/myapi/schema.graphql.

  다음 스키마가 포함된 파일을 업데이트합니다.
  

  type Note @model {
    id: ID!
    name: String!
    description: String
  }
  

  c. 파일을 저장합니다. 그런 다음 명령줄로 돌아가 Enter 키를 눌러서 API 구성 단계를 완료합니다.

• API 배포

  이제 API가 로컬로 구성되었으므로 API를 배포할 차례입니다. API를 배포하려면 Amplify 푸시 명령을 실행합니다.
  

  amplify push --y

  이 명령은 다음 3가지 작업을 수행합니다.

  1. AppSync API 생성
  2. DynamoDB 테이블 생성
  3. src/graphql에 있는 폴더에 API를 쿼리하는 데 사용할 수 있는 로컬 GraphQL 작업 생성

  언제든지 다음 명령을 실행하여 계정의 GraphQL API를 볼 수 있습니다.

  amplify console api
  
  > Choose GraphQL
  

  언제든지 다음 명령을 실행하여 계정의 Amplify 앱을 볼 수 있습니다.
  

  amplify console

• API와 상호 작용하는 프런트 엔드 코드 작성

  백엔드가 배포되었으므로, 이제 사용자가 메모를 생성하고 나열하고 삭제할 수 있도록 코드를 작성해보겠습니다.

  다음 코드로 src/App.js를 업데이트합니다.

  import React, { useState, useEffect } from 'react';
  import './App.css';
  import { API } from 'aws-amplify';
  import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
  import { listNotes } from './graphql/queries';
  import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
  
  const initialFormState = { name: '', description: '' }
  
  function App() {
    const [notes, setNotes] = useState([]);
    const [formData, setFormData] = useState(initialFormState);
  
    useEffect(() => {
      fetchNotes();
    }, []);
  
    async function fetchNotes() {
      const apiData = await API.graphql({ query: listNotes });
      setNotes(apiData.data.listNotes.items);
    }
  
    async function createNote() {
      if (!formData.name || !formData.description) return;
      await API.graphql({ query: createNoteMutation, variables: { input: formData } });
      setNotes([ ...notes, formData ]);
      setFormData(initialFormState);
    }
  
    async function deleteNote({ id }) {
      const newNotesArray = notes.filter(note => note.id !== id);
      setNotes(newNotesArray);
      await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }});
    }
  
    return (
      <div className="App">
        <h1>My Notes App</h1>
        <input
          onChange={e => setFormData({ ...formData, 'name': e.target.value})}
          placeholder="Note name"
          value={formData.name}
        />
        <input
          onChange={e => setFormData({ ...formData, 'description': e.target.value})}
          placeholder="Note description"
          value={formData.description}
        />
        <button onClick={createNote}>Create Note</button>
        <div style={{marginBottom: 30}}>
          {
            notes.map(note => (
              <div key={note.id || note.name}>
                <h2>{note.name}</h2>
                <p>{note.description}</p>
                <button onClick={() => deleteNote(note)}>Delete note</button>
              </div>
            ))
          }
        </div>
        <AmplifySignOut />
      </div>
    );
  }
  
  export default withAuthenticator(App);
  

  이 앱은 세 가지 주요 기능을 제공합니다.

  1. fetchNotes - 이 함수는 API 클래스를 사용하여 GraphQL API로 쿼리를 전송하고 메모의 목록을 가져옵니다.
  2. createNote - 이 함수도 API 클래스를 사용하여 GraphQL API로 변형을 전송합니다. 이 함수에서는 양식 데이터를 사용하여 새 메모를 생성할 수 있도록 GraphQL 변형에 필요한 변수를 전달한다는 점이 다릅니다.
  3. deleteNote - 이 함수는 createNote와 마찬가지로 몇 가지 변수와 함께 GraphQL 변형을 전송하지만 메모를 생성하는 것이 아니라 삭제합니다.
• 앱 실행

  앱을 테스트하려면 시작 명령을 실행합니다.
  

  npm start