Why GraphQL?
현 시대의 에플리케이션의 데이터 관리는 점점더 복잡해지고 있습니다.
frontend 진영의 클라이언트들은 계속해서 늘어가고 있고(web, ios, android 등등), 이에 맞는 data가 제공되어야 합니다.
이에따라 data를 제공하는 backend도 이에 맞는 data source를 제공해야 합니다.
결국 frontend와 backend모두 data관리가 힘들어질수밖에 없습니다.
선언적, 효율적 data fetching
rest api 방식에서는
강아지의 shelter와 강아지 정보를 가져오는 data를 작성하려면 2개의 api가 필요하게 됩니다.
/api/shelter 라는 요청을 보내 shelter와 pet_id를 가져오고
가져온 pet_id로 /api/pets/pet_id 요청을 보내 data를 가져와야 합니다.
즉, 2개의 endpoint가 필요한 것입니다.
GraphQL api방식에서는
단일 endpoint에 모든 data를 받을수가 있게 됩니다.
query GetPetsByShelter {
shelters {
name
pets {
name
photoURL
}
}
}
원하는 data를 선언하는 모양에 주목하세요.
모양만 보아도 어떤 data를 원하는지 알수있습니다.
위의 쿼리는 graphql server로 부터 원하는 모양을 받는데 서버에서는 data를 합치고(combining) 필터링(filtering) 하여 fronend에서 정확히 요청하는것만 제공하게 됩니다.
반면 rest api에서는 불필요한 payload도 같이 들어오는 경우가 많지요 :)
// Define the query
const GET_PETS_BY_SHELTER = gql`
query GetPetsByShelter {
shelters {
name
pets {
name
photoURL
}
}
}
`;
function MainPage() {
// Execute the query within the component that uses its result
const { loading, error, data } = useQuery(GET_PETS_BY_SHELTER);
if (error) return <Error />;
if (loading || !data) return <Fetching />;
// Populate the component using the query's result
return <PetList shelters={data.shelters} />;
}
apollo client의 useQuery hook을 사용하면 원하는 data를 가져올 수 있습니다. useQuery에 단지 원하는 data의 모양만 전달해주면
됩니다.
최근 graphql방식의 api통신을 자주 사용하게 되었는데 장점이 참 많다고 생각됩니다.
graphql schema가 문서가 되어서 따로 api문서를 만들지 않아도 된다는점이 저는 가장 좋은점 이었던것 같습니다.
앞으로도 계속 graphql을 사용할 것 같습니다. :)
다음엔 graphql의 기초인 type 을 포스팅 하겠습니다. :)