클라이언트가 서버에 접근하는 방법
클라이언트가 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 서버 간에 데이터를 주고받습니다.