< apollo > 구독후 데이터를 업데이트하는 방법
February 05, 2021
코드
useEffect(() => {
subscribeToMore({
document: MESSAGES_SUBCRIPTION,
updateQuery: (prev, { subscriptionData }) => {
console.log('test ======> ', { prev, subscriptionData });
if (!subscriptionData.data) return prev;
const newMessageItem = subscriptionData.data.newMessage;
return {
getMessage: {
...prev.getMessage,
messages: [newMessageItem, ...prev.getMessage.messages],
},
};
},
});
}, []);설명
위의 코드에서 subscribeToMore에 2가지 옵션을 전달합니다.
document: 실행할 구독을 나타냅니다.updateQueryApollo Client에 쿼리의현재 캐시 된 결과( prev)를 subscriptionDataGraphQL 서버에서푸시한 결과와결합하는 방법을 알려주는 함수입니다. 이 함수의 반환 값은 쿼리에 대해 현재 캐시 된 결과를 완전히 대체합니다.-
variables구독을 실행할 때 포함 할 변수를 나타냅니다.- 이 옵션은 위의 코드에서 사용되진 않았지만 나중에 필요할거같아 적어두었습니다!
prev와 subscriptionData에 무엇이 들어있나 확인해보았습니다.
이렇게 확인해보니 아래의 코드에서
messages: [newMessageItem, ...prev.getMessage.messages]이렇게 해준 이유를 아시겠죠?..! ☺️
updateQuery: (prev, { subscriptionData }) => {
console.log('test ======> ', { prev, subscriptionData });
if (!subscriptionData.data) return prev;
const newMessageItem = subscriptionData.data.newMessage;
return {
getMessage: {
...prev.getMessage,
messages: [newMessageItem, ...prev.getMessage.messages],
},
};참고글
https://www.apollographql.com/docs/react/data/subscriptions/#subscribing-to-updates-for-a-query
