home강의 홈으로
Section 4. GraphQL 클라이언트 만들어보기
Lesson 1. React와 Apollo Client

1. React와 Apollo Client

SPA와 React의 개념

  • 참고영상



챕터 4강 실습

  • 1-3-graphql-exp 폴더에서 서버 실행하기
  • 4-1-react-before-apollo 폴더 열기
  • 🚨 React 모듈 설치

    npm install -g react-scripts

🔍 코드 살펴보기

App.js

코드 설명
NavMenus menu값에 따라 상단 App-header의 버튼을 표시하는 함수
mainComp App-header 아래 메인 화면에 나타날 컴포넌트 매핑

roles.js, teams.js, people.js

코드 설명 비고
AsideItems 메인화면 왼쪽의 사이드 섹션 리스트가 나타날 곳
MainContents 메인화면 리스트 각 항목의 내용부가 표시될 곳



Apollo Client 사용하기


아폴로 클라이언트 모듈 적용

npm install @apollo/client graphql

App.js

// ... import { ApolloProvider } from '@apollo/client'; import { ApolloClient, InMemoryCache } from '@apollo/client' // ...
  • ApolloClient 모듈 임포트

App.js

// ... const client = new ApolloClient({ uri: 'http://localhost:4000', cache: new InMemoryCache() }); // ...
코드 설명
client GraphQL 서버로와 정보를 주고받을 ApolloClient 객체
uri GraphQL 서버의 주소
cache InMemoryCache를 통한 캐시 관리

// ... return ( <div className="App"> <ApolloProvider client={client}> <header className="App-header"> <h1>Company Management</h1> <nav> <ul> {NavMenus()} </ul> </nav> </header> <main> {mainComp[menu]} </main> </ApolloProvider> </div> ); // ...
  • 내부 요소들을 ApolloProvider 로 감싸준다.



GraphQL 서버로부터 목록 받아와 표시하기

roles.js

// ... import { useState } from 'react'; import { useQuery, gql } from '@apollo/client'; // ...
  • 필요한 모듈들 임포트

roles.js

// ... const GET_ROLES = gql` query GetRoles { roles { id } } `; // ...
  • 쿼리 작성

roles.js

// ... const [contentId, setContentId] = useState(''); // ...
  • 렌더링될 컨텐츠 id를 저장할 state 지정

roles.js

// ... function AsideItems () { const roleIcons = { developer: '💻', designer: '🎨', planner: '📝' } const { loading, error, data } = useQuery(GET_ROLES); if (loading) return <p className="loading">Loading...</p> if (error) return <p className="error">Error :(</p> return ( <ul> {data.roles.map(({id}) => { return ( <li key={id} className={'roleItem ' + (contentId === 'id' ? 'on' : '')} onClick={() => {setContentId(id)}}> <span>{contentId === id ? '🔲' : '⬛'}</span> {roleIcons[id]} {id} </li> ) })} </ul> ); } // ...
  • AsideItems 함수에서, GraphQL로부터 데이터를 받아와 목록을 렌더링하도록 작성
코드 설명
loading GraphQL 서버에서 정보를 받아오는 동안 표시
error 요청에 오류가 발생할 시 반환
data GraphQL 요청대로 받아진 정보



GraphQL 서버로부터 id로 컨텐츠 받아와 표시하기


roles.js

// ... const GET_ROLE = gql` query GetRole($id: ID!) { role(id: $id) { id requirement members { id last_name serve_years } equipments { id } softwares { id } } } `; // ...
  • 쿼리 작성

roles.js

function MainContents () { const { loading, error, data } = useQuery(GET_ROLE, { variables: {id: contentId} }) if (loading) return <p className="loading">Loading...</p> if (error) return <p className="error">Error :(</p> if (contentId === '') return (<div className="roleWrapper">Select Role</div>) return ( <div className="roleWrapper"> <h2>{data.role.id}</h2> <div className="requirement"><span>{data.role.requirement}</span> required</div> <h3>Members</h3> <ul> {data.role.members.map((member) => { return (<li>{member.last_name}</li>) })} </ul> <h3>Equipments</h3> <ul> {data.role.equipments.map((equipment) => { return (<li>{equipment.id}</li>) })} </ul> <h3>Softwares</h3> {data.role.softwares.map((software) => { return (<li>{software.id}</li>) })} <ul> </ul> </div> ); }

🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )

강의에서 이해가 안 되거나 실습상 문제가 있는 부분,
설명이 잘못되었거나 미흡한 부분을 메일로 알려주세요!

답변드린 뒤 필요할 경우 본 페이지에
관련 내용을 추가/수정하도록 하겠습니다.

이메일 주소
yalco@yalco.kr
메일 제목 (반드시 아래 제목을 붙여넣어주세요!)
[질문] GraphQL과 Apollo 4-1

🛑질문 전 필독!!

  • 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
  • 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
  • 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
  • "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
  • 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
🌏 Why not change the world?