이번에는 이전부터 궁금했던 GraphQL을 Heroku + Hasura로 구축하고, React에서 Apollo Client로 호출하기까지의 흐름을 비망록으로 기사로 하고 싶습니다.
실제로 시도해 보면 Firebase만큼 쉽게 서버를 구축할 수 있었습니다.

Hasura로 프로젝트 만들기

Hasura에서 새 GraphQL 서버를 만듭니다.



PostgresSQL 서버를 선택하지만 Heroku를 사용하는 경우 계정 링크를 사용하여 Heroku 측 프로젝트를 자동으로 초기화합니다.



프로젝트 작성이 완료되면 관리 화면이 표시되어 GraphQL 엔드포인트와 익숙한 GraphQL 화면을 확인할 수 있습니다.

샘플 데이터 추가

이 상태에서는 데이터베이스에 아무것도 데이터가 없는 상태이므로 더미 데이터를 넣어 보겠습니다.
데이터는 무엇이든 좋지만 이 리포지토리 의 load_employees.dump 에서 일부 데이터를 가져왔습니다.

Create Table에서 테이블 유형을 결정합니다. 이번에는 다음과 같이 했습니다.



테이블 유형을 결정한 후 Insert Row에서 데이터를 넣습니다.



결국 다음과 같이 되었습니다.



데이터 입력이 완료되면 맨 위 페이지에서 GraphQL 쿼리를 시도할 수 있습니다.
쿼리 구문을 기억하지 않아도 Explorer에서 선택하는 것만으로 자동으로 쿼리가 생성되므로 꽤 쉽지 않을까요?

React 애플리케이션 만들기

위에서 제공한 GraphQL 서버를 React+Apollo Client에서 호출해 봅니다.
GitHub도 공개하고 있으므로 좋으면 복제하고 시도해보십시오.

Client를 만들고 Provider에게 제공

React hooks에서 GraphQL을 호출 할 수 있도록 작성한 client를 Provider에서 지정하십시오.

index.tsx

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

const client = new ApolloClient({
  uri: process.env.REACT_APP_SERVER_URL,
  cache: new InMemoryCache(),
});
ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById("root")
);

구성 요소 측면에서 useQuery를 사용하여 쿼리를 실행합니다.

App.tsx

import { useQuery, gql } from "@apollo/client";

const GET_EPLOYEES = gql`
  query GetEmployees {
    employees {
      birth_date
      emp_no
      first_name
      hire_date
      last_name
    }
  }
`;

function App() {
  const { data } = useQuery(GET_EPLOYEES);
  return (
    <Container>
      <Pre>{JSON.stringify(data, null, 2)}</Pre>
    </Container>
  );
}

이것을 보면 다음과 같습니다.
이전에 Hasura에서 등록한 내용을 표시할 수 있음을 알 수 있습니다.

취득하는 데이터를 형태 안전하게 한다

여기에서 TypeScript를 사용하는 사람들을위한 것입니다.
방금 취득한 data 는 any 형이 되고 있습니다. apollo-tooling 을 사용하면 쿼리 문에서 형식을 생성할 수 있습니다.



먼저 Apollo Tooling을 설치합니다.

yarn global add apollo

그런 다음 React 프로젝트의 루트에 apollo.config.js를 만듭니다.
GraphQL의 URL도 이 안에 지정합니다.

module.exports = {
  client: {
    name: "client",
    includes: ["src/**/*.ts", "src/**/*.tsx"],
    tagName: "gql",
    addTypename: true,
    service: {
      // remote endpoint
      name: "sever",
      url: "https://xxxxxxxxxxxxxxxxx/graphql",
    },
  },
};

그리고 client:codegen 명령으로 형식 정의 파일을 생성합니다.

apollo client:codegen --target typescript types

완료되면 src/types/xxxx.ts 에 생성된 파일이 저장됩니다.

export interface GetEmployees_employees {
  __typename: "employees";
  birth_date: any;
  emp_no: number;
  first_name: string;
  hire_date: any;
  last_name: string;
}

export interface GetEmployees {
  /**
   * fetch data from the table: "employees"
   */
  employees: GetEmployees_employees[];
}

useQuery 의 제네릭스에 이 생성된 형태를 지정하면(자), data 에 형태가 붙습니다. 🎉

const { data } = useQuery<GetEmployees>(GET_EPLOYEES);

결론

DB 서버 준비부터 React 사용까지 상상보다 훨씬 쉽게 할 수 있었습니다.
게다가 TypeScript 의 형식화도 자동으로 실시할 수 있어 꽤 DX 가 향상한다고 생각합니다.
또, Hasura에서는 데이터베이스내의 액세스 권한등의 관리는 할 수 있는 것 같습니다만, 인증등은 탑재하고 있지 않는 것 같습니다. 이 부분은 Firebase와 함께 사용하는 것이 가장 쉽습니다.

추가

JOIN 등을하는 방법을 기사로했습니다. ( htps : // 코 m / 타카 오나리 카와 / )

참고

htps : //에서 v.ぁsss d. jp / ar chi c ぇ s / apop-o d dx