들어가며
웹 애플리케이션에서 데이터의 업데이트 및 동기화를 관리하는 것은 사용자의 작업(예: 추가 또는 업데이트) 후에 원활한 사용자 경험과 데이터의 일관성을 유지하는 데 매우 중요합니다. Apollo Client는 데이터 패칭과 캐시 상호작용을 관리하기 위한 강력한 도구를 제공하여, 애플리케이션의 상태가 일관되고 최신 상태로 유지되도록 보장합니다. 이 블로그 포스트에서는 Apollo Client의 refetchQueries, readQuery, writeQuery 메소드를 사용하여 복잡한 데이터 업데이트와 캐시 조작을 처리하는 방법을 탐구합니다.
Refetching queries
데이터 기반 애플리케이션에서 흔한 문제 중 하나는 데이터 변동(생성, 업데이트, 삭제 같은) 후 UI가 변경된 내용을 반영하는 것입니다. Apollo Client의 뮤테이션에서 refetchQueries 옵션을 사용하면 이를 간단하게 해결할 수 있습니다. 특정 뮤테이션 후 특정 데이터가 새로고침이 필요하다는 것을 알고 있을 때, 뮤테이션이 완료된 직후에 해당 쿼리를 다시 패칭하도록 Apollo Client에 지시할 수 있습니다.
다음은 새 레스토랑을 추가할 때 refetchQueries를 사용하여 레스토랑 목록이 최신 상태로 유지되도록 하는 예제입니다:
const CREATE_RESTAURANT_MUTATION = gql`
mutation createRestaurant($input: CreateRestaurantInput!) {
createRestaurant(input: $input) {
ok
restaurantId
}
}
`;
const [createRestaurantMutation] = useMutation(CREATE_RESTAURANT_MUTATION, {
onCompleted,
refetchQueries: [{ query: MY_RESTAURANTS_QUERY }]
});
// 컴포넌트 내 어딘가에서 뮤테이션을 트리거:
createRestaurantMutation({
variables: {
input: { name, location, cuisine }
}
});refetchQueries는 뮤테이션이 애플리케이션의 여러 부분에 영향을 미치는 데이터에 의존하는 경우 특히 유용합니다. 그러나 데이터 세트가 큰 경우 재패칭은 비효율적이고 느려질 수 있습니다.
writeQuery와 readQuery
더 세밀한 제어가 필요하거나 데이터의 크기 때문에 재패칭이 비효율적인 경우 Apollo Client의 readQuery 및 writeQuery를 사용하여 캐시를 수동으로 업데이트할 수 있습니다. 이 방법은 현재 캐시된 데이터를 읽고 수정된 데이터를 추가 네트워크 요청 없이 캐시에 다시 쓰는 것으로 가짜 새로고침을 수행할 수 있습니다.
새 레스토랑을 추가한 후 캐시를 수동으로 업데이트하는 방법은 다음과 같습니다:
const client = useApolloClient();
const onCompleted = (data) => {
const { createRestaurant: { ok, restaurantId } } = data;
if (ok) {
// 새 레스토랑에 대한 세부 정보를 상태 변수나 폼에서 가져온다고 가정
const newRestaurant = {
id: restaurantId,
name,
address,
category: { name: categoryName, __typename: "Category" },
coverImg: imageUrl,
isPromoted: false,
__typename: "Restaurant"
};
const existingRestaurants = client.readQuery({ query: MY_RESTAURANTS_QUERY });
client.writeQuery({
query: MY_RESTAURANTS_QUERY,
data: {
myRestaurants: [...existingRestaurants.myRestaurants, newRestaurant]
}
});
}
};이 예에서 readQuery는 캐시에서 현재 레스토랑 목록을 가져오고 writeQuery는 그 목록에 새 레스토랑을 추가합니다. 이 접근 방식은 사용자가 뮤테이션 직후에 업데이트된 목록을 볼 수 있도록 하여 서버 왕복을 기다릴 필요 없이 즉시 반응합니다.
writeQuery와 readQuery의 특징
- 클라이언트 캐시에서 직접 현재 캐시된 데이터를 가져오고 선택적으로 수정
- 서버에서 데이터를 다시 패칭할 필요 없이 UI를 즉시 업데이트
- 사용자 작업에 신속하게 반응
마치며
Apollo Client를 사용한 데이터 관리는 서버 데이터와 클라이언트 캐시를 동기화하는 견고한 솔루션을 제공합니다. refetchQueries를 사용하여 뮤테이션 후 UI를 업데이트하거나 readQuery 및 writeQuery를 사용하여 수동으로 캐시를 조작함으로써 개발자는 애플리케이션이 반응적이면서 데이터 일관성을 유지할 수 있도록 보장할 수 있습니다.
