0、目標

YTS API(映画情報を提供するAPI)をGraphQLとしてパッケージし、API要素に必要な情報のみを受信する.
API構造プレビュー:https://yts.mx/api/v2/list_movies.json?
github: https://github.com/MinGookK/movieql

意味がわからなければ、前のポスターを見て30秒で読めます.
なぜGraphQLを使うのですか?
入るまでは、GraphQLを深く処理しません.

1.構造

GraphQLを使用してAPIを作成するには、大きく4つのファイルに分けられます.

index.js
サーバドライバコードを作成します.

schema.graphql
GraphQLのデータ型を指定します.
(要求データのタイプ、要求変換のタイプ;結果のタイプを指定)

resolvers.js
schemaに基づいて実際のデータ移動を作成する
(schema=問題セット、解析器=答え)

db.js
データの作成や関数の管理などを行います.

1. index.js

ここではGraphqlserverドライバコードを記述します.

import { GraphQLServer } from 'graphql-yoga';
import resolvers from './graphql/resolvers';

//GraphQLServer 안의 {} 에 서버 환경설정을 넣어주면 서버 구동 끝이다. 너무 쉽다.
const server = new GraphQLServer({
  //모든 type에 대한 정의임 작성해둔 graphql의 위치 입력
  typeDefs: 'graphql/schema.graphql',
  resolvers,
});

server.start(() => console.log('GraphQL Server Running'));

特にありません.これがサーバドライバの終了です.ははは
GraphQLServerに2、3つの要素schemaと解析器を入れればいいです.
これは何なのか教えてあげますから、読み続けましょう.

2. schema.graphql

ここではGraphQL APIが使用するデータ型を示す場所です.

type Movie {
  #첫줄 설명: id라는 것은 Int 자료형을 가지고 "반드시 필요"(!)하다.
  #반드시 필요하지 않은 값이라면 !를 빼주면 된다.
  id: Int!
  title: String!
  rating: Float!
  summary: String!
  medium_cover_image: String!
}

type Query {
  # person이라는 쿼리를 담아 보내면 String 형태로 반환해 줄 것이고 반드시 필요하다(!)라는 뜻
  movies(limit: Int, rating: Float): [Movie]!
}

APIプレビューリンクをクリックすると、映画に関する情報がたくさん届きます.
私たちはこの中にいます.
id, title, rating, summary, medium_cover_image
タイプMovieのみが必要なので、type Movieではこのパラメータのみがマークされます.
その後、Queryでmoviesを呼び出すと、結果に一致するMovieのArrayが返されます.

3.resolvers.js

schemaはqueryを含める方法、結果がどのようなタイプになるかを示します.
今は答え用紙に記入して、本当のデータがどのように得られるかを見るだけです.

// Query를 resolve(해결)하는 것
// graphql 에서 작성한 쿼리를 해결하는 코드를 resolvers에서 작성한다.

import { getMovies } from './db';

const resolvers = {
  Query: {
    movies: (_, { limit, rating }) => getMovies(limit, rating),
  },
};

export default resolvers;

movies( _, { limit, rating } )から_はルートで、ここでは必要ありません.
ユーザーからlimitとratingを取得します.
つまり、getMoviesで限界個数を超えるスコアを獲得した映画だけが返却される.
これで解決策も終わりです.

4. db.js

これで、タイプ定義と解析が完了しました.
ここではgetMoviesがどのように映画情報を受信したかだけを記入します.

import axios from 'axios';

export const getMovies = (limit, rating) => {
  let API_URL = 'https://yts.mx/api/v2/list_movies.json?';
  if (limit > 0) {
    API_URL += `limit=${limit}`;
  }
  if (rating > 0) {
    API_URL += `&minimum_rating=${rating}`;
  }
  return axios.get(API_URL).then((res) => res.data.data.movies);
};

API Document: https://yts.mx/api#list_movies
ドキュメンタリーを読んだことがあるならlimitを入力すると数字で映画に載せることがわかります
minimum ratingを入力すると、入力点数以上の映画にしか評価されません.
もう終わりだ!テストしてみましょう.

2.テスト

GraphQLヨガを使用すると、このようにして生成されたAPIを非常に簡単にテストすることができます.yarn startを実行し、アドレスウィンドウにlocalhost:4000を入力します.

ここでは、作成したAPIをテストできます.右側でDOCSボタンを押してください.

驚くべきことに、私たちがモードで書いた内容はきれいに整理されています.
指示に従ってQueryを作成します.

テストが順調かどうかを見るために、titleとratingだけをマークするように呼んでみました.
案の定、4つの情報がlimit数字で、みんなの評価も8点を超えた.
例ではtitleとratingのみがマークされていますが、それ以外に必要な情報を追加または削除して呼び出すと、「ちょうどいい」要求の情報しか受信できません.
映画の表紙画像の情報をもう一度受信します.

やっぱり成功した!
このデータクリーンアップ作業はフロントで多く処理されています.
最初はGraphQLでAPI設計を行い、フロントでは表示と機能に集中するだけで、作業が楽になるかもしれません.