apollo client 버그 대잔치

yeonseo07·2019년 12월 9일
0

graphql 을 사용하면서 react client에서 어떻게 전역 상태관리를 할 것인지, 그리고 graphql요청은 어떤 방식으로 보낼지에 대한 고민의 답으로 apollo client를 사용하고 있다.

쿼리의 캐싱으로 상태관리를 어느정도 해결해주고, 쿼리 이외의 필요한 값들은 직접적으로 캐싱이 가능하다.
또 custom hook과 codegen으로 쿼리를 쉽게 할 수 있도록 도와준다.

typescript를 어디부터 어디까지 써야하는지 어려운 부분이 많은데 codegen을 사용하면 강제로 타입을 만들어 주어서 그나마 타입스크립트의 장점을 보고있다.

하지만 graphql도 처음 apollo도 처음 결국 다 배우는건 시간이고 나는 같은 실수를 반복한다.

  1. apollo custom hook __typename
    useQuery Hook은 updateQuery로 추가적인 정보를 불러올 수 있도록 함수를 제공한다.
    그리고 그 결과값은 원 data에 머지시켜준다.
    문제상황 : 머지가 안됨.
 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하게 새로 추가하는 것이기 때문에 타입을 지정해 줘야 하는 것 같다.
  1. useMutaion update
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 }
      });
    }
  });
  1. 뮤테이션을 사용할 때 서버로 요청해서 변경한 데이터를 현재 상태에 반영을 해야한다.

  2. 그래서 usemutaion option의 update function을 callback으로 실행해서 캐시를 업데이트 시켜준다

  3. (ㅇㅋ) => ...?
    왜 이것도 되지?

    const [changeRedState] = useMutaion({
      update(cache, { data }) {
        const { alarms }: any = cache.readQuery({
          query: GET_ALARMS
        });
    
        const test = getAppliedReadAlarms(alarms, data);
      }
    });


codegen은 서버부터.. codegen
[작성중.]

0개의 댓글