React 및 Apollo 클라이언트에서 Hasura GraphQL 데이터베이스 사용

React 및 Apollo 클라이언트를 사용하여 Hasura GraphQL 데이터베이스 생성 및 사용

왜 GraphQL이야?!

GraphQL은 필요할 때 하나의 URL 포트에 대해 특정한 조회를 하는 방법으로 REST에서처럼 프로그램에서 여러 번 다른 포트를 호출하지 않고 특정한 데이터를 되돌려줍니다.
문서의 이 예는 서로 다른 데이터를 되돌려 주는 두 개의 독립된 조회를 보여 줍니다.

(출처: Learn Hasura)

하술라가 뭐야?

Hasura는 실시간 GraphQL API 엔진입니다.
몇 분만 있으면 맞춤형 GraphQL API를 시작하고 실행할 수 있으며, 프로그램에 삽입할 준비가 되어 있습니다.
실제 응용 프로그램을 보려면 내 대기사항 목록 API 자습서를 따르십시오.
너도 여기서 내 Consuming Hasura GitHub을 볼 수 있어!

하수라부터.

https://hasura.io/으로 가서 "30초 후 시작"버튼을 눌러주세요.
GitHub, 구글 또는 이메일을 사용하여 새로운 Hasura 계정을 만듭니다.
이 팝업을 사용하여 Hasura로 리디렉션할 전자 메일 주소를 확인합니다.

"Launch Connsole"을 누르면GraphiQL 개발 환경으로 다시 방향을 바꾸어 API를 사용하기 시작합니다.

GraphQL API 만들기

먼저 데이터 탭으로 이동하여 간단하고 무료 데이터베이스를 연결합니다.
그런 다음 [Heroku 데이터베이스 만들기] 및 아래의 [데이터베이스 만들기] 버튼을 클릭합니다.


팝업 창에서 Heroku에 로그인하면 상태 표시줄에 상태가 표시됩니다.
완료되면 데이터베이스 보기 버튼을 클릭하고 페이지 맨 위에 있는 테이블 만들기 버튼을 클릭합니다.
테이블 이름 "Todo"
필드를 구성하고 Primare 키를 id로 설정합니다.

외부 키와 유일한 키는 잠시 후에 설정할 수 있습니다.
그런 다음 테이블 추가를 클릭합니다.

이제 너에게 새로운 GraphQL API가 생겼다!!!

그런 다음 화면 왼쪽의 데이터 관리자에서 Todo 테이블을 선택한 다음 행 삽입 탭을 선택하여 API에 데이터를 추가합니다.

id를 포함하지 않은 데이터로 필수 필드를 채웁니다. 자동으로 생성되기 때문입니다.
저장 단추를 누르고 이 절차를 반복하지만 데이터 필드를 변경했는지 확인하고 다시 삽입을 누르십시오.
한 줄 이상 삽입한 후 페이지 맨 위에 있는 API 탭을 선택하여 GraphiQL IDE로 돌아갑니다.
GraphiQL 브라우저에서 몇 가지 옵션을 볼 수 있습니다.


각 메서드는 API에 대한 다양한 조회 및 수정에 사용될 수 있습니다.그들을 클릭해서 그들이 무엇을 하는지 보자!

오른쪽 위 모서리의 [문서] 팝업 버튼을 확인합니다.이 테이블에 특별히 만들어진 문서가 있습니다. 사용자가 필요로 하는 모든 방식으로 조회하고 변이하는 방법을 보여 줍니다.

계기판을 열어두세요. 나중에 필요하니까!!!

React 및 Apollo 클라이언트를 사용하여 API 사용

(이 섹션의 대부분은 Apollo Client Documentation에서 직접 제공)
터미널에서 시작하여 데스크톱이나 선택한 폴더로 이동합니다. 다음은 npx create-react-app project-name이고 cd는 project-name과 npm install @apollo/client graphql입니다.선택한 코드 편집기에서 파일을 엽니다.index.js에서 다음을 가져오여 클라이언트를 초기화합니다.

import {
    ApolloClient,
    InMemoryCache,
    ApolloProvider,
    HttpLink,
    ApolloLink,
} from "@apollo/client";

다음에 프로젝트의 루트 디렉터리에 .env 파일을 만듭니다.
Hasura 대시보드로 돌아가면 두 개의 필수 항목을 찾을 수 있습니다.
GraphQL 단점과 x-hasura-admin-key.
.env 파일을 열고 다음 두 변수를 생성합니다.REACT_APP_KEY=(여기에 "x-hasura-admin-key"붙여넣기)REACT_APP_URI=("GraphQL 엔드포인트"붙여넣기)
** 키나 URL에 인용이 없는지 확인하십시오 **
dev 서버를 계속 실행하고 있다면, 이 변수를 다시 시작해야 작동할 수 있습니다
이제 index.js으로 돌아가서 env 변수를 사용하여 API에 연결합니다.

은 생성된 env 변수를 사용하여 HttpLink에서 끝점을 설정합니다.

은 ApolloLink를 사용하여 admin key env 변수가 있는 제목을 전달합니다.

클라이언트는 API에 전체 요청을 보내기 위해 이러한 내용을 포함하고 있습니다.

Apollo Provider는 전체 프로세스에서 Apollo 클라이언트에 액세스할 수 있도록 어플리케이션을 패키지화합니다.

Hasura로 돌아가 데이터베이스 요청을 복사합니다.

그런 다음 App.js으로 이동하여 다음을 가져옵니다.

import { useQuery, gql } from '@apollo/client'

은 gql에 표시된 백틱스에 Hasura 요청을 포함하는 변수를 기록합니다.

은 변수'로드, 오류, 데이터'를 useQuery(GET_TODOS)으로 설정합니다.

구성 요소가 렌더링되면 Apollo 클라이언트에서 로드, 오류 및 UI 렌더링에 사용할 수 있는 데이터 속성을 포함하는 객체를 useQuery에 반환합니다.console.log "불러오기, 오류, 데이터"는 devtools의 전단에서 데이터를 볼 수 있습니다.

이제 데이터로 프런트엔드 구축!!!