March 25, 2021 ( last updated : March 25, 2021 )
Graphql gql 그래프큐엘 김혜원

Abstract

김혜원이 배워가고 싶다고 해서 시작된 포스트

[GQL]Graphql 맨바닥에 부딪치기(4)

mutation에 대한 개념은 충분히 익혔으므로 이제 실전에 적용해보겠습니다.
query와 대부분이 비슷하기 때문에 실전 query편을 다시 보고 오시는 것을 추천 드립니다.

import { gql } from "@apollo/client";

const SAVE_ROCKET = gql`
  mutation saveRocket($rocket: RocketInput!) {
    saveRocket(rocket: $rocket) {
      model
    }
  }
`;

interface RocketInventory {
  id: number;
  model: string;
  year: number;
  stock: number;
}

interface NewRocketDetails {
  model: string;
  year: number;
  stock: number;
}

먼저 gql 쿼리문을 작성합니다. 그리고 변수에 저장해 둡니다. 이제 이 쿼리 문을 실제로 실행 시켜줄수 있는 코드를 작성하겠습니다.

import { useMutation } from "@apollo/client";

export function NewRocketForm() {
  const [model, setModel] = useState('');
  const [year, setYear] = useState(0);
  const [stock, setStock] = useState(0);

  const [saveRocket, { error, data }] = useMutation<
    { saveRocket: RocketInventory },
    { rocket: NewRocketDetails }
  >(SAVE_ROCKET, {
    variables: { rocket: { model, year: +year, stock: +stock } }
  });
  ...

useMutation을 통해서 saveRocket이라는 함수를 생성 시켜 줍니다. 그리고 saveRocket이라는 함수를 필요한 곳이 쓰면됩니다. 위와 같이 말고 다음과 같이 쓸 수 있습니다.

...
const [saveRocket, { error, data }] = useMutation<
  { saveRocket: RocketInventory },
  { rocket: NewRocketDetails }
>(SAVE_ROCKET);
...

위 형태는 variables 즉 매개변수를 넣는 곳이 보이지 않습니다. 이 같은들경우 saveRocket의 매개변수에 {variables:{변수들}} 형식으로 쓸 수 있습니다. 사실상 원래 useMutation의 두번째 매개변수에 넣어주어야 할 것들을 해당 함수의 매개변수에 넣어주면 됩니다.

Originally published March 25, 2021
Latest update March 25, 2021

Related posts :

[GQL]Graphql 맨바닥에 부딪치기(4) - 실전 Mutation

Abstract

[GQL]Graphql 맨바닥에 부딪치기(4)