GraphQL의 모든 API 응답 사용

내 작업장에서, 우리는 새로운 응용 프로그램에 환경을 설정하고, 정적 분석을 충분히 활용하기 위해 typescript를 사용하기로 결정했다.표준 아키텍처, REST API 및 react/react 기본 프런트엔드가 있습니다.
또한 API 응답을 사용하는 부분을 제외하고는 전체 응용 프로그램이 안전하다는 것을 보장할 수 있습니다.API 응답 유형을 수동으로 작성해야 합니다.이런 방법의 가장 큰 문제는 응답이 유형이 안전하다는 것을 확보할 수 없다는 것이다. 왜냐하면 우리는 단지 그들의 유형을 가설할 뿐이기 때문이다.
그리고 만약 우리가 GraphQL 사진에서 여행을 시작한다면 무슨 일이 일어날지 알고 싶습니다.GraphQL이 무엇인지 모르면, 이것은 API의 검색 언어입니다. API가 제공하는 내용을 엄격한 유형의 모델로 정의할 수 있으며, 클라이언트는 그 중의 하위 집합을 사용할 것입니다.
GraphQL과 완전한 유형의 보안 전단을 사용하여 POC를 구축하기로 결정했습니다.전체 코드(서버 및 클라이언트)here에 액세스할 수 있습니다.

서버측

나는 이 문제의 서버 측도, GraphQL도 깊이 토론하지 않을 것이다.다음은 내 API 모드입니다.

the server is written using node+typescript+apollo-sever

패턴

type Book {
  id: Float!
  title: String!
  subtitle: String!
  author: String!
  published: String
  publisher: String
  pages: Int!
  description: String!
  website: String!
}

type Query {
  getBooks(limit: Int): [Book]
  getBookDetails(id: Float): Book
}

위의 모델에서 type Book는 하나의 자원이고 type Query는 우리가 어떤 조회를 지원하는지 정의하는 곳이다.getBooks는 Books의 수조로 응답하고 getBookDetails는 Book의 수조로 응답하여 주어진 ID.

클라이언트

따라서 우리는 다음과 같은 문제를 해결해야 한다.

프런트엔드를 GraphQL에 연결합니다.

전체 유형의 응답을 자동으로 받습니다.

질의를 작성할 때 IntelliSense를 사용합니다.

GraphQL에 프런트엔드 연결

나는 실행 Create Apollo app 을 통해GraphQL 구동의react 프로그램을 만들었다

yarn create apollo-app client

이것은 .graphql 파일과 백엔드에 연결된 샘플 코드에 대한 지원을 제공합니다.

See client/src/index.tsx

그러나 나중에 나는 템플릿이 매우 낡아서 업그레이드graphql를 거쳐 react-apollo에서 @apollo-client로 옮겨진 것을 발견했다.

I used the create-apollo-app for generating the server codebase as well.

우리는 useQuery 중의 @apollo/client 갈고리를 이렇게 사용하여 데이터를 사용할 수 있다.

client/src/queries/getBooks.ts

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

export const GET_BOOKS = gql`
query getBooks($limit: Int) {
  getBooks(limit: $limit) {
    id
    title
    subtitle
    author
  }
}
`

client/src/ListBooks.tsx

import { useQuery } from "@apollo/client";
import { GET_BOOKS } from './queries/getBooks.ts'

const ListBooks: React.FC<{}> = () => {
 const { loading, error, data } = useQuery(GET_BOOKS,{
    variables: {
      limit: 5,
    },
  });
...render data
}

그것은 일을 할 수 있지만 데이터가 아직 완전히 유형화되지 않았다.

강력한 유형 응답 자동 가져오기

응답 형식을 수동으로 작성하는 것을 피하기 위해서 GraphQL Code Generator를 사용할 것입니다.
graphql codegen은 제공된 graphql 모드에 따라 자동으로 유형을 생성하는 CLI 도구입니다.그들은 전단과 후단의 유형을 만들기 위해 많은 플러그인과 옵션을 가지고 있다.
이를 사용하면 서버 쪽에서 작성한 GraphQL 모드를 전체 응용 프로그램의 유일한 실제 원본으로 사용할 수 있습니다.
설치가 간단합니다.참조Installation page:

# install the cli as a dev-dependency
yarn add -D @graphql-codegen/cli

# Step by step walkthrough initialization
yarn graphql-codegen init

위의 코드는 우리의 선택에 따라 개발 의존 항목을 추가했고 프로젝트 루트 디렉터리에 codegen.yml 파일을 만들었습니다.나의 codegen.yml 서류는 아래와 같다.

overwrite: true
schema: "http://localhost:8080/graphql"
documents: "src/**/*.ts"
generates:
  src/queries/typedQueries.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-react-apollo"

내가 너를 데리고 옵션을 훑어볼게.

schema - 스키마의 URL입니다.파일, 함수 및 문자열일 수도 있습니다.문서를 참조하십시오.

문서 - GraphQL 쿼리와 세션을 어디서 검색합니까?나는 그것으로 하여금 .ts 파일을 검색하게 했다

생성-대상 파일 경로.

플러그인 - init에서 선택한 옵션에 따라 자동으로 추가

typescript - 형식의 최소 플러그인을 생성합니다.

typescript 작업 - GraphQL Operations 생성 유형

typescript react apollo - @apollo/client에 대한 검색과 기타 지원 형식화 연결을 생성합니다.

현재, 실행 yarn generate 후에 파일 typedQueries.ts 을 생성합니다.생성된 hook 을 사용하기 위해 구성 요소를 업데이트했습니다.

import React from "react";
import { useGetBooksQuery } from "./queries/typedQueries.ts";

const ListBooks: React.FC<{}> = () => {
  const { loading, error, data } = useGetBooksQuery({
    variables: {
      limit: 5,
    },
  });
...render data
}

이곳에 무슨 변화가 생겼습니까?우리는 더 이상 조회를 가져오지 않습니다. 생성된 유형은 이 점을 실현할 것입니다.너는 어떻게 생각하느냐?data는 전체 타자입니다.🎊

조회를 변경할 때마다 yarn generate 실행할 필요가 없고, 감시 모드에서codegen cli를 실행할 수도 있습니다.참조Documentation.

Note: If you are going to use node for the backend, codegen-cli will be helpful for generating types from Schema so that you don't need to define the types two times. Refer to server code in my codebase for reference.

질의를 작성할 때 IntelliSense(vscode에서)

Apollo VS Code extension Apollo를 사용하여 응용 프로그램을 개발하는 데 일체화된 도구 체험을 제공했다.
우리는 확장자를 설치하기만 하면 문법을 강조할 수 있다.그러나 IntelliSense를 사용하려면 프로젝트에 구성 파일을 추가해야 합니다.

client/apollo-config.js

module.exports = {
  client: {
    service: {
      name: "my-graphql-app",
      url: "http://localhost:8080/graphql",
    },
    excludes: ["**/src/queries/typedQueries.ts"],
  },
};

이 구성을 추가하면 URL에서 다운로드 모드를 확장하고 질의를 작성할 때 IntelliSense를 제공합니다.

마지막 한 가지!모드를 업데이트할 때 확장자가 이 점을 받지 못했기 때문에 수동으로 실행해야 합니다 reload schema.ctrl+shift+p 명령 팔레트 열기

나는 이런 상황이 자동으로 발생할 수 있는 옵션이 있는지 모르겠다.나는 분기기를 깊이 연구하지 않았다documentation.
이렇게이제 강력한 API 호출 유형 시스템과 GraphQL의 추가 장점이 생겼습니다.
이것은 나의 첫 번째 게시물이다.만약 네가 아직도 여기에 있다면, 이렇게 오랫동안 인내심을 가지고 있어 줘서 고마워.