Apollo) react에서 apollo query를 날려보자

예시 코드

백엔드에서 api를 이미 정의해두었고, client에서 apollo client 셋팅을 모두 마쳤다는 가정하에 바로 client의 예시 코드를 보면 아래와 같다.

//back-end
import {gql} from "apollo-server";

export default gql`
    type Query {
        seeProfile(id:Int!): User
    }
`

//front-end
import { gql, useQuery } from "@apollo/client";

const SEE_PROFILE_QUERY = gql`
  query seeProfile($id:Int!) {
    me(id:$id) {
      id
      username
    }
  }
`;

const SomeComponent = () =>{
  const {data,loading} = useQuery(seeProfile,{
  	variables:{id:1}
  })
  return <div>{loading ? "Loading..." : data?.seeProfile?.username}</div>
}

export default SomeComponent

정리

Document

client에서 query를 보내기 위해서는 먼저 어떤 쿼리를 보낼건지, 그 쿼리의 input은 무엇인지, 응답으로 데이터를 받아올 것인지에 대한 정보를 서술하는 document를 정의해야한다. 이때 document의 변수명은 아무 이름이나 상관 없지만, gql백틱 안쪽의 내용은 back-end의 typeDefs에 정의된 그대로 작성해야한다. 타입이 query인지 mutation인지 subscription인지, 쿼리명에 오타는 없는지, 받고있는 변수의 종류나 타입, 필수 여부 등에 오타는 없는지 깐깐하게 체크해야한다. 다만 받아올 데이터의 종류는 꼭 필요한 종류만 선별해서 입력할 수 있다.

useQuery

apollo client는 쿼리 요청 및 응답을 도와주는 useQuery hook을 제공한다. useQuery는 2개의 argumnets를 받으며, 첫번째 arg는 이전에 정의한 document, 두번째 arg는 option object이다. option을 통해 query의 변수, 응답이 오면 실행할 함수 등을 설정할 수 있다. 마지막으로 useQuery는 다양한 값들을 리턴하는데, 서버의 응답 값인 data, 현재 응답이 왔는지 여부를 알려주는 loading, 다시 한번 서버에 데이터 요청을 보낼 수 있는 refetch 함수 등이 있다.