graphql에 codegen 적용해보기

mutation에 타입스크립트 적용해보기

우리는 처음에 variables로 무엇을 보내줄지, 응답으로 무엇을 받아올 지 잘 모릅니다.

그래서 지난번에 data를 받아올 때 타입에 any를 적어줬었습니다.

하지만, 우리가 codegen을 사용하면서 graphql의 타입을 모두 다운 받아 왔습니다. 따라서 다운 받아온 타입중에 맞는것을 뽑아 적어주시면 됩니다.

// 응답 타입과 variables타입은 타입파일에 다운로드 되어있기 때문에 맞는걸로 import해서 데리고 오시면 됩니다.
const [qqq] = useMutation<응답 타입,variables 타입>()

/* 실제 코드에 적용해보기 */

// 다운로드된 타입들 중 맞는 타입을 데리고 올때는 Pick을 이용하며 해당 타입을 import해와야 합니다.
//강의에서는 타입파일에서 Mutation과 MutationCreateBoardArgs를 import해왔습니다.
// 우리는 Mutation 중에서 createBoard를 픽해올 것 입니다.
const [qqq] = useMutation<Pick<Mutation,"createBoard">,MutationCreateBoardArgs>(CREATE_BOARD)

const zzz = async () => {
		const result = await qqq(CREARTE_BOARD)
		console.log(result.data?.createBoard?.message)
	}

useState와 useMutation같은 부분들은 위와 같이 꺽쇠<>를 이용해서 타입을 지정해주시면 됩니다.

query에 타입스크립트 적용해보기

쿼리를 적용하는 것은 뮤테이션과 크게 다르지 않습니다.

// 응답타입과 variables 타입은 타입파일에 다운로드 되어있기 때문에 맞는걸로 import해서 데리고 오시면 됩니다.

const { data } = useQuery<Pick<Query,"fetchBoard">,QueryFetchBoardArgs>(FETCH_BOARD,{
		variables: {number:Number(router.query.mynumber)}
	})

인터페이스 네임 맞춰주기

세팅파일을 새롭게 업데이트 하시면 다시 yarn generate를 해주셔야 합니다. 기존 파일에 덮어쓰기해주기 위함입니다.

이렇게 세팅을 해주시면 모든 인터페이스의 이름이 예전의 Iprofile처럼 바뀌게 됩니다.

위의 과정을 통해 바꿔준 인터페이스 이름을 우리는 타입스크립트를 적용한 파일에서 다시 바꿔주셔야 합니다.