간단한 Hasura GraphiQL1

GraphiQL을 시작하고 싶을 때 자신처럼 평소에 웹 전단을 주로 접하는 사람들이 GraphiQL 서버를 준비하는 것은 상당히 어려운 일이다.
이럴 때 편리한 것이 바로 이른바 발레 플랫폼이다.
Firebase와 몽고DB 등은 하수라라는 오픈소스 엔진을 접할 기회가 생겨 하수라 도입부터 간단한 토도 앱 제작까지 소개한다.

하수라

하수라 공식 홈페이지https://hasura.io/에 따르면
Hasura is an open source high performance engine for creating secure GraphQL APIs within minutes from your databases and data sources. Fully managed on Hasura Cloud or self-hosted.
GraphiQL API에 특화된 엔진임을 알 수 있다.관리하는 하수라 클라우드와 자가 호스트 형태가 있는 것 같습니다.

Hasura 계정에 등록 및 로그인

공식 GET STARTED에 따라 계정을 만들겠습니다.
New Project 키를 눌러 Create Project라는 사이드바에 새 항목을 추가합니다.

Project setup 태그에서 무료 Free Tier를 선택하고 무료로 사용할 수 있는 영역에서 선택합니다.
Continue to Database Setup 버튼을 누른 후 Database setup 탭으로 이동합니다.

자신이 준비한 DB를 연결할 수 있을 것 같지만, 간단하게 해보고 싶어 Try with Heroku로 Heroku를 선택했다.

허로쿠는 몇 초만 있으면 자동으로 새로운 앱을 만들 수 있다.히로쿠 계좌가 없는 사람이 여기서 계좌 등록 화면으로 옮겨갈 것 같아요.
맨 아래에 있는 Create Project 버튼이 활성화되어 누르면 설정 확인 화면으로 이동합니다.1분 안에 설치가 완료되고 오른쪽 위에 있는 Launch Constore 버튼이 활성화되어 를 누릅니다.

다른 탭에서 Hasura consol을 엽니다.

테이블 작성

Hasura console에서 DATA 태그를 클릭하고Create Table 버튼을 사용하여 테이블을 만듭니다.

여기에'todos'라는 이름으로 id,text,done 세 가지 열을 준비했습니다.
value
type
default value
id
UUIDgen_random_uuid()text
text
done
boolean
false
Add Table 버튼을 누르면 테이블이 작성됩니다.

GraphiQL 질의 실행

GRAPHIQL 태그를 클릭하면 방금 작성한 표 이름에 따라 왼쪽에 있는 Explorer에서 실행 가능한 조회를 생성하는 방법이 나타납니다.
GraphiQL 이 부분은 GraphiQL 처리를 하는 GUI입니다.
확인란을 선택하면 질의가 자동으로 작성됩니다.

Query

TODO 둘러보기: getTodos

query getTodos {
  todos {
    id
    text
    done
  }
}

GraphiQL에서의 실행 결과

Mutation

왼쪽 아래 선택 메뉴에서 Query, Mutation, Subscription을 선택하고 필요에 따라 '+' 단추를 선택하면 실행 가능하고 사용 가능한 방법 일람표가 표시됩니다.
이번에는 다음 용도로 뮤테이션을 제작해 시행했다.
같은 요령에 따라 Mutation에서 필요한 필드를 검사하고 원하는 Mutation을 적으세요.

TODO 증가: addTodo

# GraphiQL上で実行するクエリの一例
mutation addTodo {
  insert_todos(objects: { text: "apple" }) {
    returning {
      done
      id
      text
    }
  }
}

# 変数で書く場合
mutation addTodo($text: String!) {
  insert_todos(objects: { text: $text }) {
    returning {
      done
      id
      text
    }
  }
}

TODO 체크: toggleTodo

# GraphiQL上で実行するクエリの一例
mutation toggleTodo {
  update_todos(where: { id: { _eq: "asdf1234" } }, _set: { done: true }) {
    returning {
      done
      id
      text
    }
  }
}

# 変数で書く場合
mutation toggleTodo($id: uuid!, $done: Boolean!) {
  update_todos(where: { id: { _eq: $id } }, _set: { done: $done }) {
    returning {
      done
      id
      text
    }
  }
}

TODO 삭제: deleteTodo

# GraphiQL上で実行するクエリの一例
mutation deleteTodos {
  delete_todos(where: { id: { _eq: "asdf1234" } }) {
    returning {
      done
      id
      text
    }
  }
}

# 変数で書く場合
mutation deleteTodos($id: uuid!) {
  delete_todos(where: { id: { _eq: $id } }) {
    returning {
      done
      id
      text
    }
  }
}

API의 커뮤니케이션이 확인되면 API 액세스 키를 발행하여 액세스 제어를 수행합니다.

API 액세스 키 확인 및 사용

위에서 생성한 끝점(GraphiQL API)에 액세스할 수 없으면 API 액세스 키를 사용해야 합니다.
API 액세스 키는 기본적으로 생성되지는 않지만 HASURA CLOUD 프로젝트 목록의 관리 화면에서 확인하거나 생성할 수 있습니다.

Admin Secret이 적힌 곳은 API 액세스 키이며 이후 API 서버와 스왑할 때 사용됩니다.

총결산

이번에는 하수라로 테이블을 간단하게 정의하고 API 서버까지 만들었다.
다음 투고는 React+Apollo Client에서 CRUD 처리를 시도해 보십시오.
※ 뒷편도 썼습니다.
https://zenn.dev/mrsung/articles/0c27b767060fec