한 화면에서 다수의 컴포넌트가 모두 같은 GraphQL Query를 실행할 때 데이터가 섞이는 오류가 있었다. 처음에는 벡엔드 (Node.js + GraphQL Server)와 동기적으로 데이터를 주고 받을 수 없어서 그런 것 같았는데, 코드 상의 문제는 없었다.

구글링끝에 답을 찾았다. Apollo Client의 캐싱 오류였고, 클라이언트측 쿼리(gql)에 __typename @skip(if: true)를 붙여주면 된다.

어디에 붙이냐면, 예를 들어

1
2
3
4
5
6
7
8
9
10
11
query getRoutine($id: ID!) {
        getRoutine(id: $id) {
            day
            dayName
            tasks {
                id
                name
                time
            }
        }
    }

나는 다음과 같은 쿼리를 동시에 요청할 때 데이터가 섞였는데,

1
2
3
4
5
6
7
8
9
10
11
12
13
query getRoutine($id: ID!) {
        getRoutine(id: $id) {
            __typename @skip(if: true)
            day
            dayName
            tasks {
                id
                __typename @skip(if: true)
                name
                time
            }
        }
    }

위를 참고하여 id를 조회한다면 id 밑에 넣던지, id를 조회하지 않는다면 그냥 제일 위에 넣으면 된다.

출처 stackoverflow