배경
기능개발에 들어갈때 프론트개발은 항상 백엔드쿼리를 기다리는 입장이 된다. 마냥 기다리기만 할 수 없으니 쿼리 인터페이스를 백엔드와 맞춘 후 더미데이터를 만들어서 개발을 진행하긴 했지만 불편한 점들이 약간씩은 있었다.
1. 쿼리를 전달받은 후 작업들은 처리가 어려움
2. 더미데이터들을 지우고 쿼리를 넣는 과정에 시간이 소요됨
이런 이유들을 해결할 방법이 있는지를 찾게 되었다.
MockedProvider
ApolloClient에는 MockedProvider를 제공해준다.
MockedProvider를 이용한다면 실제 서버로 쿼리를 요청하는 것이 아니라 특정 쿼리 요청에 대해 미리 응답값을 지정해두고 이를 리턴해주는 것이다.
사용법
사용법은 매우 간단하다
먼저 상위컴포넌트에서 MockedProvider로 감싸주고 mocks속성에 쿼리명, input값, output 값을 전부 지정해준다.
import { MockedProvider, MockedResponse } from "@apollo/client/testing";
export const MOCK_QUERY = gql`
query GetItems {
items {
id
name
}
}
`;
export const DELETE_DOG_MUTATION = gql`
mutation deleteDog($name: String!) {
deleteDog(name: $name) {
id
name
breed
}
}
`;
const mocks: MockedResponse[] = [
{
request: {
query: MOCK_QUERY,
},
result: {
data: {
items: [
{ id: "1", name: "Item 1" },
{ id: "2", name: "Item 2" },
],
},
},
},
{
request: {
query: DELETE_DOG_MUTATION,
variables: { name: "Buck" },
},
result: {
data: { deleteDog: { name: "Buck", breed: "Poodle", id: 1 } },
},
},
];
const Compoenent=()=>{
return (
<MockedProvider mocks={mocks} addTypename={false}>
<ChildComponent />
</MockedProvider>
)
}Query,Mutation둘다 사용이 가능하다.
addTypename이 false인 이유는 Apollo는 cache에 __Typename을 제공하는데 Mock객체에는 해당값이 존재하지 않기때문에 false값을 준것이다.
특정 input에 대해서 error를 리턴하는 것도 설정 가능하다
const mocks: MockedResponse[] = [
...
{
request: {
query: DELETE_DOG_MUTATION,
variables: { name: "Buck" },
},
result: {
data: { deleteDog: { name: "Buck", breed: "Poodle", id: 1 } },
},
},
{
request: {
query: DELETE_DOG_MUTATION,
variables: { name: "jang" },
},
error: new Error("Something went wrong"),
},
];
기본적으로 쿼리는 한번만 요청이 가능하지만 maxUseCount 옵션을 추가해주면 여러번 요청도 가능하다 (apolloClient v3.7 이상부터 가능)
실제 데이터를 사용하는 곳에서는 쿼리를 요청하는 방식으로 사용하면 된다.
useQuery(MOCK_QUERY, {
onCompleted: data => {
console.log(data.items);
// [{id: "1", name: "Item 1"},{id:"2", name: "Item 2"}]
},
});
const [mutate] = useMutation(DELETE_DOG_MUTATION, {
onCompleted: data => {
console.log(data);
},
});
mutate({ variables: { name: "jang" } });
// { deleteDog: { name: "Buck", breed: "Poodle", id: 1 } }
mutate({ variables: { name: "jang" } });
// error Something went wrong유의사항
네트워크 요청을 보내는 것이 아니기에 성능 테스트에는 적합하지 않다
실제 API로도 테스트 해봐야 한다
마무리
장점
- 이미 apolloClient를 사용하고 있기때문에 별도의 라이브러리 설치 없이 MockedProvider를 사용 가능
단점
- 모든 배열안에 쿼리 관련 정보들을 다 넣어야 한다는 점이 다소 불편
- 우리는 현재 apolloClient v3.6을 사용하고 있어서 당장은 maxUseCount를 사용불가
결론
현재는 사용목적이 백엔드쿼리 완성 전 프론트개발을 위한것이지만 공식문서들을 보니 대부분 테스트코드로 많이 사용하고 있었다. 추후에 쿼리를 이용해야하는 테스트코드에서도 활용할 수 있을듯 하다.
장점도 있지만 단점이 있어서 좀 더 서칭을 하던 중 mock-apollo-client라는 라이브러리를 접하게 되었다. 사용해보고 정리해봐야겠다.
