🖋️ GraphQL 튜토리얼

API 용 쿼리 언어

데이터에 대해 정의한 유형 시스템을 사용하여 해당 쿼리를 실행하기 위한 런타임

특정 데이터베이스나 스토리지 엔진에 연결되지 않고 대신 기존 코드와 데이터로 지원

• 주요 기능

  • 정확한 데이터 가져오기
    • 클라이언트는 더도 덜도 아닌 필요한 것을 정확하게 요청 가능
    • REST에서 흔히 발생하는 과잉 가져오기 및 부족 가져오기 문제 감소
      
      
  • 단일 엔드포인트
    • 다양한 리소스에 대한 여러 엔드포인트가 있는 REST와 다름
    • 단일 엔드포인트를 사용하여 모든 쿼리와 변형을 처리
      
      
  • 구독을 통한 실시간 데이터
    • 구독을 통해 실시간 데이터 업데이트를 지원
    • 실시간 애플리케이션 기능을 향상
      
      
  • 강력한 형식이 스키마
    • GraphQL 스키마는 클라이언트가 데이터에 액세스하는 방법을 정의
    • 실행 가능한 쿼리만 허용

• RESTful API 비교

기능	GraphQL	RESTful API
데이터 가져오기	한 번의 왕복으로 정확한 데이터를 가져옵니다.	잠재적인 초과 가져오기 또는 부족 가져오기.
엔드포인트	모든 작업에 대한 단일 엔드포인트입니다.	다양한 리소스에 대한 여러 엔드포인트.
실시간 데이터	구독을 통해 실시간 데이터를 기본적으로 지원합니다.	일반적으로 WebSocket을 통해 처리되는 실시간 데이터입니다.
유연성	- 쿼리에 대한 높은 유연성 - 클라이언트는 응답의 구조를 정의합니다.	서버에 의해 정의된 고정 데이터 구조입니다.
오류 처리	응답으로 데이터와 오류를 모두 반환합니다.	오류 처리를 위해 HTTP 상태 코드를 사용합니다.
API 버전 관리	유연한 쿼리로 인해 필요하지 않습니다.	변경하려면 버전 관리(v1, v2)가 필요한 경우가 많습니다.

• 기본 GraphQL 작업

  • 쿼리: 데이터 검색
  • 변이: 데이터 수정 (생성, 업데이트, 삭제)
  • 구독: 실시간 데이터 업데이트

type Query {
  users: [User]
  user(id: ID!): User
}

type Mutation {
  createUser(name: String!, email: String!): User
}

type Subscription {
  userAdded: User
}

type User {
  id: ID!
  name: String!
  email: String!
}

• 사용자 목록 검색

query {
  users {
    id
    name
    email
  }
}

• 새 사용자 생성

mutation {
  createUser(name: "John Doe", email: "john@example.com") {
    id
    name
  }
}

• 새 사용자 추가 구독

subscription {
  userAdded {
    id
    name
  }
}

• GraphQL 사용

  • 설치

    npm install @apollo/client graphql

  • 설정 1

    import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
    
     const httpLink = new HttpLink({
       uri: 'YOUR_GRAPHQL_API_ENDPOINT', 
     });
    
     const client = new ApolloClient({
       link: httpLink,
       cache: new InMemoryCache(),
     });
    
     export default client;

  • 설정 2

     import React from 'react';
     import ReactDOM from 'react-dom';
     import App from './App';
     import client from './apolloClient';
     import { ApolloProvider } from '@apollo/client';
    
     ReactDOM.render(
       <ApolloProvider client={client}>
         <App />
       </ApolloProvider>,
       document.getElementById('root')
     );

  • 실행

    import { useQuery, gql } from '@apollo/client';
    
    const GET_USERS = gql`
      query GetUsers {
        users {
          id
          name
          email
        }
      }
    `;
    
    function Users() {
      const { loading, error, data } = useQuery(GET_USERS);
    
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;
    
      return (
        <div>
          <h3>Users</h3>
          <ul>
            {data.users.map(({ id, name, email }) => (
              <li key={id}>
                {name} - {email}
              </li>
            ))}
          </ul>
        </div>
      );
    }
    
    export default Users;