다음 응용 프로그램에서 GraphQL을 사용하는 모든 사람들이 데이터베이스 모델을 GraphQL 모델로 다시 쓰는 지경에 이르렀다.
Typescript를 사용할 때GraphQL 형식은 대개 Typescript 형식으로 다시 작성됩니다.
이것은 일반적으로 오류와 유형 추정의 높은 가능성이며, 특히 나중에 데이터베이스 모델을 변경할 때이다.
최근에 나는 이 작은 설정을 발견했다. 이것은GraphQL과Typescript 사이의 유형 추정의 난점을 해결할 뿐만 아니라, 조회 해상도에 유형 안전성을 제공할 뿐만 아니라, 본기의GraphQL 조회 파일을useQuery 갈고리로 직접 전환시켰다.
전면에 있는useQuery 연결을 통해 데이터베이스에 있는 데이터를 사용하려면 다음과 같은 내용을 만드십시오.

데이터베이스 모델 생성 및 데이터 삽입을 위한 초기 SQL

docker compose 파일, Postgres 데이터베이스 및 Hasura 엔진 제공

codegen 파일로Hasura 모드

를 통해 typescript 코드 생성

한 걸음 한 걸음:

기본 설정부터 시작하겠습니다.
-> docker 컨테이너에서 Postgres 데이터베이스를 실행합니다.

docker 작성.yml

version: '3.8'

services:
  postgres:
    build:
      context: ./database
      dockerfile: Dockerfile
    ports:
      - 5432:5432
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=booksdb 
    volumes:
      - db-data:/var/lib/postgresql/data
volumes:
  db-data:

이것은 5432 포트에서 실행되는 Postgres 데이터베이스를 포함하고 기본 데이터베이스를 booksdb 로 설정합니다. 예시에서 사용한 것처럼.
더 나은 구조를 얻기 위해 Dockerfile를 database 폴더에 하청을 주었습니다.

/ 데이터베이스 / Dockerfile

# pull official base image
FROM postgres:12.2-alpine

# run init.sql
ADD init.sql /docker-entrypoint-initdb.d

용기가 시작될 때 직접 실행할 수 있도록 초기 스크립트를 용기 내 docker-entrypoint-initdb.d 로 복사합니다.현재 우리의 데이터베이스 용기는 pgadmin을 통해 호출할 수 있도록 준비가 되어 있습니다.
다음 예제에서는 NextJs 응용 프로그램을 만들고 다음 패키지를 먼저 설치합니다.

npm install graphql @types/graphql apollo-server-micro @apollo/client knex pg

다음 단계는GraphQL 모드와Typescript 형식을 만드는 것입니다. 왜냐하면 분석기가 그것들을 필요로 하기 때문입니다. 하지만 이 단계를 넘어가겠습니다.
우리의 구조는 지금 이렇게 보인다.

-> 다음에 Hasura를 추가하고 Docker 컨테이너에서 실행하기를 원합니다.
이를 위해 Delldocker-compose을 다음과 같이 확장했습니다.

docker 작성.yml

version: '3.8'

services:
  postgres:
    build:
      context: ./database
      dockerfile: Dockerfile
    ports:
      - 5432:5432
    environment:
      - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
      - POSTGRES_DB=booksdb 
    volumes:
      - db-data:/var/lib/postgresql/data
  graphql-engine:
    image: hasura/graphql-engine:v1.3.2.cli-migrations-v2
    ports:
    - "8081:8080"
    depends_on:
    - "postgres"
    environment:
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgres@postgres:5432/booksdb
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true"
      HASURA_GRAPHQL_DEV_MODE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
    volumes:
      - ./database/metadata:/hasura-metadata
volumes:
  db-data:

두 번째 Docker 컨테이너로서 우리는 이곳에서 하수라graphql-engine라고 부른다.두 번째 그림으로 나는 두 번째 그림에서 설명할 것이다.포트는 8080이 아닐 것입니다. 왜냐하면 응용 프로그램이 여전히 그것을 필요로 할 수도 있기 때문입니다.
우리의 작업 절차의 중요한 부분은postgres URL을 HASURA_GRAPHQL_DATABASE_URL로 추가하는 것이다.
두 컨테이너를 즉시 시작하려면 다음과 같이 하십시오.

docker-compose up -d

두 컨테이너가 성공적으로 부팅되면 http://localhost:8081/consoleHasura 콘솔에 액세스할 수 있습니다.여기에서 untracked tables 에서Postgres 데이터베이스에 있는 표를 볼 수 있습니다.선택을 클릭하면 이 모든 것을 하수라 컨트롤러의 검색 도구에서 직접 조회할 수 있습니다.이 목적에 사용되는 모델은 다음 단계에서 코드 생성기에 전달하고자 하는 내용입니다.
항상 Hasura 콘솔을 열고 모드에 새 테이블을 추가할 필요가 없도록 컨테이너를 시작할 때 메타데이터 파일을 가져올 수 있습니다.이 파일의 가져오기는 docker compose 파일에 이미 있습니다.

/ 데이터베이스 / 메타데이터 / 테이블아마르

- table:
    schema: public
    name: author
  array_relationships:
  - name: book
    using:
      foreign_key_constraint_on:
        column: authorid
        table:
          schema: public
          name: book
- table:
    schema: public
    name: book
  object_relationships:
  - name: author
    using:
      foreign_key_constraint_on: authorid

->코드 생성기를 설정하자!
먼저 다음 패키지를 설치해야 합니다.

npm install @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/typescript-react-apollo @graphql-codegen/typescript-resolvers

다음은 코드젠을 설정합니다.yml:

코드건.yml

overwrite: true
schema: 'http://localhost:8081/v1/graphql'
documents: 'src/graphql/**/*.graphql'
generates:
  src/generated/graphql-backend.ts: # Outputs the resolver type-safed
    plugins:
      - 'typescript'
      - 'typescript-resolvers'
    config:
      useIndexSignature: true
  src/generated/graphql-frontend.ts: # Outputs the type definitions for typescript as well as useQuery hooks for all query files
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
  src/generated/schema.graphql:
    plugins:
      - 'schema-ast'

Hasura URL을 모드로 지정하면 생성할 파일을 지정할 수 있습니다.이 예에서, 우리는 3, 즉graphql 백엔드를 지정했다.ts,graphql 전단.ts와 모드.graphql 자체.둘 다 먼저 형식 스크립트 형식을 생성합니다.그리고 typescript react apollo 플러그인을 사용하여 백엔드 파일의 해상도와 전단의useQuery 연결에 인터페이스를 생성합니다.GraphQL 파일의 모든 질의를 사용합니다. 이 질의는 문서 뒤에 지정된 디렉토리에 있습니다.('src/graphql/*/.graphql').
필요할 때 자신의 검색 정의를 사용하여 확장할 수 있도록 패턴을 파일로 다시 생성합니다.그리고 이 두 가지는 모두 우리schema.ts에 합병되었다.

패턴.ts

import {GraphQLFileLoader} from '@graphql-tools/graphql-file-loader';
import {loadSchemaSync} from '@graphql-tools/load';
import {makeExecutableSchema} from 'apollo-server-micro';
import {printSchema} from 'graphql';

import {resolvers} from './resolvers';
import {typeDefs} from './type-defs';

const generatedSchema = loadSchemaSync('./src/generated/schema.graphql', {
    loaders: [new GraphQLFileLoader()]
});

export const schema = makeExecutableSchema({
    typeDefs: [printSchema(generatedSchema), typeDefs],
    resolvers
});

생성기를 실행하기 위해서 가방에 다음 스크립트를 추가했습니다.json:

"graphql-codegen": "graphql-codegen --config codegen.yml"

해상도에서 현재 생성된 백엔드 파일에서 생성된 인터페이스와 형식을 사용할 수 있으며, 우리의 백엔드에서 조회나useQuery 연결을 사용할 수 있습니다.
만약 우리가 지금 데이터베이스에 있는 모델을 변경한다면, 응용 프로그램의GraphQL 모델과 모든 필요한 형식 정의는 한 번만 호출하면 업데이트할 수 있습니다.
우리의 구조는 지금 이렇게 보인다.

재구매: https://github.com/alexkneis/automated-sql-to-graphql