Github Graphql API, Apollo Angular, 네스트된 및 배포

42133 단어 dohackathongitalytics
따라서 nx workspace를 설정한 후에 Github GraphQL API를 계속 탐색하고 Apollo Angular를 사용하여 같은 API를 사용합니다.내가 어떻게 했는지 보여줘!

TL；박사 01 명


이것은 긴 과정이 될 것이다. 따라서 코드에만 관심이 있다면...

슈다만 / gitalytics


🐙 🐱 📊 Gitalytics – Github 활동에 대한 간단한 개요


카탈로그

  • 1. Github GraphQL

  • 2. API with NestJS

  • 2.1 Configuration
  • 2.1.1 Environment Variables
  • 2.1.2 Variable Validation
  • 2.1.3 ConfigModule
  • 2.1.4 Ignore .env file

  • 2.2 CORS
  • 2.2.1 CORS in NestJS

  • 2.3 API Redirection
  • 2.3.1 AppController
  • 2.3.2 The API logic

  • 3. Apollo Angular
  • 3.1 Installation
  • 3.2 Changes tsconfig.json
  • 3.3 API URL
  • 3.4 GraphQL Module

  • 3.5 Services

  • 3.5.1 Code Generation
  • 3.5.1.1 GraphQL Code Generator
  • 3.6 Usage

  • 4 Deployment
  • 4.1 Scripts

  • 4.2 App Setup

  • 4.2.1 Environment Variables
  • 4.2.1.1 API

  • 4.2.2 Commands
  • 4.2.2.1 API
  • 4.2.2.2 Client
  • 5 Next Steps

    • 1.Github GraphQL


    GitHub GraphQL API는 얻을 데이터를 유연하고 정확하게 정의할 수 있는 능력을 제공합니다.
    그것은 단지 하나의 단점, 즉 https://api.github.com/graphql만 있다.어떤 조작을 하든지 간에 단점은 변하지 않는다.
    GraphQL Explorer를 사용하여 실제 GitHub 데이터에 대한 조회를 실행할 수 있습니다. 이것은 브라우저의 통합 개발 환경입니다. 문서, 문법 강조 표시, 검증 오류를 포함합니다.
    이 API에 액세스하려면 Personal Access Token가 필요합니다.
    주로, 나는 모든 조작에 대해 user 만 조회할 것이다.

    2. API(NestJS 포함)


    우리는 Angular nest로 NX 작업 영역을 미리 만들었기 때문에 덕분에 apps/api에 nestjs 프로젝트를 설정했습니다.
    우리는api/github만 만들 것입니다. 이것은 https://api.github.com/graphql의 방향을 바꾸는 데 사용됩니다.
    고객 프로젝트에서 직접 사용할 수도 있습니다https://api.github.com/graphql.그러나 Github API를 사용하려면 PAT(즉 개인 액세스 토큰)를 사용하여 액세스해야 합니다.이제 클라이언트에서 직접 사용하면 PAT가 노출될 수 있습니다.

    2.1 구성


    노드에서js 응용 프로그램, 이것은 자주 사용하는 것입니다.env 파일은 키 값 쌍을 포함하고 키마다 특정한 값을 대표하며 환경을 대표합니다.서로 다른 환경에서 응용 프로그램을 실행하려면 정확한 환경에서 교환하기만 하면 된다.환경 파일.
    우리는 nestjs configuration 준칙을 따를 것이다.

    2.1.1 환경 변수


    를 생성합니다.환경 파일 ar 루트:
    PAT=PERSON_ACCESS_TOKEN
API_URL=https://api.github.com/graphql
PORT=3000
WHITELIST_URL=http://localhost:4200
NODE_ENV=development
    변수
    묘사
    두드리다
    GitHub 개인 액세스 토큰
    API_URL
    GitHub GraphQL API 엔드포인트
    항구.
    nestjs 프로그램을 어디에서 실행하시겠습니까?
    화이트 리스트
    쉼표로 구분된 URL로 API 액세스 허용
    NODE_ENV
    어플리케이션 실행 환경

    2.1.2 변수 검증


    우리는 또한 이 변수들을 검증해서 어떠한 운행 시 문제도 피할 것이다.
    다음 위치에서 파일을 만듭니다: apps/api/src/app/config/validation.ts:
    import * as Joi from '@hapi/joi';

export const validationSchema = Joi.object({
  PORT: Joi.number().required(),
  PAT: Joi.string().required(),
  API_URL: Joi.string().required(),
  WHITELIST_URL: Joi.string().required(),
  NODE_ENV: Joi.string().valid('development', 'production').required(),
});

    2.1.3 구성 모듈

    ConfigModule에서 가져오고AppModule
    // ...
import { ConfigModule } from '@nestjs/config';
import { validationSchema } from './config/validation';

@Module({
  imports: [ConfigModule.forRoot({ validationSchema })],
  // ...
})
export class AppModule {}

    2.1.4 무시.환경 파일


    추가를 확인합니다.환경 파일.gitignore:
    .env

    2.2 CORS


    Dell은 위의 환경validationSchema에서 API 호출만 허용합니다.CORS는 우리가 이 목표를 실현하는 데 도움을 줄 수 있다.

    2.2.1 NestJS의 COR


    엔진 덮개 아래에서 Nest는 Expresscors 패키지를 사용합니다.이 패키지는 다양한 옵션을 제공하여 사용자의 요구에 따라 맞춤형으로 제작할 수 있습니다.
    메인을 수정하라고 합니다.ts 파일:
    // apps/api/src/main.ts

// ...
import { ConfigService } from '@nestjs/config';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const configService = app.get(ConfigService);
  const allowList = configService.get<string>('WHITELIST_URL').split(',');
  const env = configService.get<string>('NODE_ENV');

  app.enableCors({
    origin: (origin, callback) => {
      // allow requests with no origin
      // (like mobile apps or curl requests)
      if (!origin && env !== 'production') return callback(null, true);

      if (allowList.indexOf(origin) === -1) {
        const msg =
          'The CORS policy for this site does not allow access from the specified Origin.';
        return callback(new Error(msg), false);
      }
      return callback(null, true);
    },
  });

  const globalPrefix = 'api';
  // rest remains same
}

bootstrap();

    2.3 API 리디렉션

    WHITELIST_URL 경로에 API를 생성합니다.

    2.3.1 어플리케이션 컨트롤러


    // apps/api/src/app/app.controller.ts

// ...
@Controller()
export class AppController {
  constructor(
    private readonly appService: AppService
  ) {}

  // ...

  @Post('github')
  async github() {
    // TODO
  }
}

    2.3.2 API 논리


    다음은 우리가 하고 싶은 일이다.
  • 요청에서 본문을 읽기
  • 읽기
    • 및 읽기/github
  • 밸브를 GitHub API로 전송하고 권한 수여서에 PAT
    • 첨부
  • GitHub API에 대한 반환 응답
    • 먼저 환경을 살펴보겠습니다.
    // apps/api/src/app/app.controller.ts

// ...
import { ConfigService } from '@nestjs/config';

export class AppController {
  private token: string;
  private api_url: string;
  constructor(
    // ...
    private readonly configService: ConfigService
  ) {
    this.token = this.configService.get('PAT');
    this.api_url = this.configService.get<string>('API_URL');
  }
  //...
}
    GitHub API 엔드포인트에 요청을 보내려면 PAT가 필요합니다.
    Axios는 기능이 풍부한 HTTP 클라이언트 패키지로 널리 사용되고 있다.네스트는 악시오스를 감싸고 내장API_URL을 통해 노출시킨다.HttpService 클래스 내보내기HttpModule - HTTP 요청을 실행하기 위해 Axios 방법을 기반으로 하는 클래스를 공개합니다.HttpModule를 사용하려면 먼저 가져오십시오HttpService.
    @Module({
  imports: [HttpModule],
})
export class AppModule {}
    그런 다음 일반 구조 함수를 사용하여 Http Service에 주입합니다.
    export class AppController {
  // ...
  constructor(
    // ...
    private httpService: HttpService
  ) {
    // ...
  }
  //...
}
    이제 API 함수:
    @Post('github')
async github(@Req() req: Request, @Res() res: Response) {
  const result = await this.httpService
    .post(this.api_url, req.body, {
      headers: { Authorization: 'Bearer ' + this.token },
    })
    .toPromise();
  res.status(result.status).send(result.data);
}
    이렇게!NestJS API는 GitHub GraphQL에 서비스를 제공할 준비가 되어 있습니다.

    3. 아폴로


    나는 Apollo AngularGraphQL 클라이언트로 사용한다.다음 단계는 다음과 같습니다.

    3.1 설치


    npm install apollo-angular @apollo/client graphql

    3.2 tsconfig 변경json

    HttpService 패키지는 AsyncIterable가 필요하므로 tsconfig를 확인하십시오.기지.json 포함 내용HttpModule:
    {
  "compilerOptions": {
    // ...
    "lib": [
      "es2017",
      "dom",
      "esnext.asynciterable"
    ]
  }
}

    3.3 API URL


    API URL을 다음 환경에 저장합니다.
    // apps/client/src/environments/environment.ts

export const environment = {
  production: false,
  api_url: '/api',
};
    NX는 Angular 응용 프로그램이 개발 중인 API와 대화할 수 있도록 프록시 구성을 만듭니다.
    그 작업 원리를 이해하려면angular을 열어 주십시오.json 및 대상 찾기@apollo/client:
    {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "client:build",
      "proxyConfig": "apps/client/proxy.conf.json"
    },
    "configurations": {
      "production": {
        "browserTarget": "client:build:production"
      }
    }
  },
}
    proxyConfig 속성을 확인하십시오.
    지금 에이전트를 엽니다.conf.json:
    {
  "/api": {
    "target": "http://localhost:3333",
    "secure": false
  }
}
    이 설정은 nx 서버가/api로 시작하는 모든 요청을 탐지 포트 3333의 프로세스로 전송할 것을 알려 줍니다.
    3000 포트에서 API를 실행하고 있으므로 esnext.asynciterable로 변경합니다.
    다음은 prod API URL입니다.
    // apps/client/src/environments/environment.prod.ts

export const environment = {
  production: true,
  api_url: 'https://url-to-api/api',
};
    배포 API 프로젝트의 실제 URL로 교체해야 합니다serve.

    3.4 GraphQL 모듈


    GraphQL 모듈 만들기:
    ng g m graphql --project=client

    // apps/client/src/app/graphql/graphql.module.ts

import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { Apollo, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { InMemoryCache, ApolloLink } from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';
import { environment } from '../../environments/environment';

const uri = environment.api_url + '/github';

export function createApollo(httpLink: HttpLink) {
  const basic = setContext((operation, context) => ({
    headers: {
      Accept: 'charset=utf-8',
    },
  }));

  const link = ApolloLink.from([basic, httpLink.create({ uri })]);
  const cache = new InMemoryCache();

  return {
    link,
    cache,
  };
}

@NgModule({
  exports: [HttpClientModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}
    가져오기http://localhost:3000:
    // apps/client/src/app/app.module.ts

// ...
@NgModule({
  // ...
  imports: [
    // ...
    GraphQLModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

    3.5 서비스


    아폴로 Angular에는 3개의 API가 있다. url-to-api, app.module.ts와 Query.그것들 중 하나는 결과와 변수의 형상을 정의할 수 있다.유일하게 해야 할 일은 문서 속성을 설정하는 것이다.그렇습니다. 당신은 그것을 일반적인 각도로 서비스합니다.
    이런 방법에서GraphQL 문서는 일등 시민입니다. 예를 들어 검색을 주요 주제로 삼을 수 있습니다.너는 Query, Mutation, Subscription services에서 그것에 대한 더 많은 정보를 읽을 수 있다.

    3.5.1 코드 생성


    모든 정의된 조회, 돌연변이, 구독에 대해 구성 요소에서 언제든지 사용할 수 있는 강력한 종류인 Angular 서비스를 생성할 수 있는 도구가 있습니다.

    3.5.1.1 GraphQL 코드 생성기
    GraphQL Code Generator는 GraphQL 모드에 따라 유형 스크립트를 생성할 수 있는 CLI 도구입니다.
    먼저 GraphQL 코드 빌더를 설치합니다.
    npm install --save-dev @graphql-codegen/cli
    다음은 apps/client/src/에 기본 검색어를 만듭니다.그림 ql:
    query Viewer {
  viewer {
    login
  }
}
    GraphQL 코드 빌더를 사용하면 다음 명령만 실행하면 모든 내용을 설정할 수 있습니다.
    npx graphql-codegen init
    다음 질문에 답하십시오.
    $ npx graphql-codegen init

    Welcome to GraphQL Code Generator!
    Answer few questions and we will setup everything for you.

? What type of application are you building?           Application built with Angular

? Where is your schema?: (path or url)                 https://raw.githubusercontent.com/octokit/graphql-schema/master/schema.graphql

? Where are your operations and fragments?:            apps/client/src/.graphql

? Pick plugins:                                        TypeScript (required by other typescript plugins),
                                                       TypeScript Operations (operations and fragments),
                                                       TypeScript Apollo Angular (typed GQL services)

? Where to write the output:                           apps/client/src/generated/graphql.ts

? Do you want to generate an introspection file?       Yes

? How to name the config file?                         codegen.yml

? What script in package.json should run the codegen?  generate-codegen
    이러한 작업을 완료하면 다음 사항이 변경됩니다.

  • 코드건.yml는 프로젝트의 루트 디렉터리에서 생성되었습니다
  • Mutation 포장의 Subscription 부분에 첨가한다.json

  • apps/client/src/generated/graphql.ts는 강력한 유형의 Angular 서비스로 만들어졌으며 정의된 쿼리, 변이 또는 구독에 사용됩니다

    • 3.6 사용


    이제 Github API를 사용할 때가 되었습니다.
    // apps/client/src/app/home/home.component.ts

// ...
import { ViewerGQL, ViewerQuery } from '../../generated/graphql';

@Component(...)
export class HomeComponent implements OnInit {
  // ..
  viewer$: Observable<ViewerQuery['viewer']>;

  constructor(
    // ...
    private viewerGQL: ViewerGQL
  ) {}

  ngOnInit() {
    this.viewer$ = this.viewerGQL.watch().valueChanges.pipe(map((result) => result.data.viewer));

    // subscribe to get the data
    this.viewer$.subscribe((data)=>console.log(data));
  }
}
    쿨, GraphQL 관련 설정을 완료했습니다.이 두 항목을 실행하고 결과를 검사할 수 있습니다.

    4 배포


    Digital Ocean에서 API에 대한 응용 프로그램을 추가로 만들고 같은 repo를 연결합니다.프로젝트를 구축하려면 조수 스크립트가 필요합니다.

    4.1 스크립트


    먼저 설치npm-run-all:
    npm i -D npm-run-all
    다음 스크립트를 가방에 추가합니다.json:
    {
  // ...
  "scripts": {
    // ...
    "build:prod:client": "ng build client --prod",
    "build:prod:server": "nx build api --prod",
    "build:prod": "run-s build:prod:server build:prod:client",
    "deploy:start:client": "serve -s dist/apps/client -l tcp://0.0.0.0:$PORT -n",
    "deploy:start:server": "node dist/apps/api/main.js",
    "deploy:start": "run-p deploy:start:server deploy:start:client",
  },
}

    4.2 어플리케이션 설정


    API 및 클라이언트에 대한 응용 프로그램 설정을 나열합니다.

    4.2.1 환경 변수



    4.2.1.1 API
    변수
    가치관
    두드리다
    GitHub 개인 액세스 토큰.암호화로 표시
    API_URLgenerate-codegen화이트 리스트scriptsNODE_ENVhttps://api.github.com/graphql

    4.2.2 명령



    4.2.2.1 API
    -
    명령하다
    짓다https://url-of-your-client뛰어다니다production
    4.2.2.2 고객
    -
    명령하다
    짓다npm run build:prod:server뛰어다니다npm run deploy:start:server

    5. 다음 단계


    현재 나는 ng2-charts로 클라이언트와 도표에 데이터를 표시할 것이다.
    보고 싶으면 계산: https://gitalytics.shhdharmen.me/
    읽어주셔서 감사합니다.
    즐거움 코드
    🌲 🌞 😊
    [Swift] 맵, flatmap,commpactMap의 차이점 노트
    연관(objc setassociatedObject, objc getassociatedObject, objc removeAssociatedObjects) 및 확장 extension

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage