GraphQL 서버에 접근하고 데이터를 요청하기

클라이언트가 서버에 접근하는 방법

클라이언트가 GraphQL 서버에 접근하는 방식은 크게 두 가지로 나눌 수 있습니다:

GraphiQL을 사용한 웹 브라우저에서의 접근
HTTP 요청을 통해 직접 접근하는 방식 (예: Fetch API, Axios, Apollo Client 등)

1. GraphiQL을 사용한 접근

GraphiQL은 GraphQL을 테스트할 수 있는 웹 기반 인터페이스입니다. 서버에 설정된 graphiql: true 옵션 덕분에, 클라이언트는 웹 브라우저에서 GraphQL 쿼리와 뮤테이션을 직접 작성하고 실행할 수 있습니다.

접근 방법:

브라우저에서 http://localhost:4000/graphql에 접속하면, GraphiQL 인터페이스가 나타납니다.
여기서 쿼리나 뮤테이션을 직접 작성해 실행할 수 있습니다.

예를 들어, 특정 사용자의 이름과 이메일을 가져오는 쿼리를 GraphiQL에서 실행하면:

query {
  user(id: 1) {
    name
    email
  }
}

서버는 다음과 같은 JSON 형식의 데이터를 반환합니다:

{
  "data": {
    "user": {
      "name": "John",
      "email": "[email protected]"
    }
  }
}

2. HTTP 요청을 사용한 접근

클라이언트는 Fetch API, Axios, 또는 Apollo Client 같은 HTTP 라이브러리를 사용하여 GraphQL 서버에 요청을 보낼 수 있습니다. 이 방식은 브라우저나 모바일 애플리케이션에서 GraphQL 서버와 통신할 때 일반적으로 사용됩니다.

Fetch API를 사용한 접근 예시:

fetch('http://localhost:4000/graphql', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    query: `
      query {
        user(id: 1) {
          name
          email
        }
      }
    `
  })
})
.then(response => response.json())
.then(data => console.log(data));

위의 코드는 클라이언트에서 fetch를 통해 GraphQL 쿼리를 서버에 보내고, 서버로부터 받은 데이터를 출력하는 예제입니다.

Axios를 사용한 접근 예시:

import axios from 'axios';

axios.post('http://localhost:4000/graphql', {
  query: `
    query {
      user(id: 1) {
        name
        email
      }
    }
  `
})
.then(response => {
  console.log(response.data);
});

Axios는 Fetch API와 유사한 방식으로 동작하며, 더 다양한 기능을 제공합니다.

Apollo Client를 사용한 접근 예시:

Apollo Client는 GraphQL 서버와 통신하기 위한 더 고급화된 라이브러리로, 주로 리액트 같은 프론트엔드 프레임워크에서 많이 사용됩니다.

설치:bash코드 복사
npm install @apollo/client graphql
Apollo Client 설정:

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

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

client
  .query({
    query: gql`
      query {
        user(id: 1) {
          name
          email
        }
      }
    `
  })
  .then(result => console.log(result));

Apollo Client는 쿼리와 뮤테이션을 간단하게 관리할 수 있게 도와주며, 더 복잡한 클라이언트 측 데이터 관리 기능을 제공합니다.

3. 쿼리와 뮤테이션 요청의 구조

클라이언트가 서버에 보낼 때 요청의 구조는 기본적으로 다음과 같습니다:

URL: GraphQL 서버의 엔드포인트 (예: http://localhost:4000/graphql)
HTTP 메서드: POST (GraphQL 요청은 주로 POST 메서드를 사용)
요청 본문: GraphQL 쿼리 또는 뮤테이션을 JSON 형식으로 포함

{
  "query": "query { user(id: 1) { name email } }"
}

서버는 이 요청을 받아서 필요한 데이터를 처리한 후, JSON 형식으로 응답을 반환합니다.

4. 응답 구조

서버로부터 반환되는 응답은 JSON 형식으로 제공됩니다. 일반적인 응답 구조는 다음과 같습니다:

data: 요청한 데이터가 담긴 필드
errors: 만약 쿼리나 뮤테이션에 오류가 발생했을 때 오류 메시지가 담기는 필드

응답 예시:

{
  "data": {
    "user": {
      "name": "John",
      "email": "[email protected]"
    }
  }
}

오류가 있을 경우:

{
  "errors": [
    {
      "message": "User not found",
      "locations": [{ "line": 2, "column": 3 }],
      "path": ["user"]
    }
  ]
}

결론

클라이언트가 GraphQL 서버에 접근하는 방식은 크게 두 가지로 나뉩니다:

GraphiQL 같은 웹 기반 툴을 사용해 직접 쿼리를 작성하고 테스트하는 방법.
Fetch API, Axios, Apollo Client 등을 사용해 HTTP 요청을 통해 서버에 쿼리나 뮤테이션을 보내는 방식.

실제 프로젝트에서는 보통 두 번째 방법을 사용하여 클라이언트 애플리케이션과 GraphQL 서버 간에 데이터를 주고받습니다.