Graph QL(4) - Create, Read

📌시작하며

앞에서 Graph QL을 간단하게 훑어봤는데… 그럼 REST API에서 말하는 CRUD는 어떻게 구현하는거지?🤔 라는 의문이 들었고 간단한 어플을 만들어 보면서 공부한 내용을 정리하고자한다.

(정확히 말하면 CRUD는 아니지만 이 글에서는 편의성을 위해 CRUD라고 작성한다)

✅전체 흐름

이 CRUD를 구현하기 위해서는 크게 세 부분을 작성하게 된다. (자세한 내용은 이 포스팅 참조)

📌백엔드

• typeDefs

• resolvers

📌프론트엔드

• useQuery

• useMutation

✅Read

읽는 부분은 type Query를 사용한다. 이때, Query 내부에 사용하는 다른 type도 함께 지정하는 것에 주의한다!

아래 예제를 보면, type Book과 type Movie을 지정하고 type Query에서 사용하고 있다.

// server.js
const typeDefs = gql`
  type Book {
    id: Int
    title: String
    author: String
  }

  type Movie {
    id: Int
    title: String
    director: String
    release: Int
  }

  type Query {
    books: [Book]
    movies: [Movie]
  }
`

Apollo Server가 이 Query가 데이터를 어떻게 불러올지 resolvers에 할당해 준다. books와 movies는 미리 만들어 둔 데이터를 할당해 주었다.

const books = [
  {
    id: 1,
    title: "해리포터",
    author: "JK 롤링",
  },
  {
    id: 2,
    title: "그리고 아무도 없었다",
    author: "애거서 크리스티",
  },
]

const movies = [
  {
    id: 1,
    title: "수수께끼! 꽃피는 천하떡잎학교",
    director: "타카하시 와타루",
    release: 2022,
  },
  {
    id: 2,
    title: "범죄도시4",
    director: "허명행",
    release: 2024,
  },
]

const resolvers = {
  Query: {
    books: () => books,
    movies: () => movies,
  },
}

백엔드에서의 작업은 마무리 되었으니, 실제 컴포넌트에서 이 데이터들을 읽어보자.

import { gql, useQuery } from "@apollo/client"

export const BOOKS = gql`
  query {
    books {
      title
      author
      id
    }
  }
`

function Read() {
  const { loading, error, data } = useQuery(BOOKS)

  if (loading) return <p>로딩중!</p>
  if (error) return <p>에러발생!</p>
  return (
    <>
      <h2>데이터 불러오기(Get)</h2>
      {data.books.map(
        ({
          title,
          author,
          id,
        }: {
          title: string
          author: string
          id: number
        }) => (
          <div key={title} className="book">
            <p>
              {author} : {title}
            </p>
          </div>
        )
      )}
    </>
  )
}

export default Read

1. @apollo/client 에서 gql와 useQuery를 가져온다.

2. BOOKS 쿼리를 작성

   • 서버로부터 책과 영화 정보를 가져오기 위한 GraphQL 쿼리

3. useQuery 훅 사용

   • GraphQL 쿼리를 실행하고 서버로부터 데이터를 가져온다. 이때 loading, error, data 객체를 통해 데이터 로딩 상태를 관리하고, 로딩 중이면 “로딩중!”을, 에러가 발생하면 “에러발생!”을 화면에 표시한다.
4. 데이터 map
   • data.books.map을 사용해 각 책의 정보를 반복하고 화면에 출력한다.

✅Create

Create부터는 type Query가 아니라 type Mutation을 사용한다. 작성 흐름 자체는 위와 굉장히 비슷하다!

먼저 typeDefs를 이용해 GraphQL 스키마를 정의하자. 예제에서는 Book 타입과 addBook 뮤테이션(Mutation)을 정의했다. 이때 type Mutation의 경우 Book 타입을 반환한다.

const typeDefs = gql`
  type Book {
    id: Int
    title: String
    author: String
  }

  type Mutation {
    addBook(id: Int, title: String, author: String): Book
  }
`

다음은 resolvers를 통해 GraphQL 서버가 실제로 데이터를 처리하는 방법을 정의해준다. addBook리졸버 함수의 매개변수는 다음과 같다.

• 첫 번째 인수 _는 부모 객체로, 여기서는 사용되지 않으므로 언더스코어로 표시한다.
• 두 번째 인수 { title, author }는 클라이언트가 뮤테이션을 요청할 때 전달하는 인수다.

const books = [
  {
    id: 1,
    title: "해리포터",
    author: "JK 롤링",
  },
  {
    id: 2,
    title: "그리고 아무도 없었다",
    author: "애거서 크리스티",
  },
]

let nextBookId = 3

const resolvers = {
  Mutation: {
    addBook: (_, { title, author }) => {
      const newBook = { id: nextBookId++, title, author }
      books.push(newBook)
      return newBook
    },
  },
}

addBook 함수는 위에서 미리 정의해 둔 books 배열에 newBook이란 새로운 객체를 추가하고, newBook을 return한다. 이렇게 return 한 값은 클라이언트측에서 `data.addBook`으로 접근할 수 있다!

이제 프론트엔드 측 코드를 작성한다.

1. GraphQL 쿼리(ADD_BOOK)을 작성한다.
2. mutation AddBook($title: String, $author: String)을 이용해 AddBook이라는 Mutation을 정의한다. 이 Mutation은 title과 author라는 두 개의 매개변수를 받는다. addBook Mutation의 결과로 id, title, author가 반환된다.

import { useMutation, gql } from "@apollo/client"
import { useEffect, useState } from "react"

const ADD_BOOK = gql`
  mutation AddBook($title: String, $author: String) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
`

1. useMutation 훅을 사용해 위에서 정의한 ADD_BOOK GraphQL Mutation을 호출한다. 이떄 refetchQueries 옵션을 사용해 Mutation이 실행된 후 자동으로 BOOKS 쿼리를 다시 실행하도록 설정한다. 이 설정이 없다면, 업데이트 해도 이것이 반영되지 않는다.

2. useState 훅을 사용해 내용을 업데이트 하도록 한다.

5.loading이 true인 경우 “추가 중…” 텍스트를 표시한다.

export default function Create() {
  const [addBook, { data, loading, error }] = useMutation(ADD_BOOK, {
    refetchQueries: [{ query: BOOKS }],
  })
  const [title, setTitle] = useState<string>("")
  const [author, setAuthor] = useState<string>("")

  useEffect(() => {
    if (error) {
      console.error("에러가 발생했습니다.:", error)
    }
    if (data) {
      console.log("추가되었습니다.:", data.addBook)
    }
  }, [data, error])

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault()
        if (title && author) {
          addBook({
            variables: { title, author },
          }).catch((e) => {
            console.error("에러가 발생햇습니다:", e)
          })
          setTitle("")
          setAuthor("")
        }
      }}
    >
      <input
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
        placeholder="작가"
      />
      <input
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        placeholder="책 제목"
      />
      <button type="submit" disabled={loading}>
        추가하기
      </button>
      {loading && <p>추가 중...</p>}
    </form>
  )
}

🗂️참고 사이트

• https://www.apollographql.com/docs/react/data/queries/
• https://www.apollographql.com/tutorials/lift-off-part3/08-the-usequery-hook-with-variables#-setting-up-the-usequery-hook