Typescript : GraphQL mutation, query 타입 적용하기

TypeScript React Front-end

2023-03-17

Utility Type 중 Pick을 활용하여 graphql-codegen 으로 생성한 schema type 파일에서 원하는 인터페이스 타입을 가져와 사용할 수 있다.

Mutation에 타입스크립트 적용하기

GraphQL mutation중 xxx라는 mutation을 사용한다고 하고, const XXX = gql mutation xxx...로 변수선언을 했을 때,

const [myFunction] = useMutation<Pick<IMutation,"xxx">,MutationxxxArgs>(XXX)

의 형식을 따른다. IMutation, MutationxxxArgs 는 GraphQL Code Generator로 생성된 타입 파일에 저장되어 있는 interface 타입인데, 임포트하여 사용할 수 있다.

예제

import { IMutation,
        IMutationCreateCatArgs, 
} from '@/commons/types/generated/types';
import {gql, useMutation} from '@apollo/client';

const CREATE_CAT = gql`
  mutation createCat($name: String, $age: Int, $breed: String) {
    createCat(name: $name, age: $age, breed: $breed) {
      _id
      number
      message
    }
  }
`;

export default function CreateCatPage(){
  const [createCat] = useMutation<Pick<IMutation, 'createCat'>, IMutationCreateCatArgs>(CREATE_CAT);
  
  const onClickSubmit = async () => {
    const result = await createCat({
      variables: {
        name,
        age,
        breed,
      },
    });
    alert(result.data?.createCat?.message);

  };
  
return <>
       ...
       </>
}

Query에 타입스크립트 적용하기

GraphQL mutation중 zzz라는 mutation을 사용한다고 하고, const ZZZ = gql query zzz...로 변수선언을 했을 때,

const { data } = useQuery<Pick<IQuery,"zzz">,QueryzzzArgs>(ZZZ,{ 
  variables: {
   // 필요한 variables 
  } 
})

의 형식을 따른다. 여기서도, IQuery, QueryzzzArgs 는 graphql-codegen으로 생성된 타입 파일에 저장되어 있는 interface 타입이며, 임포트 가능하다.

예제

import {IQuery, IQueryFetchCatArgs} from '@/commons/types/generated/types';
import {useQuery, gql} from '@apollo/client';

const FETCH_CAT = gql`
  query fetchCat($number: Int) {
    fetchCat(number: $number) {
      name
      age
      breed
    }
  }
`;

export default function ReceiveCatPage(){
  const {data} = useQuery<Pick<IQuery, 'fetchCat'>, IQueryFetchCatArgs>(FETCH_CAT,
    {
      variables: {
        number: 265815,
      },
    },
  );
  
return <>
       ...
       </>
}