Apollo Server (Express) 및 SQLite를 구현하는 TypeScript가있는 GraphQL ORM

SQLite를 데이터베이스로 사용하는 TypeScript 및 Apollo Server를 사용하여 기본 GraphQL 끝점을 만드는 방법을 단계별로 간단하게 설명합니다.

Unsplash에 David Torres의 사진

Python으로 GraphQL에 대한 또 다른 기사를 만들었습니다. 확인하려면 여기를 클릭하십시오 .

T ypeScript와 GraphQL은 천국에서 만들어졌습니다 . 그들은 단지 그렇습니다. 이 기사에서는 Apollo ServerSQLite 를 데이터베이스로 사용하여 간단한 GraphQL 애플리케이션 엔드 포인트를 생성하여 그 이유를 보여 드리겠습니다 . 그러나 지식을 외삽하여 다른 조직화 된 데이터 컬렉션에 사용할 수 있습니다. 그럴 수있는 이유는 TypeORM을 사용 하여 객체-관계형 매핑도 구현하기 때문 입니다.

GraphQL

TypeORMActive RecordData Mapper 아키텍처 패턴을 지원합니다 . Active Record는 틀림없이 더 간단하므로 샘플 애플리케이션에이를 사용할 것입니다.

Apollo Server 는 데이터를 제공하기위한 강력한 프레임 워크를 제공합니다. 설정이 쉽고 모든 주요 데이터 소스와의 호환성이 높으며이 기사의 뒷부분에서 사용할 개발 목적으로 그래픽 인터페이스를 구현합니다.

그렇다면 가장 좋은 방법은 무엇일까요? 포켓몬 가자 !

프로젝트 설정 및 구조 🚜

TypeScript 강력한 타이핑을 사용합니다.

SQLite 데이터베이스에 저장된 Pokémon 컬렉션을 쿼리하기 위해 샘플 엔드 포인트를 생성 합니다.

이름 으로 검색 하고 이름 , 유형 , 능력 과 같은 요청 된 정보가있는 노드를받을 있습니다. 또한 GraphQL의 변형을 사용하여 새 항목을 만들있습니다 .

먼저 npm (또는 차 한잔이라면 원사)을 통해 몇 가지 기본 패키지를 설치합니다 .

npm i -SD ts-node-dev
npm i -S @types/node apollo-server-express express graphql reflect-metadata sqlite3 type-graphql typeorm typescript

" / src / " 에 소스 디렉토리가 정의되어 있음을 알 수 있습니다.

데이터베이스 모델 🗄

세 가지 모델이 생성됩니다 " / SRC / 모델 / "디렉토리 : Abilities.ts , Pokemon.ts , Types.tsPokemonAbilities.ts . 이들 각각은 SQLite 데이터베이스의 테이블이됩니다. 배럴 파일 ( index.ts )도있을 것입니다.

TypeORM 데코레이터와 별도로 , GraphQL 유형과 동일한 모델을 준비하기 위해 type-graphql 데코레이터를 추가하고 있습니다.

데이터베이스 시드 🌱

데이터베이스 용 SQLite 3.

데이터베이스에는로드시 몇 개의 행이있을 것입니다. " / src / database / " 안에 init_db.ts 스크립트 를 만들 것 입니다. 애플리케이션이 시작되면이 파일에서 메서드를 호출합니다. 즉, 시작 명령을 실행할 때마다 데이터베이스가 지워집니다. 물론 이것은 간단한 데모이기 때문에보다 영구적 인 배열을 위해이 파일을 한 번만 실행합니다.

이제 애플리케이션이 모델 을 가져올 위치 또는 데이터베이스를 저장할 위치를 알고있는 방법이 궁금하다면 TypeORM 에 대한 “ 가이드 ”파일을 만들고 있기 때문입니다 .이 파일은 앱의 루트에 있습니다. ormconfig.json 이라고 해야 합니다.

이 시점에서 모델 을 생성하고 데이터베이스를 시드 했으므로 이제 GraphQL Schema 작업을해야합니다 .

GraphQL 스키마 📐

/ src / schema / ”디렉토리 아래 의 Resolvers.ts 파일 은 쿼리변형에 대한 해석기를 노출합니다 . 우리의 경우 6 개의 쿼리와 1 개의 변형이 있습니다.

Apollo Server-Express를 사용하여 GraphQL 끝점 노출 🌏

Apollo 서버

마지막으로 우리는 애플리케이션 개발의 마지막 단계에 있습니다. 우리는 묶을 예정 아폴로 서버 Express를 우리의 GraphQL 엔드 포인트.

이를 위해 앱의 진입 점을 만들 것입니다. 우리의 경우에는 server.ts 라고 부르고 프로젝트의 루트에 둡니다. 기본적으로 런타임에 즉시 호출 되는“ main () ”메소드입니다.

이“ main () ”메소드는 먼저 10 행에서 “ init_db () ”를 호출 한 다음 20 행에서 Apollo와 함께 Express 서버를 배치하여 데이터베이스 를 배치합니다.

package.json 이 스크립트를 추가합니다

“watch”: “ts-node-dev -respawn -transpileOnly ‘src/server.ts’”

시도 할 수있는 좀 더 복잡한 쿼리 getPokemonAbilities는 " name "매개 변수를 수신하고 차례로 두 개의 결과 세트를 반환하는 것입니다. 첫 번째는 검색된 포켓몬이고 두 번째는 그와 관련된 능력 목록입니다. 이것은 UNION의 도움으로 이루어집니다 .

데이터 변형 🐛

마지막으로 데이터베이스에 더 많은 행을 만들 수 있습니다. 간결함을 위해 이름이있는 새 항목 만 추가합니다. 이를 쉽게 확장하여 더 많은 열과 관계를 추가 할 수 있습니다.

생성 된 항목을 반환합니다.

아마도 여기에서 갈 좋은 곳은 class-validator 일 것입니다. 이것은 데코레이터를 사용하여 클래스 속성의 유효성을 검사 할 수있게합니다.

또한 GraphQL Authorization 을 확장 하여 엔드 포인트에 다른 권한 및 보안 계층을 추가 할 수 있습니다.

다음 내용 및 추가 자료

탐색 할 수있는 더 많은 주제 :

TypeScript / ReactJS : 요소 대 ReactElement 대 HTMLElement 대 노드 혼란 SOAP, RESTful, GraphQL : 올바른 통신 표준 선택 행동 기반 개발이 프로젝트에 적합합니까?

추가 읽기 :

LinkedIn , Medium , GitHub 에서 저를 찾으십시오 .

Suggested posts

Angular 11 아키텍처 소개

Angular 11 아키텍처 소개

Angular는 TypeScript를 사용하여 클라이언트 애플리케이션을 개발하기위한 Google 지원 프레임 워크입니다. 개별 요구 사항과 관련된 기성 시작 코드를위한 TypeScript 라이브러리로 사전 구현 된 기능 세트를 제공합니다.

리 액트 디자인 시스템의 품질을 향상시킨 8 가지 학습

리 액트 디자인 시스템의 품질을 향상시킨 8 가지 학습

PriceRunner의 디자인 시스템 팀은 React Design System Fabric의 품질과 안정성을 개선하여 배운 것을 공유합니다. 대규모 웹 사이트를위한 디자인 시스템을 개발하는 것은 어렵습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.