coin FE

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 서버와 통신하고 데이터를 가져오는 예제입니다.