아폴로 클라이언트란?

Apollo 클라이언트는 GraphQL을 사용하여 로컬 및 원격 데이터를 모두 관리할 수 있는 JavaScript용 종합 상태 관리 라이브러리입니다. 이를 사용하여 UI를 자동으로 업데이트하면서 애플리케이션 데이터를 가져오고, 캐시하고, 수정할 수 있습니다. 대부분 apollo로 작업하는 동안 (vuex 또는 redux)와 같은 다른 상태 관리 라이브러리가 필요하지 않다고 생각합니다.

돌연변이와 쿼리는 무엇입니까?

우리 모두는 REST API로 작업하는 동안 'GET, POST, PUT, PATCH ...etc'와 같은 기본 요청이 있다는 것을 알고 있지만 graphql 엔드포인트에 대한 요청을 할 때 쿼리 및 돌연변이라는 두 가지 주요 요청이 있습니다. QUERY는 서버에서 읽는 모든 요청입니다. 즉, API 끝점에서 모든 게시물을 가져오려면 쿼리를 사용해야 하고 다른 쪽 끝에 있는 MUTATION은 서버에 쓰는 모든 요청입니다. 즉, API 끝점에 게시물을 저장하려면 다음을 수행해야 합니다. 돌연변이를 작성합니다.

간단한 돌연변이를 작성하는 방법

블로그 게시물(돌연변이)을 생성하기 위한 API 엔드포인트가 있다고 가정해 보겠습니다.


위의 이미지에서 볼 수 있듯이 createPost 변형은 'data'를 포함하는 'input' 개체를 사용하고 data 속성은 post_title, post_date, post_detail 등을 사용합니다. 데이터 개체의 각 속성은 String, String!, ID, Date, Upload 및 Enum 유형이 될 수 있는 속성도 기사에서 다루지 않습니다.

우리의 돌연변이

mutation createPost(
    $post_title: String
    $post_date: Date
    $post_detail: String
    $post_image: ID
  ) {
    createPost(
      input: {
        data: {
          post_title: $post_title
          post_detail: $post_detail
          post_date: $post_date
          post_image: $post_image
        }
      }
    ) {
      post {
        id
      }
    }
  }`

여러 돌연변이를 작성하는 방법

mutations 필드는 연속적으로 실행됩니다. 즉, 첫 번째 mutation은 두 번째 시작 전에 완료되어야 합니다. 게시물을 생성하고 게시물 컬렉션을 생성하는 두 가지 작업을 수행하는 버튼이 있다고 가정해 보겠습니다.
여기는 놀이터


돌연변이

export const CREATE_POST = gql`
  mutation createPost(
    $post_title: String
    $post_date: Date
    $post_detail: String
    $post_image: ID
    $name: String
  ) {
    createPost(
      input: {
        data: {
          post_title: $post_title
          post_detail: $post_detail
          post_date: $post_date
          post_image: $post_image
        }
      }
    ) {
      post {
        id
      }
    }
    createCollection(input: { data: { name: $name } }) {
      collection {
        name
      }
    }
  }
`;

전체 소스 코드를 확인하려면 이Vue 저장소를 가져올 수 있습니다.