Relay/GraphQL Fragments를 사용하여 “Attempted to add an ID already in GraphQLSegment” 경고 해결하기

Relay/GraphQL에서 중복 ID 경고 피하기

Relay/GraphQL을 사용할 때 GraphQLSegment에서 중복 ID와 관련된 경고가 발생하는 것은 흔한 일입니다. 이는 Relay/GraphQL 프래그먼트에 동일한 타입의 객체를 반환하는 두 개의 다른 쿼리가 포함되어 있고 결과 집합 간에 겹치는 부분이 있는 경우 발생할 수 있습니다. 이 문제를 이해하고 해결하는 방법을 알아보겠습니다.

경고 이해하기

“Attempted to add an ID already in GraphQLSegment” 경고 메시지는 동일한 Relay 객체가 두 번 참조되어 중복 ID 경고가 발생함을 나타냅니다. 또한 “Attempted to add noncontiguous index to GraphQLSegment”와 같은 메시지는 GraphQLSegment의 인덱스가 연속적이지 않음을 나타냅니다.

가능한 원인

이 문제의 가능한 원인 중 하나는 타입에 대해 nodeDefinition을 여러 번 실행하는 것입니다. 전역 ID 필드를 최상위 객체에 둘 이상 정의하지 않았는지 확인하세요.

let { nodeInterface, nodeField } = nodeDefinitions(
  (globalId) => {
    let { type, id } = fromGlobalId(globalId)
    console.log('NodeDefinitions (globalId), id:', id)
    console.log('NodeDefinitions (globalId), type:', type)

    if (type === 'TopLevelObject') {
      return topLevelObject
    }
    return null
  },
  (obj) => {
    if (obj instanceof TopLevelObject) {
      return topLevelObjectType
    }
    return null
  }
)
  

다른 객체를 참조했다면 다음 코드 스니펫을 따라 올바르게 수행했는지 확인하세요:

let itemType = new GraphQLObjectType({
  name: 'Item',
  fields: () => ({
    id: fromGlobalId('Item', obj => obj._id),
    // OR, not both..
    id: {
      type: new GraphQLNonNull(GraphQLID),
      resolve: (obj) => obj._id
    },
    name: { type: GraphQLString },
    url: { type: GraphQLString },
    state: { type: GraphQLString },
    likesCount: { type: GraphQLInt },
    createdAt: {
      type: GraphQLString,
      resolve: ...
    }
  }),
  interfaces: [nodeInterface]
})
  

경고 디버깅 및 해결하기

위 원인을 확인한 후에도 여전히 경고가 발생한다면 다른 잠재적인 원인을 찾기 위해 코드를 검토하는 것이 좋습니다. 다음 단계를 고려해 보세요:

1. GraphQL 쿼리와 프래그먼트를 검토하여 의도하지 않게 객체를 중복해서 생성하지 않았는지 확인하세요.
2. Relay 컨테이너 컴포넌트를 확인하여 동일한 쿼리와 프래그먼트를 반복해서 refetch하거나 다시 렌더링하지 않도록 확인하세요.
3. GraphQL 서버와 스키마를 검사하여 중복된 객체 참조로 이어질 수 있는 일관성 없음이나 잘못된 구성이 없는지 확인하세요.

이러한 단계를 따라 코드를 철저히 검토하여 GraphQLSegment에서 중복 ID 경고를 식별하고 해결할 수 있습니다.

결론

GraphQLSegment에서 중복 ID 경고는 nodeDefinition을 여러 번 실행하거나 GraphQL 쿼리 및 프래그먼트에서 의도하지 않게 객체를 중복 생성하는 등 여러 가지 요인에 의해 발생할 수 있습니다. 경고 메시지를 이해하고 코드를 철저히 검토함으로써 Relay/GraphQL 애플리케이션의 원활한 작동을 보장하기 위해 이러한 경고를 디버깅하고 해결할 수 있습니다.

참고 자료 : 

reactjs