리액트와 GraphQL: Hasura 사용하기

byCode Keeper •


리액트와 GraphQL: Hasura 사용하기


Hasura는 강력한 GraphQL 엔진으로, 데이터베이스에 연결하여 즉시 GraphQL API를 생성해 줍니다. 이를 통해 개발자는 효율적으로 데이터를 관리하고 쿼리할 수 있습니다. 이번 포스팅에서는 Hasura를 사용하여 리액트 애플리케이션에 GraphQL을 구현하는 방법을 살펴보겠습니다.


Hasura의 중요성


Hasura는 다음과 같은 장점을 제공합니다:

  • 빠른 설정: 몇 분 내에 데이터베이스에 연결하여 GraphQL API를 생성할 수 있습니다.
  • 실시간 데이터: 구독 기능을 통해 실시간 데이터를 쉽게 처리할 수 있습니다.
  • 보안 및 권한 관리: 사용자 정의 권한을 설정하여 데이터 액세스를 제어할 수 있습니다.
  • 확장성: 대규모 애플리케이션에서도 성능을 유지할 수 있는 높은 확장성을 제공합니다.

프로젝트 설정 및 Hasura 설치


Hasura를 사용하기 위해 Docker를 통해 Hasura GraphQL 엔진을 설정합니다. 다음 명령어를 사용하여 Docker를 통해 Hasura를 시작합니다.


docker run -d -p 8080:8080 \
  -e HASURA_GRAPHQL_DATABASE_URL=postgres://username:password@hostname:5432/database \
  -e HASURA_GRAPHQL_ENABLE_CONSOLE=true \
  hasura/graphql-engine:latest

위 명령어에서 postgres://username:password@hostname:5432/database 부분을 본인의 데이터베이스 정보로 수정해야 합니다.


프로젝트 구조


프로젝트는 기본적으로 다음과 같은 구조를 가집니다.


my-hasura-app/
├── src/
│   ├── components/
│   ├── graphql/
│   ├── App.tsx
│   ├── index.tsx
├── public/
├── package.json
└── README.md

Hasura 콘솔 설정


Hasura 콘솔에 접속하여 데이터베이스 스키마를 설정하고, GraphQL API를 생성합니다.


  1. 브라우저에서 http://localhost:8080에 접속합니다.
  2. 데이터베이스를 연결하고, 필요한 테이블을 생성합니다.
  3. 스키마를 설정하고, 자동으로 생성된 GraphQL API를 확인합니다.

GraphQL 쿼리 작성


Hasura 콘솔에서 GraphQL 쿼리를 작성하고 테스트할 수 있습니다. 예를 들어, 다음과 같은 쿼리를 작성합니다.


query {
  users {
    id
    name
    email
  }
}

위 쿼리는 users 테이블에서 id, name, email 필드를 가져오는 쿼리입니다.


리액트 애플리케이션 설정


리액트 애플리케이션에서 Hasura GraphQL API를 사용하기 위해 Apollo Client를 설치하고 설정합니다.


Apollo Client 설치


다음 명령어를 사용하여 Apollo Client와 필요한 패키지를 설치합니다.


npm install @apollo/client graphql

Apollo Client 설정


Apollo Client를 설정하기 위해 src/graphql/client.ts 파일을 생성하고, 다음과 같이 설정합니다.


// src/graphql/client.ts
import { ApolloClient, InMemoryCache } from '@apollo/client';

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

export default client;

위 코드에서는 Apollo Client를 설정하고, Hasura GraphQL 엔드포인트를 URI로 지정합니다.


리액트 컴포넌트 작성


Hasura GraphQL API를 사용하여 데이터를 쿼리하는 리액트 컴포넌트를 작성합니다.


// src/components/Users.tsx
import React from 'react';
import { useQuery, gql } from '@apollo/client';

const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
    }
  }
`;

const Users: React.FC = () => {
  const { loading, error, data } = useQuery(GET_USERS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h2>Users</h2>
      <ul>
        {data.users.map((user: { id: string; name: string; email: string }) => (
          <li key={user.id}>
            {user.name} ({user.email})
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Users;

위 코드에서는 useQuery 훅을 사용하여 GraphQL 쿼리를 실행하고, users 데이터를 가져와서 화면에 렌더링합니다.


App 컴포넌트 설정


메인 애플리케이션 컴포넌트에서 ApolloProvider를 사용하여 Apollo Client를 제공하고, Users 컴포넌트를 렌더링합니다.


// src/App.tsx
import React from 'react';
import { ApolloProvider } from '@apollo/client';
import client from './graphql/client';
import Users from './components/Users';

const App: React.FC = () => {
  return (
    <ApolloProvider client={client}>
      <div>
        <h1>React with Hasura GraphQL</h1>
        <Users />
      </div>
    </ApolloProvider>
  );
};

export default App;

위 코드에서는 ApolloProvider를 사용하여 Apollo Client를 애플리케이션에 제공하고, Users 컴포넌트를 포함하여 데이터를 쿼리하고 렌더링합니다.


주요 포인트 요약 및 추가 학습 자료


이 포스팅에서는 Hasura를 사용하여 리액트 애플리케이션에 GraphQL을 구현하는 방법에 대해 살펴보았습니다. Hasura는 빠른 설정, 실시간 데이터, 보안 및 권한 관리, 높은 확장성을 제공하여 효율적인 데이터 관리를 가능하게 합니다. 추가로 학습할 자료는 다음 링크를 참고하시기 바랍니다:


Tags:
다음 이전