4.3 GraphQL API 구현

다음으로 블로그 포스트를 위한 GraphQL API를 추가해보자:

amplify add api

API 유형으로 GraphQL을 선택하고, 인증 유형으로는 Amazon Cognito를 선택해. 그런 다음 스키마를 정의해야 해. amplify/backend/api/[API이름]/schema.graphql 파일을 다음과 같이 수정해:

type Post @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  title: String!
  content: String!
  image: String
  createdAt: AWSDateTime
  updatedAt: AWSDateTime
  owner: String
  comments: [Comment] @hasMany
}

type Comment @model @auth(rules: [{ allow: owner }]) {
  id: ID!
  content: String!
  createdAt: AWSDateTime
  postID: ID! @index(name: "byPost")
  owner: String
}

이 스키마는 Post와 Comment 두 개의 타입을 정의하고, 그 사이에 일대다 관계를 설정해. @model 지시어는 DynamoDB 테이블 생성을, @auth 지시어는 인증 규칙을 정의해. 변경사항을 클라우드에 푸시해:

amplify push

이 명령을 실행하면 Amplify CLI가 GraphQL 스키마를 기반으로 필요한 리소스를 생성하고, 프론트엔드에서 사용할 수 있는 GraphQL 쿼리, 뮤테이션, 구독 코드를 자동으로 생성해. 🧙‍♂️

이제 React 컴포넌트에서 GraphQL API를 사용해보자:

import React, { useState, useEffect } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { listPosts } from './graphql/queries';
import { createPost, deletePost } from './graphql/mutations';

function BlogPosts() {
  const [posts, setPosts] = useState([]);
  const [formData, setFormData] = useState({ title: '', content: '' });

  useEffect(() => {
    fetchPosts();
  }, []);

  async function fetchPosts() {
    try {
      const postData = await API.graphql(graphqlOperation(listPosts));
      setPosts(postData.data.listPosts.items);
    } catch (err) {
      console.error('포스트를 가져오는 중 오류 발생:', err);
    }
  }

  async function handleSubmit(e) {
    e.preventDefault();
    try {
      await API.graphql(graphqlOperation(createPost, { input: formData }));
      setFormData({ title: '', content: '' });
      fetchPosts();
    } catch (err) {
      console.error('포스트 생성 중 오류 발생:', err);
    }
  }

  async function handleDelete(id) {
    try {
      await API.graphql(graphqlOperation(deletePost, { input: { id } }));
      fetchPosts();
    } catch (err) {
      console.error('포스트 삭제 중 오류 발생:', err);
    }
  }

  return (
    <div>
      <h2>블로그 포스트</h2>
      
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="제목"
          value={formData.title}
          onChange={e => setFormData({ ...formData, title: e.target.value })}
          required
        />
        <textarea
          placeholder="내용"
          value={formData.content}
          onChange={e => setFormData({ ...formData, content: e.target.value })}
          required
        />
        <button type="submit">포스트 작성</button>
      </form>
      
      <div>
        {posts.map(post => (
          <div key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
            <button onClick={() => handleDelete(post.id)}>삭제</button>
          </div>
        ))}
      </div>
    </div>
  );
}

이 컴포넌트는 포스트 목록을 가져오고, 새 포스트를 생성하고, 포스트를 삭제하는 기능을 구현해. Amplify의 GraphQL 클라이언트를 사용하면 백엔드와의 통신이 매우 간단해져! 🔄