1. 스키마 (Schema)
GraphQL 스키마는 데이터의 형태와 어떤 요청을 할 수 있는지 정의합니다. 스키마는 타입 정의와 쿼리, 뮤테이션, 서브스크립션 등을 포함합니다.
type Query {
user(id: ID): User
users: [User]
}
type User {
id: ID
name: String
email: String
}
위의 예제에서는 Query 타입에 user와 users 필드가 정의되어 있습니다. User 타입은 사용자의 속성을 정의합니다.
2. 쿼리 (Query)
GraphQL에서는 클라이언트가 서버에게 어떤 데이터를 요청할 지를 명시적으로 정의합니다.
query {
users {
id
name
email
}
}
위의 쿼리는 서버로부터 사용자의 id, name, email을 요청합니다.
3. 뮤테이션 (Mutation)
뮤테이션은 데이터를 변경하거나 새로운 데이터를 생성하는 데 사용됩니다.
mutation {
createUser(input: { name: "John Doe", email: "john@example.com" }) {
id
name
email
}
}
위의 뮤테이션은 새로운 사용자를 생성하는 요청을 나타냅니다.
GraphQL 코드 예제
1. 서버 예제 (Node.js + Express + express-graphql)
const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const { buildSchema } = require('graphql');
// 스키마 정의
const schema = buildSchema(`
type Query {
user(id: ID): User
users: [User]
}
type User {
id: ID
name: String
email: String
}
`);
// 더미 데이터
const users = [
{ id: '1', name: 'John Doe', email: 'john@example.com' },
{ id: '2', name: 'Jane Smith', email: 'jane@example.com' },
];
// 레졸버 함수
const root = {
user: ({ id }) => users.find(user => user.id === id),
users: () => users,
};
const app = express();
// GraphQL 미들웨어 설정
app.use('/graphql', graphqlHTTP({
schema,
rootValue: root,
graphiql: true, // 개발용 GUI
}));
const port = 4000;
app.listen(port, () => {
console.log(`GraphQL server is running at http://localhost:${port}/graphql`);
});
2. 클라이언트 예제 (React + Apollo Client)
Apollo Client는 GraphQL을 사용하는 웹 애플리케이션을 위한 상태 관리 라이브러리 중 하나입니다. Apollo Client는 클라이언트 측에서 GraphQL 데이터를 효율적으로 관리하고 가져오는 데 도움이 되는 도구와 기능을 제공합니다.
Apollo Client의 주요 기능 및 목적은 다음과 같습니다:
GraphQL 데이터 쿼리 및 뮤테이션 관리: Apollo Client는 GraphQL 서버에서 데이터를 쿼리하고 뮤테이션을 수행하기 위한 기능을 제공합니다. GraphQL 쿼리를 작성하고 컴포넌트에서 필요한 데이터를 가져오는 데 사용됩니다.
상태 관리: Apollo Client는 클라이언트 측에서 관리해야 하는 상태를 추상화하고, 애플리케이션의 로컬 상태와 원격 데이터를 효율적으로 조화시켜줍니다.
캐싱 및 데이터 정규화: Apollo Client는 원격 서버에서 받은 데이터를 캐싱하고, 캐시된 데이터를 사용하여 성능을 향상시킵니다. 또한, 정규화를 통해 중복 데이터를 효과적으로 관리합니다.
실시간 데이터 갱신: GraphQL Subscriptions을 통해 실시간으로 데이터를 갱신할 수 있습니다. 이를 통해 서버에서 데이터가 업데이트되면 클라이언트에게 자동으로 푸시됩니다.
다양한 프레임워크 및 라이브러리와의 통합: Apollo Client는 React, Angular, Vue 등 다양한 프론트엔드 프레임워크와 라이브러리와의 통합을 지원합니다.
Apollo Client는 개발자가 GraphQL을 사용하여 데이터를 관리하고 렌더링하는 데 있어 편리한 방법을 제공하여 생산성을 향상시킵니다.
아래 예제코드로 작성 해봤습니다.
import React from 'react';
import { ApolloProvider, useQuery, gql } from '@apollo/client';
// GraphQL 쿼리 정의
const GET_USERS = gql`
query {
users {
id
name
email
}
}
`;
// 컴포넌트
const UserList = () => {
const { loading, error, data } = useQuery(GET_USERS);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<ul>
{data.users.map(user => (
<li key={user.id}>
{user.name} - {user.email}
</li>
))}
</ul>
);
};
// ApolloProvider로 감싸기
const App = () => (
<ApolloProvider uri="http://localhost:4000/graphql">
<UserList />
</ApolloProvider>
);
export default App;
위의 코드 예제는 Node.js와 Express를 사용한 GraphQL 서버와 React를 사용한 클라이언트의 간단한 구조를 보여줍니다. 클라이언트에서는 Apollo Client를 사용하여 GraphQL 서버와 통신하고 데이터를 가져오는 예제입니다.