GraphQL과 Apollo 열 다섯번째 이야기 - React와 Apollo Client - Query와 Mutation 사용하여 웹 페이지 만들기

 

 

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

 

 

 

 

리액트를 다루는 기술

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

 

 

 

GitHub - junyharang-coding-study/GraphQL-Study: 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 열 다섯번째 이야기

    🔽  React와 Apollo Client

        📦 Query를 사용하여 웹 페이지 만들기

이번에는 Team을 이용해서 실습을 진행해 볼게요.

src/components/teams.js

필요한 Module(모듈)을 Import 해 줍니다.
이번에는 Mutation을 사용해 볼 것이기 때문에 useMutation도 추가가 되었어요.

src/components/teams.js

useStatus()는 React의 요소이기 때문에 해당 변수에 맞춰 변화 되는 데이터를 뿌려주는 친구에요.

BackEnd - src/graphql/schema/schema.graphqls

 

src/graphql/schema/team/team.graphqls

 

src/graphql/schema/team/team.graphqls

 

src/graphql/schema/people/people.graphqls

이번에는 Team 목록과 해당 Team에 소속된 팀원을 가져오는 Query를 작성해 볼게요.

이 Query는 teamId를 입력하면 해당 Team에 정보를 가져오고, 안 넣으면 모든 Team 정보를 가져와요.

http://localhost:8081/graphql (teamId를 안 넣었을 때)

 

{
  "data": {
    "getTeamAndMembersByTeamIdOrNothing": {
      "statusCode": 200,
      "message": "Success",
      "data": [
        {
          "teamId": "1",
          "manager": "Mandy Warren",
          "office": "101A",
          "extensionNumber": "#5709",
          "mascot": "Panda",
          "cleaningDuty": "Monday",
          "project": "Hyperion",
          "members": [
            {
              "peopleId": "3",
              "teamId": 1,
              "lastName": "Nathan",
              "firstName": "Jenkins",
              "sex": "male",
              "bloodType": "B",
              "serveYears": 1,
              "role": "planner",
              "hometown": "Texas"
            },
            {
              "peopleId": "8",
              "teamId": 1,
              "lastName": "Isabella",
              "firstName": "Martin",
              "sex": "female",
              "bloodType": "A",
              "serveYears": 3,
              "role": "developer",
              "hometown": "Georgia"
            },
            {
              "peopleId": "12",
              "teamId": 1,
              "lastName": "Kate",
              "firstName": "Owen",
              "sex": "female",
              "bloodType": "B",
              "serveYears": 2,
              "role": "developer",
              "hometown": "Maine"
            },
            {
              "peopleId": "16",
              "teamId": 1,
              "lastName": "Byron",
              "firstName": "Barnes",
              "sex": "male",
              "bloodType": "A",
              "serveYears": 3,
              "role": "designer",
              "hometown": "Idaho"
            },
            {
              "peopleId": "27",
              "teamId": 1,
              "lastName": "Brian",
              "firstName": "Hunt",
              "sex": "male",
              "bloodType": "B",
              "serveYears": 2,
              "role": "planner",
              "hometown": "Indiana"
            },
            {
              "peopleId": "29",
              "teamId": 1,
              "lastName": "Violet",
              "firstName": "Pearson",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 5,
              "role": "designer",
              "hometown": "Pennsylvania"
            },
            {
              "peopleId": "35",
              "teamId": 1,
              "lastName": "Sally",
              "firstName": "Fox",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 5,
              "role": "planner",
              "hometown": "Messachusetts"
            },
            {
              "peopleId": "42",
              "teamId": 1,
              "lastName": "Russ",
              "firstName": "Lawrence",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 5,
              "role": "designer",
              "hometown": "New York"
            },
            {
              "peopleId": "47",
              "teamId": 1,
              "lastName": "Leroy",
              "firstName": "Elliott",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 2,
              "role": "developer",
              "hometown": "Indiana"
            },
            {
              "peopleId": "50",
              "teamId": 1,
              "lastName": "Ned",
              "firstName": "Butler",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 2,
              "role": "planner",
              "hometown": "Messachusetts"
            }
          ]
        },
        {
          "teamId": "2",
          "manager": "Stewart Grant",
          "office": "101B",
          "extensionNumber": "#4012",
          "mascot": "Tadpole",
          "cleaningDuty": "Tuesday",
          "project": "Zen",
          "members": [
            {
              "peopleId": "1",
              "teamId": 2,
              "lastName": "Alex",
              "firstName": "Davidson",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 2,
              "role": "developer",
              "hometown": "California"
            },
            {
              "peopleId": "5",
              "teamId": 2,
              "lastName": "Page",
              "firstName": "Adams",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 5,
              "role": "developer",
              "hometown": "California"
            },
            {
              "peopleId": "7",
              "teamId": 2,
              "lastName": "Dennis",
              "firstName": "Marshall",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 1,
              "role": "planner",
              "hometown": "Colorado"
            },
            {
              "peopleId": "15",
              "teamId": 2,
              "lastName": "Page",
              "firstName": "Adams",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 5,
              "role": "developer",
              "hometown": "California"
            },
            {
              "peopleId": "20",
              "teamId": 2,
              "lastName": "Eleanor",
              "firstName": "Smith",
              "sex": "female",
              "bloodType": "B",
              "serveYears": 2,
              "role": "planner",
              "hometown": "Texas"
            },
            {
              "peopleId": "24",
              "teamId": 2,
              "lastName": "Zelda",
              "firstName": "Hall",
              "sex": "female",
              "bloodType": "A",
              "serveYears": 3,
              "role": "developer",
              "hometown": "Tennessee"
            },
            {
              "peopleId": "33",
              "teamId": 2,
              "lastName": "Victoria",
              "firstName": "Brown",
              "sex": "female",
              "bloodType": "B",
              "serveYears": 4,
              "role": "planner",
              "hometown": "Georgia"
            },
            {
              "peopleId": "44",
              "teamId": 2,
              "lastName": "Nancy",
              "firstName": "Brooks",
              "sex": "female",
              "bloodType": "A",
              "serveYears": 1,
              "role": "developer",
              "hometown": "California"
            },
            {
              "peopleId": "45",
              "teamId": 2,
              "lastName": "Oliver",
              "firstName": "Simpson",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 3,
              "role": "designer",
              "hometown": "Arizona"
            },
            {
              "peopleId": "49",
              "teamId": 2,
              "lastName": "Simon",
              "firstName": "Henderson",
              "sex": "male",
              "bloodType": "A",
              "serveYears": 4,
              "role": "designer",
              "hometown": "Pennsylvania"
            }
          ]
        },
        {
          "teamId": "3",
          "manager": "Smantha Wheatly",
          "office": "102A",
          "extensionNumber": "#3852",
          "mascot": "Falcon",
          "cleaningDuty": "Wednesday",
          "project": "Duranno",
          "members": [
            {
              "peopleId": "2",
              "teamId": 3,
              "lastName": "Lindsay",
              "firstName": "West",
              "sex": "female",
              "bloodType": "A",
              "serveYears": 3,
              "role": "designer",
              "hometown": "Arizona"
            },
            {
              "peopleId": "11",
              "teamId": 3,
              "lastName": "Noelle",
              "firstName": "Holmes",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 5,
              "role": "planner",
              "hometown": "California"
            },
            {
              "peopleId": "14",
              "teamId": 3,
              "lastName": "Shirley",
              "firstName": "Grant",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 1,
              "role": "developer",
              "hometown": "Messachusetts"
            },
            {
              "peopleId": "17",
              "teamId": 3,
              "lastName": "Toby",
              "firstName": "Lewis",
              "sex": "male",
              "bloodType": "A",
              "serveYears": 1,
              "role": "planner",
              "hometown": "New York"
            },
            {
              "peopleId": "22",
              "teamId": 3,
              "lastName": "Jamie",
              "firstName": "Reynolds",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 1,
              "role": "designer",
              "hometown": "Arizona"
            },
            {
              "peopleId": "31",
              "teamId": 3,
              "lastName": "Raymond",
              "firstName": "Cook",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 1,
              "role": "planner",
              "hometown": "Kansas"
            },
            {
              "peopleId": "34",
              "teamId": 3,
              "lastName": "Russel",
              "firstName": "Jones",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 2,
              "role": "designer",
              "hometown": "Nebraska"
            },
            {
              "peopleId": "38",
              "teamId": 3,
              "lastName": "Grant",
              "firstName": "Cole",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 4,
              "role": "designer",
              "hometown": "Pennsylvania"
            },
            {
              "peopleId": "40",
              "teamId": 3,
              "lastName": "Amber",
              "firstName": "Russel",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 5,
              "role": "developer",
              "hometown": "Kansas"
            },
            {
              "peopleId": "46",
              "teamId": 3,
              "lastName": "Pansy",
              "firstName": "Moore",
              "sex": "female",
              "bloodType": "B",
              "serveYears": 2,
              "role": "planner",
              "hometown": "Minnesota"
            }
          ]
        },
        {
          "teamId": "4",
          "manager": "Francis Buckley",
          "office": "103B",
          "extensionNumber": "#1039",
          "mascot": "Beaver",
          "cleaningDuty": "Thursday",
          "project": "Genghis",
          "members": [
            {
              "peopleId": "4",
              "teamId": 4,
              "lastName": "Christine",
              "firstName": "Harris",
              "sex": "female",
              "bloodType": "B",
              "serveYears": 2,
              "role": "developer",
              "hometown": "Ohio"
            },
            {
              "peopleId": "9",
              "teamId": 4,
              "lastName": "Alfred",
              "firstName": "Clarke",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 4,
              "role": "designer",
              "hometown": "Pennsylvania"
            },
            {
              "peopleId": "13",
              "teamId": 4,
              "lastName": "Priscilla",
              "firstName": "Walker",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 2,
              "role": "developer",
              "hometown": "California"
            },
            {
              "peopleId": "18",
              "teamId": 4,
              "lastName": "Barbara",
              "firstName": "White",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 4,
              "role": "developer",
              "hometown": "Ohio"
            },
            {
              "peopleId": "19",
              "teamId": 4,
              "lastName": "Arnold",
              "firstName": "Armstrong",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 5,
              "role": "designer",
              "hometown": "Nevada"
            },
            {
              "peopleId": "23",
              "teamId": 4,
              "lastName": "Myrtle",
              "firstName": "Hamilton",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 1,
              "role": "developer",
              "hometown": "Maine"
            },
            {
              "peopleId": "25",
              "teamId": 4,
              "lastName": "Edgar",
              "firstName": "Willson",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 2,
              "role": "designer",
              "hometown": "Texas"
            },
            {
              "peopleId": "26",
              "teamId": 4,
              "lastName": "Naomi",
              "firstName": "Taylor",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 5,
              "role": "developer",
              "hometown": "Oklahoma"
            },
            {
              "peopleId": "36",
              "teamId": 4,
              "lastName": "Chloe",
              "firstName": "Bailey",
              "sex": "female",
              "bloodType": "A",
              "serveYears": 5,
              "role": "developer",
              "hometown": "New York"
            },
            {
              "peopleId": "41",
              "teamId": 4,
              "lastName": "Peter",
              "firstName": "Payne",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 3,
              "role": "planner",
              "hometown": "California"
            }
          ]
        },
        {
          "teamId": "5",
          "manager": "Blake Smith",
          "office": "104A",
          "extensionNumber": "#7750",
          "mascot": "Wildcat",
          "cleaningDuty": "Friday",
          "project": "Acheron",
          "members": [
            {
              "peopleId": "6",
              "teamId": 5,
              "lastName": "Herbert",
              "firstName": "Ford",
              "sex": "male",
              "bloodType": "A",
              "serveYears": 2,
              "role": "designer",
              "hometown": "Messachusetts"
            },
            {
              "peopleId": "10",
              "teamId": 5,
              "lastName": "Tyler",
              "firstName": "Philips",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 1,
              "role": "designer",
              "hometown": "Virginia"
            },
            {
              "peopleId": "21",
              "teamId": 5,
              "lastName": "Nina",
              "firstName": "Dawson",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 1,
              "role": "developer",
              "hometown": "Virginia"
            },
            {
              "peopleId": "28",
              "teamId": 5,
              "lastName": "Katherine",
              "firstName": "Bennett",
              "sex": "female",
              "bloodType": "A",
              "serveYears": 3,
              "role": "designer",
              "hometown": "Utah"
            },
            {
              "peopleId": "30",
              "teamId": 5,
              "lastName": "Margaret",
              "firstName": "Davies",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 2,
              "role": "developer",
              "hometown": "California"
            },
            {
              "peopleId": "32",
              "teamId": 5,
              "lastName": "Garth",
              "firstName": "Roberts",
              "sex": "male",
              "bloodType": "A",
              "serveYears": 4,
              "role": "designer",
              "hometown": "Minnesota"
            },
            {
              "peopleId": "37",
              "teamId": 5,
              "lastName": "Will",
              "firstName": "McDonald",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 1,
              "role": "developer",
              "hometown": "Wyoming"
            },
            {
              "peopleId": "39",
              "teamId": 5,
              "lastName": "Audrey",
              "firstName": "Fisher",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 2,
              "role": "designer",
              "hometown": "Ohio"
            },
            {
              "peopleId": "43",
              "teamId": 5,
              "lastName": "Margot",
              "firstName": "Watson",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 2,
              "role": "planner",
              "hometown": "Virginia"
            },
            {
              "peopleId": "48",
              "teamId": 5,
              "lastName": "Barbara",
              "firstName": "Murphy",
              "sex": "female",
              "bloodType": "O",
              "serveYears": 1,
              "role": "developer",
              "hometown": "Texas"
            }
          ]
        }
      ]
    }
  }
}

http://localhost:8081/graphql (teamId를 1로 넣었을 때)

 

{
  "data": {
    "getTeamAndMembersByTeamIdOrNothing": {
      "statusCode": 200,
      "message": "Success",
      "data": [
        {
          "teamId": "1",
          "manager": "Mandy Warren",
          "office": "101A",
          "extensionNumber": "#5709",
          "mascot": "Panda",
          "cleaningDuty": "Monday",
          "project": "Hyperion",
          "members": [
            {
              "peopleId": "3",
              "teamId": 1,
              "lastName": "Nathan",
              "firstName": "Jenkins",
              "sex": "male",
              "bloodType": "B",
              "serveYears": 1,
              "role": "planner",
              "hometown": "Texas"
            },
            {
              "peopleId": "8",
              "teamId": 1,
              "lastName": "Isabella",
              "firstName": "Martin",
              "sex": "female",
              "bloodType": "A",
              "serveYears": 3,
              "role": "developer",
              "hometown": "Georgia"
            },
            {
              "peopleId": "12",
              "teamId": 1,
              "lastName": "Kate",
              "firstName": "Owen",
              "sex": "female",
              "bloodType": "B",
              "serveYears": 2,
              "role": "developer",
              "hometown": "Maine"
            },
            {
              "peopleId": "16",
              "teamId": 1,
              "lastName": "Byron",
              "firstName": "Barnes",
              "sex": "male",
              "bloodType": "A",
              "serveYears": 3,
              "role": "designer",
              "hometown": "Idaho"
            },
            {
              "peopleId": "27",
              "teamId": 1,
              "lastName": "Brian",
              "firstName": "Hunt",
              "sex": "male",
              "bloodType": "B",
              "serveYears": 2,
              "role": "planner",
              "hometown": "Indiana"
            },
            {
              "peopleId": "29",
              "teamId": 1,
              "lastName": "Violet",
              "firstName": "Pearson",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 5,
              "role": "designer",
              "hometown": "Pennsylvania"
            },
            {
              "peopleId": "35",
              "teamId": 1,
              "lastName": "Sally",
              "firstName": "Fox",
              "sex": "female",
              "bloodType": "AB",
              "serveYears": 5,
              "role": "planner",
              "hometown": "Messachusetts"
            },
            {
              "peopleId": "42",
              "teamId": 1,
              "lastName": "Russ",
              "firstName": "Lawrence",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 5,
              "role": "designer",
              "hometown": "New York"
            },
            {
              "peopleId": "47",
              "teamId": 1,
              "lastName": "Leroy",
              "firstName": "Elliott",
              "sex": "male",
              "bloodType": "AB",
              "serveYears": 2,
              "role": "developer",
              "hometown": "Indiana"
            },
            {
              "peopleId": "50",
              "teamId": 1,
              "lastName": "Ned",
              "firstName": "Butler",
              "sex": "male",
              "bloodType": "O",
              "serveYears": 2,
              "role": "planner",
              "hometown": "Messachusetts"
            }
          ]
        }
      ]
    }
  }
}

FrontEnd - src/components/teams.js

BackEnd Schema에 맞춰 Query를 작성해 주었어요.

 

FrontEnd - src/components/teams.js

728x90

FrontEnd - src/components/teams.js

비어있던 AsideItems() 를 위와 같이 채워 주었어요.

http://localhost:3000/

그럼 위와 같이 각 팀에 소속된 팀원들의 목록을 통해 검정색 Side 부분을 채운걸 확인할 수 있어요.
그리고, 팀원의 역할에 따라 Icon(아이콘)이 표시된 걸 확인할 수 있죠.
개발자 도구로 확인해 보니 값도 잘 가져온 걸 알 수 있어요.

src/App.js

Site가 새로 실행 되었을 때, 기본적으로 팀을 보여주기 위해 위와 같이 App.js에
useState()를 Roles에서 Teams로 변경해 주었어요.

http://localhost:3000/

이제 새로고침하면 위와 같이 팀 정보를 기본적으로 가져오는 걸 확인할 수 있어요.

현재는 모든 팀의 정보와 팀원들의 정보를 받아오는데,
필요한 부분만 요청하게 Query를 수정하여 Overfetching 문제를 해결해 볼게요.

FrontEnd - src/components/teams.js

http://localhost:3000/

위와 같이 필요한 값만 요청하여 받아온 걸 확인할 수 있어요.

 

 

        📦 팀원 선택

이번에는 팀을 선택했을 때, 해당 팀 정보를 가져와서 회색 부분을 채울 수 있도록 구성해 볼게요.

BackEnd - src/graphql/schema/schema.graphqls

 

src/graphql/schema/team/team.graphqls

 

src/graphql/schema/team/team.graphqls

http://localhost:8081/graphql

FrontEnd - src/components/teams.js

위의 Query는 teamId를 인자로 받아 팀에 대한 자세한 정보를 받아오는 요청에 대한 Query에요.

src/components/teams.js

반응형

src/components/teams.js

 

src/components/teams.js

 

src/components/teams.js

 

src/components/teams.js

위와 같이 비어 있던 MainContents()를 채워 주었어요.

http://localhost:3000/

그리고 새로고침을 하고, 팀을 선택하면

http://localhost:3000/

각 팀의 정보들이 input Element(엘리먼트)들의 값으로 채워 넣어지는 걸 확인할 수 있어요.

src/components/teams.js

 

src/components/teams.js

이렇게 팀을 클릭했을 때, 값을 가져올 수 있는 이유는 77번째 줄에 onClick(마우스로 클릭 이벤트)가 발생할 때마다 
setContentId로 해당 팀의 ID가 전달되게 돼요.

해당 contentId를 기준으로 

src/components/teams.js

102번째 줄에 인자값으로 전달되게 되고,

src/components/teams.js

해당 ID를 기준으로 해당 팀의 정보를 GraphQL Server로 요청하여 값을 받아와 지는 것이에요.

http://localhost:3000/

그래서 Team을 클릭할 때마다 teamId를 GraphQL Server로 요청하게 되고, 해당 값을 받아오는 것이에요.

 

 

 

        📦 Mutation 사용하여 웹 페이지 만들기 - 항목 삭제

이번에는 Mutation을 사용해서 GraphQL에 등록, 수정, 삭제 등을 할 수 있도록 만들어볼게요.

BackEnd - src/graphql/schema/schema.graphqls

 

BackEnd - src/graphql/schema/team/team.graphqls

 

http://localhost:8081/graphql

FrontEnd - src/components/teams.js

위와 같이 teamId를 받아 Team 삭제 요청을 보낼 Query 함수를 정의해 주었어요.

FrontEnd - src/components/teams.js

Teams() 아래쪽에 위와 같이 삭제를 처리할 코드를 작성해 주었어요.

이 코드를 분석해 보면

FrontEnd - src/components/teams.js

이용자가 어떤 팀을 선택하고, 삭제 버튼을 누르게 되면

214번째 줄의 execDeleteTeam()이 호출되게 만들거에요.

FrontEnd - src/components/teams.js

바로 이렇게 말이에요.

그럼 삭제 버튼을 누르게 되면 execDeleteTeam()가 호출되고, 
최초 215번째 줄을 통해 항목을 삭제하겠냐는 질문을 하게 될거고, 삭제하겠다고 전달하게 되면 

FrontEnd - src/components/teams.js

220번째 줄의 useMutaion()으로 지정된
DELETE_TEAM이라는 Mutation을 GraphQL Server로 요청하게 될거에요.

그런 뒤 GraphQL Server로부터 받게 된 응답 결과를
220번째 줄 onCompleted의 deleteTeamCompleted()이 호출하게 되어 222 ~ 226번째 줄 로직을 처리하게 돼요.

223번째 줄을 통해 응답값을 Log로 출력해 주고, 경고창을 통해 항목이 삭제되었다는 것을 알려주게 처리해 보았어요.
마지막으로는 삭제가 완료 되었으니 아무 팀도 선택되지 않은 상태로 만들어주기 위해 225번째 줄과 같이 입력해 두었어요.

http://localhost:3000/

테스트를 위해 위와 같이 개발자 도구를 Console(콘솔)로 열어주었어요.
그리고, 2팀을 선택해 줄게요.

http://localhost:3000/

이번엔 삭제 버튼을 눌러볼게요.

http://localhost:3000/

그럼 위와 같이 삭제할 거냐는 질문이 나온걸 알 수 있어요.

확인을 눌러볼게요.

http://localhost:3000/

위와 같이 몇 팀의 ID가 삭제 되었는지 경고창을 통해 알려주고 있어요.

Console.log를 보면 응답값이 출력된 걸 볼 수 있고, data로 삭제된 teamId가 반환된걸 확인할 수 있어요.

근데 새로고침을 하지 않으면 Team2의 목록이 남아있을 거에요.
새로 고침을 하게 되면

http://localhost:3000/

이렇게 사라지게 될거에요.

이 이유는 바뀐 데이터를 적용하지 않았기 때문이에요. 즉, Randering 하지 않았기 때문이죠.

그럼 Re Randering이 알아서 되도록 코드를 수정해 볼게요.

FrontEnd - src/components/teams.js

여태 선언만 하고, 사용하지 않았던 72번째 줄의 refetch()를 이용해 볼거에요.
refetch()를 이용하면 GraphQL Server에 Query를 다시 요청해서 Data를 받아오게 할 수 있어요.

FrontEnd - src/components/teams.js

최초 위와 같이 teams() 위에 전역으로 사용할 변수를 선언해 주었어요.

 

FrontEnd - src/components/teams.js

그리고, refetch() 결과 값이 선언해준 전역 변수에 담기도록 해 주었어요.

FrontEnd - src/components/teams.js

해당 Logic(로직)은 삭제가 완료되고 나서 바로 진행되어야 하기 때문에 228번째 줄과 같이 선언해 주었어요.

다시 Site를 새로고침 하고, 잘 적용되었는지 Test 해볼게요. 이번에는 5번 팀을 날려볼게요.

http://localhost:3000/

 

http://localhost:3000/

 

http://localhost:3000/

 

http://localhost:3000/

삭제를 한 뒤 다시 GraphQL Server에 Team 정보 요청을 보내 값을 받아와 새로고침을 하지 않았음에도
Team 5번 정보가 사라진걸 알 수 있어요.

 

 

 

 

        📦 Mutation 사용하여 웹페이지 만들기 - 항목 수정

이번에는 CRUD의 Update 로직을 구현해 볼게요.

BackEnd - src/graphql/schema/schema.graphqls

 

BackEnd - src/graphql/schema/schema.graphqls

BackEnd - src/graphql/schema/team/team.graphqls

 

http://localhost:8081/graphql

http://localhost:3000/

 

FrontEnd - src/components/teams.js

FrontEnd - src/components/teams.js

Teams() 안에 위와 같이 수정 관련 로직을 추가해 주었어요.

FrontEnd - src/components/teams.js

그리고, 수정 버튼이 클릭되면 해당 이벤트로 인해 execUpdateTeam()이 호출되게 해 두었어요.

참고로 Mutation에 인자인 객체는 228번째 줄 variables로 들어가게 된답니다.

inputs는 아래와 같이 동작해요.

http://localhost:3000/

위와 같이 input 들에 값이 나오게 되면

137 ~ 142번째 줄과 같이 Inputs에 값이 들어가게 되는 구조에요.

잘 되는지 한번 Test 해 볼게요.

http://localhost:3000/

4번 Team을 가지고 Test 해 볼게요.

위와 같이 관리자 이름을 Junyss로 바꿔보려고 해요.
그런 다음 수정 버튼을 눌러볼게요.

http://localhost:3000/

http://localhost:3000/

정상적으로 처리 되는 걸 확인할 수 있어요.

        📦 Mutation 사용하여 웹 페이지 만들기 - 항목 등록

BackEnd - src/graphql/schema/schema.graphqls

 

BackEnd - src/graphql/schema/team/team.graphqls

 

BackEnd - src/graphql/schema/team/team.graphqls

http://localhost:8081/graphql

FrontEnd - src/components/teams.js

 

FrontEnd - src/components/teams.js

Teams() 안에 등록을 위한 로직을 위와 같이 추가해 주었어요.

FrontEnd - src/components/teams.js

 

 

http://localhost:3000/

위와 같이 입력해 주고, 등록 버튼을 눌러볼게요.

http://localhost:3000/

 

 

http://localhost:3000/

이렇게 정상 추가 되었고, 팀원은 없다보니 위와 같이 나온걸 알 수 있어요.


이렇게 GraphQL의 Query와 Mutation을 사용하여
GraphQL Server에게 정보를 요청하고, 등록하고, 수정 및 삭제 하는 것에 대해 공부 및 실습해 보았어요.

이제 GraphQL Server나, Client 구축 시 어떤 식으로 구축을 해야 하는지 감이 잡혔어요!

주니가 준비한 GraphQL과 Apollo 이야기는 여기까지에요.

함께 해 주셔서 고맙습니다.

 

GitHub - junyharang-coding-study/GraphQL-Study: GraphQL을 공부하고, 실습한 코드에요 😀

 

 

실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발

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

 

 

 

 

 

🧐 참고 자료

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

 

 

Get started with Apollo Client

 

 

 

 

 

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