GraphQL과 Apollo 여덟번째 이야기 - GraphQL Union과 Interface 그리고 인자와 인풋 타입에 대해 알아보아요 😀

 

카카오페이 | 마음 놓고 금융하다

 

 

 

 

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

🗂 목차

✅ GraphQL과 Apollo 첫번째 이야기 - 개념 익히기
✅ GraphQL과 Apollo 두번째 이야기 - REST API란?
✅ GraphQL과 Apollo 세번째 이야기 - GraphQL의 정보 주고 받는 방식
✅ GraphQL과 Apollo 네번째 이야기 - Apollo란?
✅ GraphQL과 Apollo 다섯번째 이야기 - GraphQL을 간단하게 구현해 보아요 😀
✅ GraphQL과 Apollo 여섯번째 이야기 - GraphQL Module화에 대해 알아보아요 😀
✅ GraphQL과 Apollo 일곱번째 이야기 - GraphQL Data Type에 대해 알아보아요 😀
✅ GraphQL과 Apollo 여덟번째 이야기 - GraphQL Union과 Interface 그리고 인자와 인풋 타입에 대해 알아보아요 😀
✅ GraphQL과 Apollo 아홉번째 이야기 - Java + Spring Boot에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열번째 이야기 - Java + Spring Boot에서 GraphQL 사용해 보기 - 실습 해보기
✅ GraphQL과 Apollo 열 한번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열 두번째 이야기 - TypeScript + Nest.js에서 GraphQL 사용해 보기 - 실습 환경 테스트
✅ GraphQL과 Apollo 열 세번째 이야기 - TypeScript + Nest에서 GraphQL 사용해 보기 - 실습 해보기
✅ GraphQL과 Apollo 열 네번째 이야기 - React와 Apollo Client
✅ GraphQL과 Apollo 열다섯번째 이야기 - React와 Apollo Client - Query와 Mutation 사용하여 웹 페이지 만들기
✅ GraphQL과 Apollo 열 여섯번째 이야기 - Kotlin + Spring Boot에서 GraphQL 사용해 보기 - 실습 환경 구성
✅ GraphQL과 Apollo 열 일곱번째 이야기 - Kotlin + Spring Boot에서 GraphQL 사용해 보기 - 실습 해보기

🤔 내가 만난 문제

⚠️ [Nest.js] TypeORM Table 관계가 맺어졌을 때, Seeding (feat. Migration)
⚠️ [Spring Boot 3.0] Could not resolve org.springframework.boot:spring-boot-gradle-plugin
⚠️ [Spring Boot 3] Spring Doc(Swagger) White Label Error

📋 부록

🔍 [Nest.js] 초기 환경 구성 (feat. TypeORM, QueryBuilder, GraphQL, Apollo)
🔍 [SOLID][Nest.js][Java + Spring] Interface를 활용한 결합도 분리 (Interface를 이용한 Dependency Injection - DI)

 

 

 

🚀 GraphQL과 Apollo 여덟번째 이야기

    🔽 GraphQL Union과 Interface 에 대해 알아보아요 😀

        📦 개요

이번 부터 지난 글까지 진행하던 프로젝트가 아닌 아래 프로젝트로 실습하면서 공부해 보려고 해요.

3-3-union-interface · master · Channel Yalco / yalco-inflearn-graphql-apollo · GitLab

728x90

 

참고로 똑똑한 InteliJ 답게 아래 보면 종속성 설치가 나오고, npm install 버튼이 있는 걸 볼 수 있는데, 이걸 누르면 터미널에서 npm install을 입력할 필요 없어요.

 

 

    🔽  실습하며 알아보기

        📦 Union 이란?

Union(유니언)은 Type(타입) 여러 개를 한 배열로 반환하고자 할 때 사용하는 것이에요.

이 전 글까지 우리가 반환하는 배열은 특정 데이터 타입, 즉 String(문자열) 이나, Integer(정수), 개발자가 직접 만든 객체 자료형 타입 중에 한가지만을 선택하여 각각 반환했었어요.

유니언을 사용하면 한 배열 안에 한 가지 이상의 타입을 반환하게 할 수도 있어요.

실습을 통해 Equipment와 Supply 내용을 함께 반환 받게 해볼게요.

givens.js

givens.js를 보면 위와 같이 코드가 만들어진걸 확인할 수 있어요.

givens.js

최초 typeDefs Schema(스키마) 부터 한번 살펴보려고 해요.

5번째 줄을 보면 union 자료형 타입으로 Given이라는 변수가 선언 되어 있고, 해당 변수에는 Equipment 객체나, Supply 객체가 들어올 수 있다고 명시한 것이에요.

즉, Given이라는 변수는 Equipment 객체도 받을 수 있고, Supply 객체도 받을 수 있다는 의미에요.

givens.js

resolvers에 Query를 살펴보면 한 배열에 Equipments와 Supply 둘 다 넣어서 반환하는 givens라는 Query가 선언된 걸 확인할 수 있어요.

resolvers에 Query가 들어가면 _queries.js에 Root Query Type에도 추가를 해주어야 해요.

_queries.js

위와 같이 10번째 줄에 givens를 추가해 주었어요. 위에서 유니온으로 지정했던 Given이 배열로 반환될 거에요.

이제 index.js에 Module(모듈)로 추가해 줄게요.

index.js

위와 같이 9, 18, 25번째에 해당 모듈을 추가하고, 각각의 내용을 입력해 주었어요.

npm start

그런 뒤 서버를 기동 시켜줄게요.

Playgroud

 

query {
  givens {
    __typename
    ... on Equipment {
      id
      used_by
      count
      new_or_used
    }
    
    ... on Supply {
      id
      team
    }
  }
}

 

{
  "data": {
    "givens": [
      {
        "__typename": "Equipment",
        "id": "machanical keyboard",
        "used_by": "developer",
        "count": 24,
        "new_or_used": "used"
      },
      {
        "__typename": "Equipment",
        "id": "pen tablet",
        "used_by": "designer",
        "count": 15,
        "new_or_used": "used"
      },
      {
        "__typename": "Equipment",
        "id": "notebook",
        "used_by": "planner",
        "count": 37,
        "new_or_used": "new"
      },
      {
        "__typename": "Equipment",
        "id": "ergonomic mouse",
        "used_by": "designer",
        "count": 31,
        "new_or_used": "used"
      },
      {
        "__typename": "Equipment",
        "id": "dual monitor",
        "used_by": "developer",
        "count": 20,
        "new_or_used": "used"
      },
      {
        "__typename": "Equipment",
        "id": "whiteboard",
        "used_by": "planner",
        "count": 12,
        "new_or_used": "used"
      },
      {
        "__typename": "Equipment",
        "id": "sketchboard",
        "used_by": "designer",
        "count": 48,
        "new_or_used": "new"
      },
      {
        "__typename": "Supply",
        "id": "ergonomic mouse",
        "team": 1
      },
      {
        "__typename": "Supply",
        "id": "mug",
        "team": 1
      },
      {
        "__typename": "Supply",
        "id": "webcam",
        "team": 2
      },
      {
        "__typename": "Supply",
        "id": "hoodie",
        "team": 2
      },
      {
        "__typename": "Supply",
        "id": "chair",
        "team": 3
      },
      {
        "__typename": "Supply",
        "id": "usb hub",
        "team": 3
      },
      {
        "__typename": "Supply",
        "id": "headphone",
        "team": 4
      },
      {
        "__typename": "Supply",
        "id": "stempler",
        "team": 4
      },
      {
        "__typename": "Supply",
        "id": "calculator",
        "team": 5
      },
      {
        "__typename": "Supply",
        "id": "t shirt",
        "team": 5
      }
    ]
  }
}

Playgroud에서 위와 같이 Query를 날리면 결과값을 위와 같이 받는걸 확인할 수 있어요.

결과값을 보면 __typename을 통해 Equipment 타입으로 혹은 Supply 타입으로 이뤄진 객체인지를 확인할 수 있어요.

query {
  givens {
    __typename
    ... on Equipment {
      id
      used_by
      count
      new_or_used
    }
    
    ... on Supply {
      id
      team
    }
  }
}

이 Query를 분석해 보면

__typename은 각각의 데이터가 Equipment에 속하는지 아니면 Supply에 속하는지 알려주기 위한 것이에요.

givens.js

위 내용은 이 코드가 수행된 결과에요.

반환된 결과값이 Equipment인지 Supply인지 구분하기 위해 각 항목에 used_by Filed(필드)가 있으면 Equipment 객체를 반환하고, team 필드가 있으면 Supply 객체를 반환하라는 것이에요.

둘 다 아니면? Null을 반환하겠네요.

이 코드로 구분해서 각 항목이 어떤 데이터 타입을 가지고 있는지를 분석한 뒤 __typename에 문자열로 반환되는 것이에요.

query {
  givens {
    __typename
    ... on Equipment {
      id
      used_by
      count
      new_or_used
    }
    
    ... on Supply {
      id
      team
    }
  }
}

나머지도 분석해 볼게요. 

아 부분은 만약 해당 데이터가 Equipment에 해당된다면 그 중 어떤 필드를 반환할지 명시해 준 것이에요.

위와 같이 Equipment에 id와 used_by만 요청을 보내면 그 결과값만 반환되는 걸 확인할 수 있어요.
즉, 유니언에 포함된 각 항목들에 대해 어떤 필드들을 반환할지를 ... on Equipment, ... on Supply 이 둘에다가 명시해 주는 것이에요.

이렇게 사용할 수 있기 때문에 어떤 타입에 속한 데이터이건 자유자재로 취소하거나, 선택할 수 있게 될 수 있어요.

 

 

 

 

 

 

        📦 Interface란?

Interface(인터페이스)는 유사한 객체 타입을 만들기 위한 공통 필드 타입이에요.
이는 추상 타입인데, 다른 타입에 Implement(구현) 되기 위한 타입이에요.

주니가 사랑하는 자바와 같은 객체 지향 언어에서 아주 많이 사용되는 단어에요.

equipments.js

 

softwares.js

두 코드를 보면 공통되는 사항이 보여요.
바로 id, used_by 필드에요.

자바와 같은 객체 지향 언어에서 코딩을 할 경우 이렇게 공통된 사항은 상위 객체 혹은 인터페이스로 정의하고, 각각을 구현하거나, 상속 받아 자식 객체에서 사용할 수 있도록 코딩 해요.

GraphQL에서도 이와 같이 할 수 있는데, 이 실습을 위해 tools.js를 만들어 볼게요.

tools.js

const { gql } = require('apollo-server')
const typeDefs = gql`
    interface Tool {
        id: ID!
        used_by: Role!
    }
`
const resolvers = {
    Tool: {
        __resolveType(tool, context, info) {
            if (tool.developed_by) {
                return 'Software'
            }
            if (tool.new_or_used) {
                return 'Equipment'
            }
            return null
        }
    }
}
module.exports = {
    typeDefs: typeDefs,
    resolvers: resolvers
}

 

tools.js

3 ~ 6번째 줄에 위와 같이 인터페이스 형식으로 Tool이라는 객체가 id 그리고, used_by 필드와 함께 선언된 것을 확인할 수 있어요.

tools.js

resolver(리졸버) 타입은 givens에서 본 것과 같은 내용이에요.

이렇게 Tool을 정의했으니 이를 Equipment와 Supply가 각각 구현하여 사용할 수 있도록 지정해 볼게요.

equipments.js

 

softwares.js

위와 같이 implements Tool 이라는 문자를 추가해 주었어요.

지금 이 상태는 Equiqments와 Software가 Tool 이라는 인터페이스를 적용한 상태에요.

여기까지만 하면 터미널은 난리가 났을 거에요.
왜냐하면 Tool에 대해 Import 시켜주지 않았기 때문이에요.

index.js

index.js에 위와 같이 tools에 대한 내용을 선언해 주었어요.

이제 터미널은 다시 평화를 찾게 되었고,

Playground

 

query {
  equipments {
    id
    used_by
    count
    new_or_used
  }
  
  softwares {
    id
    used_by
    description
    developed_by
  }
}

위와 같이 Query를 날려보면

{
  "data": {
    "equipments": [
      {
        "id": "machanical keyboard",
        "used_by": "developer",
        "count": 24,
        "new_or_used": "used"
      },
      {
        "id": "pen tablet",
        "used_by": "designer",
        "count": 15,
        "new_or_used": "used"
      },
      {
        "id": "notebook",
        "used_by": "planner",
        "count": 37,
        "new_or_used": "new"
      },
      {
        "id": "ergonomic mouse",
        "used_by": "designer",
        "count": 31,
        "new_or_used": "used"
      },
      {
        "id": "dual monitor",
        "used_by": "developer",
        "count": 20,
        "new_or_used": "used"
      },
      {
        "id": "whiteboard",
        "used_by": "planner",
        "count": 12,
        "new_or_used": "used"
      },
      {
        "id": "sketchboard",
        "used_by": "designer",
        "count": 48,
        "new_or_used": "new"
      }
    ],
    "softwares": [
      {
        "id": "Eclipse",
        "used_by": "developer",
        "description": "integrated development environment",
        "developed_by": "Eclipse Foundation"
      },
      {
        "id": "Excel",
        "used_by": "planner",
        "description": "spreadsheet",
        "developed_by": "Microsoft"
      },
      {
        "id": "Illustrator",
        "used_by": "designer",
        "description": "vector graphics editor",
        "developed_by": "Adobe"
      },
      {
        "id": "Photoshop",
        "used_by": "designer",
        "description": "raster graphics editor",
        "developed_by": "Adobe"
      },
      {
        "id": "PowerPoint",
        "used_by": "planner",
        "description": "presentation program",
        "developed_by": "Microsoft"
      },
      {
        "id": "Sketch",
        "used_by": "designer",
        "description": "vector graphics editor",
        "developed_by": "Sketch B.V."
      },
      {
        "id": "VS Code",
        "used_by": "developer",
        "description": "source code editor",
        "developed_by": "Microsoft"
      },
      {
        "id": "Word",
        "used_by": "planner",
        "description": "word processor",
        "developed_by": "Microsoft"
      },
      {
        "id": "Xcode",
        "used_by": "developer",
        "description": "integrated development environment",
        "developed_by": "Apple"
      }
    ]
  }
}

이렇게 결과값을 받는걸 확인할 수 있어요.
확인해보면 Equipments 배열 객체와 Softwares 배열 객체가 반환되는 걸 확인할 수 있어요.

이번에는 People 이라는 Query에 적용해 보려고 해요.

people.js

 

_queries.js

11번째 줄과 같이 Root Query Type에 people을 선언해주고, 반환값은 People 객체 배열로 반환하겠다고 선언해주고,

index.js

index.js에 people에 대한 내용을 추가 선언해주었어요.

Playground

query {
  people {
    id
    first_name
    last_name
  	
    givens {
      __typename
      ... on Equipment {
        id
        used_by
        count
        new_or_used
      }
      
      ... on Supply {
        id
        team
      }
    }
    
    tools {
      __typename
      ... on Equipment {
        id
        used_by
        count
        new_or_used
      }
      
      ... on Software {
        id
        used_by
        description
        developed_by
      }
    }
  }
}

Playground에서 위와 같이 Query를 날려주면

{
  "data": {
    "people": [
      {
        "id": "1",
        "first_name": "Alex",
        "last_name": "Davidson",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "2",
        "first_name": "Lindsay",
        "last_name": "West",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "3",
        "first_name": "Nathan",
        "last_name": "Jenkins",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "4",
        "first_name": "Christine",
        "last_name": "Harris",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "5",
        "first_name": "Page",
        "last_name": "Adams",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "6",
        "first_name": "Herbert",
        "last_name": "Ford",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "7",
        "first_name": "Dennis",
        "last_name": "Marshall",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "8",
        "first_name": "Isabella",
        "last_name": "Martin",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "9",
        "first_name": "Alfred",
        "last_name": "Clarke",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "10",
        "first_name": "Tyler",
        "last_name": "Philips",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "11",
        "first_name": "Noelle",
        "last_name": "Holmes",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "12",
        "first_name": "Kate",
        "last_name": "Owen",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "13",
        "first_name": "Priscilla",
        "last_name": "Walker",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "14",
        "first_name": "Shirley",
        "last_name": "Grant",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "15",
        "first_name": "Byron",
        "last_name": "Barnes",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "16",
        "first_name": "Toby",
        "last_name": "Lewis",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "17",
        "first_name": "Barbara",
        "last_name": "White",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "18",
        "first_name": "Arnold",
        "last_name": "Armstrong",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "19",
        "first_name": "Eleanor",
        "last_name": "Smith",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "20",
        "first_name": "Nina",
        "last_name": "Dawson",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "21",
        "first_name": "Jamie",
        "last_name": "Reynolds",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "22",
        "first_name": "Myrtle",
        "last_name": "Hamilton",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "23",
        "first_name": "Zelda",
        "last_name": "Hall",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "24",
        "first_name": "Edgar",
        "last_name": "Willson",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "25",
        "first_name": "Brian",
        "last_name": "Hunt",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "26",
        "first_name": "Naomi",
        "last_name": "Taylor",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "27",
        "first_name": "Brooke",
        "last_name": "Evans",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "28",
        "first_name": "Katherine",
        "last_name": "Bennett",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "29",
        "first_name": "Violet",
        "last_name": "Pearson",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "30",
        "first_name": "Margaret",
        "last_name": "Davies",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "31",
        "first_name": "Raymond",
        "last_name": "Cook",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "32",
        "first_name": "Garth",
        "last_name": "Roberts",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "33",
        "first_name": "Victoria",
        "last_name": "Brown",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "34",
        "first_name": "Russel",
        "last_name": "Jones",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "35",
        "first_name": "Sally",
        "last_name": "Fox",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "36",
        "first_name": "Chloe",
        "last_name": "Bailey",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "37",
        "first_name": "Will",
        "last_name": "McDonald",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "38",
        "first_name": "Grant",
        "last_name": "Cole",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "39",
        "first_name": "Audrey",
        "last_name": "Fisher",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "40",
        "first_name": "Amber",
        "last_name": "Russel",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "41",
        "first_name": "Peter",
        "last_name": "Payne",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "headphone",
            "team": 4
          },
          {
            "__typename": "Supply",
            "id": "stempler",
            "team": 4
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "42",
        "first_name": "Russ",
        "last_name": "Lawrence",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "43",
        "first_name": "Margot",
        "last_name": "Watson",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "44",
        "first_name": "Nancy",
        "last_name": "Brooks",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "45",
        "first_name": "Oliver",
        "last_name": "Simpson",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "46",
        "first_name": "Pansy",
        "last_name": "Moore",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "chair",
            "team": 3
          },
          {
            "__typename": "Supply",
            "id": "usb hub",
            "team": 3
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      },
      {
        "id": "47",
        "first_name": "Leroy",
        "last_name": "Elliott",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "48",
        "first_name": "Barbara",
        "last_name": "Murphy",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "calculator",
            "team": 5
          },
          {
            "__typename": "Supply",
            "id": "t shirt",
            "team": 5
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "machanical keyboard",
            "used_by": "developer",
            "count": 24,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "dual monitor",
            "used_by": "developer",
            "count": 20,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Eclipse",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Eclipse Foundation"
          },
          {
            "__typename": "Software",
            "id": "VS Code",
            "used_by": "developer",
            "description": "source code editor",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Xcode",
            "used_by": "developer",
            "description": "integrated development environment",
            "developed_by": "Apple"
          }
        ]
      },
      {
        "id": "49",
        "first_name": "Simon",
        "last_name": "Henderson",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Supply",
            "id": "webcam",
            "team": 2
          },
          {
            "__typename": "Supply",
            "id": "hoodie",
            "team": 2
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "pen tablet",
            "used_by": "designer",
            "count": 15,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "ergonomic mouse",
            "used_by": "designer",
            "count": 31,
            "new_or_used": "used"
          },
          {
            "__typename": "Equipment",
            "id": "sketchboard",
            "used_by": "designer",
            "count": 48,
            "new_or_used": "new"
          },
          {
            "__typename": "Software",
            "id": "Illustrator",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Photoshop",
            "used_by": "designer",
            "description": "raster graphics editor",
            "developed_by": "Adobe"
          },
          {
            "__typename": "Software",
            "id": "Sketch",
            "used_by": "designer",
            "description": "vector graphics editor",
            "developed_by": "Sketch B.V."
          }
        ]
      },
      {
        "id": "50",
        "first_name": "Ned",
        "last_name": "Butler",
        "givens": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Supply",
            "id": "ergonomic mouse",
            "team": 1
          },
          {
            "__typename": "Supply",
            "id": "mug",
            "team": 1
          }
        ],
        "tools": [
          {
            "__typename": "Equipment",
            "id": "notebook",
            "used_by": "planner",
            "count": 37,
            "new_or_used": "new"
          },
          {
            "__typename": "Equipment",
            "id": "whiteboard",
            "used_by": "planner",
            "count": 12,
            "new_or_used": "used"
          },
          {
            "__typename": "Software",
            "id": "Excel",
            "used_by": "planner",
            "description": "spreadsheet",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "PowerPoint",
            "used_by": "planner",
            "description": "presentation program",
            "developed_by": "Microsoft"
          },
          {
            "__typename": "Software",
            "id": "Word",
            "used_by": "planner",
            "description": "word processor",
            "developed_by": "Microsoft"
          }
        ]
      }
    ]
  }
}

위와 같이 결과값을 얻을 수 있는걸 확인할 수 있어요.

people.js

 

_enums.js

People 스키마를 살펴보면 성별과 혈액형 둘은 열거형에 새로 추가 되어있고, 

유니온으로 지정된 tools과 인터페이스로 지정된 givens가 각각 배열로 반환될 수 있도록 스키마가 만들어진걸 볼 수 있어요.

이와 같이 필드가 많고, 복잡한 경우와 다양하게 활용하고 싶을 때, 사용하면 좋은 것이 유니온과 인터페이스에요.

 

        📦 매개 변수란?

매개 변수는 이미 GraphQL 이야기 초반부터 알아봤었고, Mutation(뮤테이션)을 구현할 때도 이미 여러번 사용했어요.

peoples.js

위 코드에서 People에 대한 데이터를 받아오는 Query의 경우

_queries.js

11번째 줄의 요청으로 

Playground

위와 같이 Query를 날려 모든 사람들의 정보를 다 받아오도록 요청을 보낼 수 있어요. 

Query를 날릴 때 일정 조건을 주게 되면 해당 기준에 맞는 사람들만 가져오도록 구성해 보려고 해요.

_queries.js

        peopleFiltered (
            team: Int,
            sex: Sex,
            blood_type: BloodType,
            from: String
        ): [People]

위와 같이 peopleFilter()라는 Query를 만들어 주었어요.

peopleFilter() 안에는 여러 매개 변수가 들어가는 걸 확인할 수 있어요.
위 내용은 team, sex, blood_type, from에 따라 조건을 걸어 특정 사람만 가져오려는 것이에요.

people.js

그리고 위 21번째 줄과 같이 리졸버를 추가해 주었어요.
받은 args 객체에 따라 사람들 정보를 필터링 해주는 기능은 이미 dbWorks.js에 구현이 되어 있어요.

dbWorks.js

이렇게 구현되어 있는걸 확인할 수 있어요.

people.js

하지만, people Query는

_queries.js

11번째 줄에서 보듯 매개 변수를 받는 함수 형식으로 선언되어 있지 않기 때문에 받아 오는 매개 변수가 없어 필터링 기능을 이용할 수 없을 뿐이에요.

_queries.js

peopleFiltered Query는 위와 같이 매개 변수를 받은 함수 형식으로 지정된대로 매개 변수들을 받아 

people.js

dbWorks 객체의 getPeople()로 전달해 줄 수 있는 것이에요.

Playground

 

query {
  peopleFiltered (
    team: 1
    blood_type: B
    from: "Texas"
  ) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

반응형

위와 같이 Query를 날려보면

{
  "data": {
    "peopleFiltered": [
      {
        "id": "3",
        "first_name": "Nathan",
        "last_name": "Jenkins",
        "sex": "male",
        "blood_type": "B",
        "serve_years": 1,
        "role": "planner",
        "team": "1",
        "from": "Texas"
      }
    ]
  }
}

조건에 맞는 객체가 반환되는 걸 확인할 수 있어요.

위에서 조건을 준 대로 1팀에 속하고, 혈액형은 B형이고, Texas 출신의 사람이 조회된 걸 확인할 수 있어요.

Playground

 

query {
  peopleFiltered (
    team: 1
    blood_type: B
  ) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

위와 같이 출신지를 없앤 뒤 다시 Query를 날려보면

{
  "data": {
    "peopleFiltered": [
      {
        "id": "3",
        "first_name": "Nathan",
        "last_name": "Jenkins",
        "sex": "male",
        "blood_type": "B",
        "serve_years": 1,
        "role": "planner",
        "team": "1",
        "from": "Texas"
      },
      {
        "id": "12",
        "first_name": "Kate",
        "last_name": "Owen",
        "sex": "female",
        "blood_type": "B",
        "serve_years": 2,
        "role": "developer",
        "team": "1",
        "from": "Maine"
      },
      {
        "id": "25",
        "first_name": "Brian",
        "last_name": "Hunt",
        "sex": "male",
        "blood_type": "B",
        "serve_years": 2,
        "role": "planner",
        "team": "1",
        "from": "Indiana"
      }
    ]
  }
}

위와 같이 1팀에 속하는 B형인 사람들이 3명 조회 되는 걸 확인할 수 있어요.

만약 실제 서비스를 만들고 있다면 데이터베이스를 처리할 곳에서 where 등의 구문을 사용해서 구현해 주면 될 것이에요.

참고로 Query를 날릴 때, 열거형 데이터 타입의 조회할 값은 ""를 붙이면 안돼요.


이번에는 Paging(페이징) 처리에 대해 알아보도록 할게요.

_queries.js

_queries.js에 18 ~ 21번째 줄에 페이징 처리를 위한 매개 변수를 받도록 선언해 주었어요.

people.js

그런 뒤 people.js 22번째 줄에 위와 같이 peoplePaginated()를 선언해 주었어요.

해당 기능 역시 아래와 같이 이미 구현이 되어 있어요.

dbWorks.js

이렇게 페이징 저리를 위한 내용이 추가 되어 있는 걸 확인할 수 있어요.

Playground

 

query {
  peoplePaginated(page: 1, per_page: 7) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

위와 같이 Paging 처리를 위한 page(현재 Page 번호)와 per_page(조회할 데이터 개수)를 매개 변수로 전달하는 Query를 날려주면

{
  "data": {
    "peoplePaginated": [
      {
        "id": "1",
        "first_name": "Alex",
        "last_name": "Davidson",
        "sex": "male",
        "blood_type": "O",
        "serve_years": 2,
        "role": "developer",
        "team": "2",
        "from": "California"
      },
      {
        "id": "2",
        "first_name": "Lindsay",
        "last_name": "West",
        "sex": "female",
        "blood_type": "A",
        "serve_years": 3,
        "role": "designer",
        "team": "3",
        "from": "Arizona"
      },
      {
        "id": "3",
        "first_name": "Nathan",
        "last_name": "Jenkins",
        "sex": "male",
        "blood_type": "B",
        "serve_years": 1,
        "role": "planner",
        "team": "1",
        "from": "Texas"
      },
      {
        "id": "4",
        "first_name": "Christine",
        "last_name": "Harris",
        "sex": "female",
        "blood_type": "B",
        "serve_years": 2,
        "role": "developer",
        "team": "4",
        "from": "Ohio"
      },
      {
        "id": "5",
        "first_name": "Page",
        "last_name": "Adams",
        "sex": "female",
        "blood_type": "O",
        "serve_years": 5,
        "role": "developer",
        "team": "2",
        "from": "California"
      },
      {
        "id": "6",
        "first_name": "Herbert",
        "last_name": "Ford",
        "sex": "male",
        "blood_type": "A",
        "serve_years": 2,
        "role": "designer",
        "team": "5",
        "from": "Messachusetts"
      },
      {
        "id": "7",
        "first_name": "Dennis",
        "last_name": "Marshall",
        "sex": "male",
        "blood_type": "AB",
        "serve_years": 1,
        "role": "planner",
        "team": "2",
        "from": "Colorado"
      }
    ]
  }
}

위와 같이 1 ~ 7번까지의 ID를 갖은 사람들의 데이터를 반환 받을 수 있어요.

query {
  peoplePaginated(page: 1, per_page: 10) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

위와 같이 10개의 데이터를 조회하도록 하면

{
  "data": {
    "peoplePaginated": [
      {
        "id": "1",
        "first_name": "Alex",
        "last_name": "Davidson",
        "sex": "male",
        "blood_type": "O",
        "serve_years": 2,
        "role": "developer",
        "team": "2",
        "from": "California"
      },
      {
        "id": "2",
        "first_name": "Lindsay",
        "last_name": "West",
        "sex": "female",
        "blood_type": "A",
        "serve_years": 3,
        "role": "designer",
        "team": "3",
        "from": "Arizona"
      },
      {
        "id": "3",
        "first_name": "Nathan",
        "last_name": "Jenkins",
        "sex": "male",
        "blood_type": "B",
        "serve_years": 1,
        "role": "planner",
        "team": "1",
        "from": "Texas"
      },
      {
        "id": "4",
        "first_name": "Christine",
        "last_name": "Harris",
        "sex": "female",
        "blood_type": "B",
        "serve_years": 2,
        "role": "developer",
        "team": "4",
        "from": "Ohio"
      },
      {
        "id": "5",
        "first_name": "Page",
        "last_name": "Adams",
        "sex": "female",
        "blood_type": "O",
        "serve_years": 5,
        "role": "developer",
        "team": "2",
        "from": "California"
      },
      {
        "id": "6",
        "first_name": "Herbert",
        "last_name": "Ford",
        "sex": "male",
        "blood_type": "A",
        "serve_years": 2,
        "role": "designer",
        "team": "5",
        "from": "Messachusetts"
      },
      {
        "id": "7",
        "first_name": "Dennis",
        "last_name": "Marshall",
        "sex": "male",
        "blood_type": "AB",
        "serve_years": 1,
        "role": "planner",
        "team": "2",
        "from": "Colorado"
      },
      {
        "id": "8",
        "first_name": "Isabella",
        "last_name": "Martin",
        "sex": "female",
        "blood_type": "A",
        "serve_years": 3,
        "role": "developer",
        "team": "1",
        "from": "Georgia"
      },
      {
        "id": "9",
        "first_name": "Alfred",
        "last_name": "Clarke",
        "sex": "male",
        "blood_type": "AB",
        "serve_years": 4,
        "role": "designer",
        "team": "4",
        "from": "Pennsylvania"
      },
      {
        "id": "10",
        "first_name": "Tyler",
        "last_name": "Philips",
        "sex": "male",
        "blood_type": "O",
        "serve_years": 1,
        "role": "designer",
        "team": "5",
        "from": "Virginia"
      }
    ]
  }
}

1 ~ 10 ID를 갖은 사람들이 조회되는 걸 확인할 수 있고,

query {
  peoplePaginated(page: 2, per_page: 10) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

Page를 2 Page로 하여 조회 해보면

{
  "data": {
    "peoplePaginated": [
      {
        "id": "11",
        "first_name": "Noelle",
        "last_name": "Holmes",
        "sex": "female",
        "blood_type": "AB",
        "serve_years": 5,
        "role": "planner",
        "team": "3",
        "from": "California"
      },
      {
        "id": "12",
        "first_name": "Kate",
        "last_name": "Owen",
        "sex": "female",
        "blood_type": "B",
        "serve_years": 2,
        "role": "developer",
        "team": "1",
        "from": "Maine"
      },
      {
        "id": "13",
        "first_name": "Priscilla",
        "last_name": "Walker",
        "sex": "female",
        "blood_type": "O",
        "serve_years": 2,
        "role": "developer",
        "team": "4",
        "from": "California"
      },
      {
        "id": "14",
        "first_name": "Shirley",
        "last_name": "Grant",
        "sex": "female",
        "blood_type": "AB",
        "serve_years": 1,
        "role": "developer",
        "team": "3",
        "from": "Messachusetts"
      },
      {
        "id": "15",
        "first_name": "Byron",
        "last_name": "Barnes",
        "sex": "male",
        "blood_type": "A",
        "serve_years": 3,
        "role": "designer",
        "team": "1",
        "from": "Idaho"
      },
      {
        "id": "16",
        "first_name": "Toby",
        "last_name": "Lewis",
        "sex": "male",
        "blood_type": "A",
        "serve_years": 1,
        "role": "planner",
        "team": "3",
        "from": "New York"
      },
      {
        "id": "17",
        "first_name": "Barbara",
        "last_name": "White",
        "sex": "female",
        "blood_type": "AB",
        "serve_years": 4,
        "role": "developer",
        "team": "4",
        "from": "Ohio"
      },
      {
        "id": "18",
        "first_name": "Arnold",
        "last_name": "Armstrong",
        "sex": "male",
        "blood_type": "AB",
        "serve_years": 5,
        "role": "designer",
        "team": "4",
        "from": "Nevada"
      },
      {
        "id": "19",
        "first_name": "Eleanor",
        "last_name": "Smith",
        "sex": "female",
        "blood_type": "B",
        "serve_years": 2,
        "role": "planner",
        "team": "2",
        "from": "Texas"
      },
      {
        "id": "20",
        "first_name": "Nina",
        "last_name": "Dawson",
        "sex": "female",
        "blood_type": "O",
        "serve_years": 1,
        "role": "developer",
        "team": "5",
        "from": "Virginia"
      }
    ]
  }
}

위와 같이 11 ~ 20의 ID를 갖은 사람들이 조회되는 걸 확인할 수 있어요.

_queries.js

        peoplePaginated (
            team: Int,
            sex: Sex,
            blood_type: BloodType,
            from: String
            page: Int!,
            per_page: Int!
        ): [People]

위와 같이 매개 변수를 추가해 주면 어떻게 확장 활용 할 수 있을까요?

Playground

 

query {
  peoplePaginated(
    team: 2,
    page: 1, 
    per_page: 3
  ) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

위와 같이 조건을 추가하여 필터링 기능을 추가로 사용해서 페이징 처리를 할 수 있도록 확장하여 사용할 수 있어요.

{
  "data": {
    "peoplePaginated": [
      {
        "id": "1",
        "first_name": "Alex",
        "last_name": "Davidson",
        "sex": "male",
        "blood_type": "O",
        "serve_years": 2,
        "role": "developer",
        "team": "2",
        "from": "California"
      },
      {
        "id": "5",
        "first_name": "Page",
        "last_name": "Adams",
        "sex": "female",
        "blood_type": "O",
        "serve_years": 5,
        "role": "developer",
        "team": "2",
        "from": "California"
      },
      {
        "id": "7",
        "first_name": "Dennis",
        "last_name": "Marshall",
        "sex": "male",
        "blood_type": "AB",
        "serve_years": 1,
        "role": "planner",
        "team": "2",
        "from": "Colorado"
      }
    ]
  }
}

team이 2인 사람들만 뽑아서 첫번째 페이지에서 3 사람의 데이터만 뽑아온걸 확인할 수 있어요.
이렇게 하면 검색 기능과 페이징 기능을 함께 만들어 줄 수 있겠어요.

한 가지 꿀팁을 작성해 보자면

Playground

여태껏 우리는 위와 같이 Query를 날려 반환 받는 결과값 객체 이름을 Query 이름으로 받아왔었어요.

Playground

그런데 위와 같이 별칭(Alias)를 지정해서 Query를 날리고, 반환 받는 결과값 이름을 해당 별칭으로 받을 수도 있어요.

이게 필요할 때는 한 요청으로 사람들의 목록을 받아올 때, 특정 기준으로 분리해서 받아오고 싶은 경우가 생길 수 있는데,
예를 들면 B형의 성별이 남자인 사람들에 대한 별칭을 나쁜 남자(주니는 B형이에요.. 😭)라고 붙혀주고, 

Playground

 

query {
  badGuys: peopleFiltered (
    blood_type: B,
    sex: male
  ) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
  
  newyorkers: peopleFiltered (
    from: "New York"
  ) {
    id
    first_name
    last_name
    sex
    blood_type
    serve_years
    role
    team
    from
  }
}

위와 같이 B형인 남자와 New york에서 온 사람을 각각 조회하고 싶을 때, 별칭을 이용한다면 지정한대로 구분된 결과값을 받을 수 있게 돼요.

 

 

 

        📦 Input Type이란?

뮤테이션에 여러 매개 변수를 담아 새로운 데이터를 만드는 걸 이 전 글에서 알아보았었어요.

people.js

위와 같이 People 스키마처럼 필드가 많은 경우

_mutations.js

뮤테이션의 매개 변수로 선언해줘야 하는 것들이 어마어마하게 많아질거에요.
이를 깔끔하게 해결 하기 위해 매개 변수들을 묶어 보내는게 바로 Input Type이에요.

people.js

 

    input PostPersonInput {
        team: ID!
        first_name: String!
        last_name: String!
        sex: Sex!
        blood_type: BloodType!
        serve_years: Int!
        role: Role!
        from: String!
    }

위와 같이 PostPersonInput이라는 스키마를 만들어 주었어요.

주목해야 하는 것은 여태 선언했던 type과는 달리 input이라는 형식을 선언했다는 것이에요.

people.js

    Mutation: {
        postPerson: (parent, args) => dbWorks.postPerson(args),
    }

그런 뒤 위와 같이 뮤테이션을 만들어주고, postPerson()을 선언해 주었어요.
현재 해당 뮤테이션은 args 객체에 어떤 것이 들어갔는지 알 수가 없어요.
왜냐하면 스키마에 작성되지 않은 뮤테이션이기 때문에 아래와 같이 터미널은 난리가 났을거에요.

 

_mutations.js

_nutations.js에 7번째 줄과 같이 PostPerson()을 선언해 주었어요.
이 때, 반환값은 People 객체인데, Null을 허용하지 않도록 선언해 주었어요.

people.js

postPerson()은 input이라는 매개 변수를 받게 되는데, people.js의 input PostPersonInput 형태의 데이터를 받아오는 친구에요.

그렇기 때문에 뮤테이션이 한 줄로 깔끔하게 끝난 것을 볼 수 있어요.

Playground

 

mutation {
  postPerson(input: {
    first_name: "Juny"
    last_name: "H"
    sex: male
    blood_type: B
    serve_years: 10
    role: developer
    team: 1
    from: "Seoul"
  }) {
    id
    first_name
    last_name
    sex
    blood_type
    role
    team
    from
  }
}

위와 같이 Query를 날려 데이터 저장 요청을 보내보면
이 때, postPerson()에 매개 변수로 input을 넣어주는데, 이 때, 객체로 {} 안에 정보를 담아 

people.js

위 input 형식으로 서버에 Create 요청을 보낼 수 있는 것이에요.

{
  "data": {
    "postPerson": {
      "id": "51",
      "first_name": "Juny",
      "last_name": "H",
      "sex": "male",
      "blood_type": "B",
      "role": "developer",
      "team": "1",
      "from": "Seoul"
    }
  }
}

저장된 객체를 다시 반환 받을 수 있어요.

지금까지 Apollo Server를 이용하여 GraphQL과 Node.js를 이용하여 Backend 구성 방법에 대해 알아보았어요.

 

 

GraphQL과 타입스크립트로 개발하는 웹 서비스:설계부터 개발·배포까지 따라 하며 완성하는 웹 풀

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

 

 

 

🧐 참고 자료

해당 내용은 아래 강의를 공부하면서 정리한 내용임을 알려 드립니다.

[무료] 얄팍한 GraphQL과 Apollo - 인프런 | 강의

 

 

 

카카오페이 | 마음 놓고 금융하다