GraphQL CRUD (Client)

Server의 데이터를 다루기 위해선 Server에서 작성한 Query와 Mutation을 토대로 GraphQL 쿼리를 생성해야 한다.
데이터 조회에 관한 쿼리는 Query.js, 데이터 변경에 관한 쿼리는 Mutation.js에 작성하였다.

// client/src/graphql/Query.js
import { gql } from "@apollo/client";
export const GET_BOOKS = gql`
  {
    getBooks {
      id
      title
      author
    }
  }
`;
export const GET_BOOK = gql`
  query getBook($id: ID) {
    getBook(id: $id) {
      id
      title
      author
    }
  }
`;

• GET_BOOKS: 테이블의 모든 Book을 가져오는 쿼리
• GET_BOOK: 넘겨받은 id에 해당하는 Book을 가져오는 쿼리

// client/src/graphql/Mutation.js
import { gql } from "@apollo/client";
export const ADD_BOOK = gql`
  mutation addBook($title: String, $author: String) {
    addTodo(title: $title, author: $author) {
      id
      title
      author
    }
  }
`;
export const DELETE_BOOK = gql`
  mutation deleteBook($id: ID) {
    deleteBook(id: $id)
  }
`;
export const UPDATE_BOOK = gql`
  mutation updateBook($id: ID, $title: String, $author: String) {
    updateBook(id: $id, title: $title, author: $author) {
      id
      title
      author
    }
  }
`;

• ADD_BOOK: 인자로 넘겨받은 값으로 Book필드 생성
• DELETE_BOOK: 인자로 넘겨받은 id값에 해당하는 Book필드 삭제
• UPDATE_BOOK: 인자로 넘겨받은 id값의 필드의 내용 업데이트

ADD_BOOK / Create

import { useMutation } from "@apollo/client";
import { ADD_BOOK } from "../graphql/Mutation";
import { GET_BOOKS } from '../graphql/Query';

const AddBook = () => {
  const [addBook] = useMutation(ADD_BOOK);
  const [book, setBook] = useState({
    title: "",
    author: "",
  });
  
  const createBook = () => {
    addBook({
      variables: {
        title: book.title,
        author: book.author,
      },
      refetchQueries: [{ query: GET_BOOKS }], // mutation 완료 후 재요청할 쿼리 목록
    });
  };
};

useMutaion을 통해 ADD_BOOK쿼리 호출을 위한 함수 생성
variables를 통해 인자를 넘겨준다.
변경된 값을 렌더링하기 위해 refetchQueries를 통해 BOOK리스트 재요청

DELETE_BOOK / Delete

import { useMutation } from "@apollo/client";
import { DELETE_BOOK } from "../graphql/Mutation";
import { GET_BOOKS } from '../graphql/Query';

const Book = () => {
  const [deletebook] = useMutation(DELETE_BOOK);

  const removeBook = (id) => {
    deleteBook({variables: {id: id}, refetchQueries: [{query: GET_BOOKS}]})
  }
};

useMutaion을 통해 DELETE_BOOK쿼리 호출을 위한 함수 생성
variables을 통해 id값을 넘겨주고 해당하는 BOOK필드 삭제

UPDATE_BOOK / Update

import { useMutation } from "@apollo/client";
import { UPDATE_BOOK } from "../graphql/Mutation";
import { GET_BOOKS } from '../graphql/Query';

const AddBook = () => {
  const [updateBook] = useMutation(UPDATE_BOOK);
  const [book, setBook] = useState({
    title: "",
    author: "",
  });
  
  const changeBook = (id) => {
    updateBook({
      variables: {
        id: id,
        title: book.title,
        author: book.author,
      },
      refetchQueries: [{ query: GET_TODOS }],
    });
  };
};

useMutaion을 통해 UPDATE_BOOK쿼리 호출을 위한 함수 생성
variables을 통해 id값과 수정하려는 데이터를 넘겨주고 해당하는 BOOK필드 업데이트

전체코드
https://github.com/hasunghwa/Graphql-crud

참고문헌
Introduction to Apollo Client
https://www.apollographql.com/docs/react