graphql 을 사용하면서 react client에서 어떻게 전역 상태관리를 할 것인지, 그리고 graphql요청은 어떤 방식으로 보낼지에 대한 고민의 답으로 apollo client를 사용하고 있다.
쿼리의 캐싱으로 상태관리를 어느정도 해결해주고, 쿼리 이외의 필요한 값들은 직접적으로 캐싱이 가능하다.
또 custom hook과 codegen으로 쿼리를 쉽게 할 수 있도록 도와준다.
typescript를 어디부터 어디까지 써야하는지 어려운 부분이 많은데 codegen을 사용하면 강제로 타입을 만들어 주어서 그나마 타입스크립트의 장점을 보고있다.
하지만 graphql도 처음 apollo도 처음 결국 다 배우는건 시간이고 나는 같은 실수를 반복한다.
fetchMore({
variables: { },
updateQuery: (prev, { fetchMoreResult }) => {
if (!fetchMoreResult) {
return prev;
}
...
return Object.assign({}, prev, {
feeds: {
cursor: newCursor,
feedItems: [...prev.data, ...fetchMoreResult.data],
__typename: 'IFeeds'
}
});
}
});
그런데 IFeeds 타입을 지정하니까 찾는 것..
그런데 도큐먼트에 보면 apollo는 typename, ID field로 object 값을 추정하며 typename은 자동적으로 쿼리에 생성된다고 되어있다. 그래서 fetch할 때 id feild만 신경을 쓰면 된다고 되어있다.
그래서 쿼리 타입이 지정되어 있으므로 따로 __typename을 넣어 줄 필요가 없다고 생각했는데. 놉.. 내가 만든 obejct를 immutable하게 새로 추가하는 것이기 때문에 타입을 지정해 줘야 하는 것 같다.
const [changeRedState] = useMutaion({
update(cache, { data }) {
const { alarms }: any = cache.readQuery({
query: GET_ALARMS
});
const test = getAppliedReadAlarms(alarms, data);
cache.writeQuery({
query: GET_ALARMS,
data: { alarms: test }
});
}
});
뮤테이션을 사용할 때 서버로 요청해서 변경한 데이터를 현재 상태에 반영을 해야한다.
그래서 usemutaion option의 update function을 callback으로 실행해서 캐시를 업데이트 시켜준다
(ㅇㅋ) => ...?
왜 이것도 되지?
const [changeRedState] = useMutaion({
update(cache, { data }) {
const { alarms }: any = cache.readQuery({
query: GET_ALARMS
});
const test = getAppliedReadAlarms(alarms, data);
}
});
codegen은 서버부터.. codegen
[작성중.]