GraphQL Client

• Apollo Client 모듈 설치 : npm install @apollo/client graphql

import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';

• ApolloProvider : React에 ApolloClient를 연결시켜주기 위한 컴포넌트
• ApolloClient : React에 실제로 연결될 Client 생성자
• InMemoryCache : 쿼리 응답 개체를 내부 저장소에 저장시 사용하는 컴포넌트

// App.js
const client = new ApolloClient({
	uri : 'http://localhost:4000',
    cache : new InMemoryCache()
});


function App() {

	return (
    	<div className="App">
        	<ApolloProvider client={client}>
            	...
            </ApolloProvider>
        </div>
    )
}

• Query 사용법
  1. gql 요청 쿼리 작성
  2. useQuery hook 이용해서 쿼리문과 파라미터 설정(onCompleted 로 콜백 지정 가능)

import { useQuery, gql } from '@apollo/client';

const GET_ROLE = gql`
  query GetRole($id: ID!) {
    role(id: $id) {
      id
      requirement
      members {
        id
        last_name
        serve_years
      }
      equipments {
        id
      }
      softwares {
        id
      }
    }
  }
`;

function Roles() {
	...
	function MainContents () {

        console.log("[MainCotents] "+contentId)
        const { loading, error, data, refetch } = useQuery(GET_ROLE, {
          variables: {id: contentId}
        })
    
        if (loading) return <p className="loading">Loading...</p>
        if (error) return <p className="error">Error :(</p>
        if (data.role === null || 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>
        );
      }
      ...
 }

 

• Mutation 사용법
  1. gql 요청 쿼리 작성
  2. useMutation hook 이용해서 쿼리문과 파라미터 설정, onCompleted 로 콜백 지정

import { useQuery, useMutation, gql } from '@apollo/client';

const DELETE_TEAM = gql`
  mutation DeleteTeam($id: ID!) {
    deleteTeam(id: $id) {
      id
    }
  }
`;

function Teams() {
 ...
 function execDeleteTeam () { // 클릭이벤트로 지정할 함수
    if (window.confirm('이 항목을 삭제하시겠습니까?')) {
      deleteTeam({variables: {id: contentId}})
    }
  }

  const [deleteTeam] = useMutation(
  DELETE_TEAM, { onCompleted: deleteTeamCompleted })
  
  function deleteTeamCompleted (data) {
    console.log(data.deleteTeam)
    alert(`${data.deleteTeam.id} 항목이 삭제되었습니다.`)
    
    refetchTeams();

    setContentId(0)
  }
  ...
}

 

• Fragment : gql에서 공통적으로 사용되는 필드셋을 묶어 반복적인 코드를 줄일 수 있음

const Names = gql`
  fragment names on People {
    first_name
    last_name
  }
`
const HealthInfo = gql`
  fragment healthInfo on People {
    sex
    blood_type
  }
`
const WorkInfo = gql`
  fragment workInfo on People {
    serve_years
    role
    team
    from
  }
`
const GET_PERSON = gql`
  query GetPerson($id: ID!) {
    person(id: $id) {
      id
      ...names
      ...healthInfo
      ...workInfo
      tools {
        __typename
        ... on Software {
          id
        }
        ... on Equipment {
          id
          count
        }
      }
    }
  }
  ${Names}
  ${HealthInfo}
  ${WorkInfo}
`;