ノードでGraphQL APIの構築を開始します

私たちは皆、多くの興味と趣味を持っています。たとえば、JavaScript、90年代のインディーロックとヒップホップ、人気のないジャズ、ピッツバーグの街、ピザ、コーヒー、ジョンルーリー主演の映画に興味があります。私たちの家族、友人、知人、クラスメート、同僚も、独自の社会的関係、興味、趣味を持っています。私の友人であるライリーのように、これらの関係や関心のいくつかは重複しています。他の人は、JavaScriptよりもPythonを好む私の同僚のHarrisonなど、お茶だけを飲み、現在のポップミュージックを好むなど、重複していません。全体として、私たち一人一人は、私たちの生活の中で人々とのつながりの地図を持っています。

このタイプの相互に関連するデータは、まさにGraphQLが最初にAPI開発で解決し始めた課題です。 GraphQL APIを作成することにより、データを効果的に接続し、複雑さと要求カウントを減らしながら、必要なデータをクライアントに正確に提供できるようにします。 （GraphQLメタファーをご希望の場合は、カクテルパーティーでGraphQLに会うことをご覧ください。）

この記事では、Apollo Serverパッケージを使用して、node.jsでGraphQL APIを構築します。これを行うには、基本的なGraphQLトピックを調査し、GraphQLパターンを書き込み、パターン関数を解析するコードを作成し、GraphQL Playgroundユーザーインターフェイスを使用してAPIにアクセスします。

graphqlとは何ですか？

GraphQLは、APIのオープンソースクエリおよびデータ操作言語です。その開発目標は、データに単一のエンドポイントを提供し、アプリケーションが必要な正確なデータを要求できるようにすることです。これにより、UIコードを簡素化するだけでなく、ネットワークを介して送信する必要があるデータの量を制限することでパフォーマンスを向上させます。

私たちは何を構築していますか

このチュートリアルに従うには、ノードV8.x以降が必要で、コマンドラインを使用した経験が必要です。

私たちが読んだものから思い出に残る段落を保存できる本の抜粋のためのAPIアプリケーションを構築します。 APIユーザーは、抜粋で「CRUD」（作成、読み取り、更新、削除）操作を実行できます。

• 新しい抜粋を作成します
• 単一の抜粋と抜粋のリストを読んでください
• 更新された抜粋
• 抜粋を削除します

始める

まず、プロジェクトの新しいディレクトリを作成し、新しいノードプロジェクトを初期化し、必要な依存関係をインストールします。

 <code># 创建新目录mkdir highlights-api # 进入目录cd highlights-api # 初始化新的节点项目npm init -y # 安装项目依赖项npm install apollo-server graphql # 安装开发依赖项npm install nodemon --save-dev</code>

先に進む前に、依存関係を分解しましょう。

• apollo-serverノードアプリケーションでGraphQLを使用できるライブラリです。これをスタンドアロンライブラリとして使用しますが、Apolloチームは、既存のノードWebアプリケーションでExpress、HAPI、Fastify、およびKOAを操作するためのミドルウェアも作成しています。
• graphqlにはGraphQL言語が含まれており、 apollo-serverに必要なピア依存関係です。
• nodemon 、変更のプロジェクトを監視し、サーバーを自動的に再起動する便利なライブラリです。

パッケージをインストールした後、 index.jsという名前のアプリケーションのルートファイルを作成しましょう。次に、 console.log()を使用して、このファイルにメッセージを出力します。

 <code>console.log("? Hello Highlights");</code>

開発プロセスを簡素化するために、 package.jsonファイルのscriptsオブジェクトを更新して、 nodemonパッケージを使用します。

 <code>"scripts": { "start": "nodemon index.js" },</code>

これで、ターミナルアプリケーションでnpm start入力することにより、アプリケーションを開始できます。すべてが正常に機能したら、わかりますか? Hello Highlightsこんにちは? Hello Highlightsターミナルにログインします。

GraphQLスキーマタイプ

パターンは、データと相互作用の書面による表現です。必要なパターンを通じて、GraphQLはAPIの厳格な計画を実装します。これは、APIがスキーマで定義されたデータのみを返すことができ、相互作用を実行できるためです。 GraphQLパターンの基本コンポーネントはオブジェクトタイプです。 GraphQLには、5つの組み込みタイプが含まれています。

• 文字列： UTF-8文字を使用してエンコードされた文字列
• Boolean： trueまたはfalse値
• INT： 32ビット整数
• フロート：フロート値
• ID：一意の識別子

これらの基本コンポーネントを使用して、APIのパターンを構築できます。 schema.jsというファイルで、 gqlライブラリをインポートして、スキーマ構文のファイルを準備できます。

 <code>const { gql } = require('apollo-server'); const typeDefs = gql` # 模式将放在这里`; module.exports = typeDefs;</code>

パターンを書くために、最初にタイプを定義します。抜粋アプリケーションのパターンをどのように定義するかを考えてみましょう。まず、 Highlightという新しいタイプを作成します。

 <code>const typeDefs = gql` type Highlight { } `;</code>

各抜粋には、一意のID、一部のコンテンツ、タイトル、および著者があります。ハイライトモードは次のようになります：

 <code>const typeDefs = gql` type Highlight {  id: ID  content: String  title: String  author: String } `;</code>

感嘆符を追加することにより、これらのフィールドの一部を必要なフィールドにすることができます。

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } `;</code>

抜粋のオブジェクトタイプを定義しましたが、クライアントがそのデータをどのように取得するかを説明する必要もあります。これはクエリと呼ばれます。後でクエリに飛び込みますが、次に、誰かが私たちのパターンの抜粋をどのように取得するかを説明しましょう。すべての抜粋が要求されると、データは配列として返され（ [Highlight] ）、単一の抜粋を取得する場合は、パラメーターとしてIDを渡す必要があります。

 <code>const typeDefs = gql` type Highlight {  id: ID!  content: String!  title: String  author: String } type Query {  highlights: [Highlight]!  highlight(id: ID!): Highlight } `;</code>

これで、 index.jsファイルで、タイプ定義をインポートして、Apolloサーバーを設定できます。

 <code>const {ApolloServer } = require('apollo-server'); const typeDefs = require('./schema'); const server = new ApolloServer({ typeDefs }); server.listen().then(({ url }) => { console.log(`? Highlights server ready at ${url}`); });</code>

ノードプロセスを実行し続けると、アプリケーションが自動的に更新され、再起動されますが、そうでない場合は、ターミナルウィンドウのプロジェクトのディレクトリからnpm start入力するとサーバーが開始されます。端末を見ると、Nodemonがファイルを監視しており、サーバーがローカルポートで実行されていることがわかります。

 <code>[nodemon] 2.0.2 [nodemon] to restart at any time, enter `rs` [nodemon] watching dir(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node index.js` ? Highlights server ready at http://localhost:4000/</code>

ブラウザでURLにアクセスすると、GraphQL Playgroundアプリケーションが起動します。これにより、APIと対話するためのユーザーインターフェイスが提供されます。

GraphQLパーサー

初期モードとApolloサーバーの設定を使用してプロジェクトを開発しましたが、APIとまだ対話することはできません。これを行うには、パーサーを紹介します。パーサーは、その名前で暗示される正確な操作を実行します。 APIユーザーが要求したデータを解析します。これらのパーサーを最初にスキーマで定義し、次にJavaScriptコードにロジックを実装することにより、これらのパーサーを作成します。 APIには、クエリと突然変異の2種類のパーサーが含まれます。

まず、対話するデータを追加しましょう。アプリケーションでは、これは通常、データベースから取得して書き込むデータですが、この例では、オブジェクトの配列を使用しましょう。 index.jsファイルに以下を追加します。

ハイライトを= [
  {
    ID： '1'、
    コンテンツ：「ある日、私は正しい言葉を見つけるでしょう、そして彼らは簡単になります」、
    タイトル：「ダルマバムズ」、
    著者：「ジャック・ケルアック」
  }、
  {
    ID： '2'、
    コンテンツ：「状況の限界にはユーモアがあり、恵みがあり、他のすべてがあります」、
    タイトル：「任意の愚かな目標」、
    著者： 'Tamara Shopsin'
  }
]

クエリ

クエリは、APIから特定のデータを要求し、目的の形式で表示します。クエリは、APIユーザーが要求したデータを含むオブジェクトを返します。クエリがデータを変更することはありません。データのみにアクセスします。スキーマに2つのクエリを書きました。 1つ目は抜粋の配列を返し、2番目は特定の抜粋を返します。次のステップは、データを返すパーサーを作成することです。

index.jsファイルでは、クエリを含めることができるresolversオブジェクトを追加できます。

 const rezolvers = {
  クエリ：{
    ハイライト：（）=>ハイライト、
    ハイライト：（親、args）=> {
      highlights.find（highlight => highlight.id === args.id）;
    }
  }
};

highlightsクエリは、抜粋データの完全な配列を返します。 highlightクエリは、 parentとargs 2つのパラメーターを受け入れます。 parent 、Apollo ServerのGRAQHQLクエリの最初のパラメーターであり、クエリコンテキストにアクセスする方法を提供します。 argsパラメーターを使用すると、ユーザーが提供するパラメーターにアクセスできます。この場合、APIユーザーは特定の抜粋にアクセスするidパラメーターを提供します。

その後、Apolloサーバーの構成を更新して、リゾルバーを含めることができます。

 const server = new Apolloserver（{typedefs、resolvers}）;

クエリパーサーを記述し、Apolloサーバーを更新した後、GraphQL PlaygroundクエリAPIを使用できるようになりました。 GraphQL Playgroundにアクセスするには、 http://localhost:4000にアクセスしてください。

クエリ形式は次のとおりです。

クエリ{
  queryname {
      分野
      分野
    }
}

これを念頭に置いて、各抜粋のID、コンテンツ、タイトル、および著者を要求するクエリを書くことができます。

クエリ{
  ハイライト{
    id
    コンテンツ
    タイトル
    著者
  }
}

UIに、強調表示されたテキストのタイトルと著者のみをリストするページがあるとします。各抜粋の内容を取得する必要はありません。代わりに、必要なデータのみを要求するクエリを書くことができます。

クエリ{
  ハイライト{
    タイトル
    著者
  }
}

また、クエリにIDパラメーターを含めることにより、個々のコメントを照会するパーサーも書きました。これを行うことができます：

クエリ{
  ハイライト（ID： "1"）{
    コンテンツ
  }
}

突然変異

APIでデータを変更する場合は、突然変異を使用します。抜粋の例では、新しい抜粋、更新された既存の抜粋、および抜粋を削除する3分の1を作成するためのバリアントを書きたいと思うでしょう。クエリと同様に、突然変異は、通常、実行される操作の最終結果であるオブジェクトの形で結果を返す必要があります。

GraphQLの何かを更新する最初のステップは、パターンの作成です。 schema.jsファイルにバリアントタイプを追加することにより、スキーマにバリアントを含めることができます。

タイプ変異{
  NewHighlight（content：string！title：string著者：文字列）：ハイライト！
  updatehighlight（id：id！content：string！）：ハイライト！
  deletehighlight（id：id！）：ハイライト！
}

newHighlightバリアントは、 contentに必要な値とオプションのtitleとauthor値を取得し、 Highlightを返します。 updateHighlightバリアントでは、 highlight idとcontentパラメーター値として渡す必要があり、更新されたHighlightを返します。最後に、 deleteHighlightバリアントはIDパラメーターを受け入れ、削除されたHighlightを返します。

パターンを更新して突然変異を含めると、 index.jsファイルのresolversを更新してこれらの操作を実行できるようになりました。各突然変異はhighlightsデータ配列を更新します。

 const rezolvers = {
  クエリ：{
    ハイライト：（）=>ハイライト、
    ハイライト：（親、args）=> {
      highlights.find（highlight => highlight.id === args.id）;
    }
  }、
  突然変異：{
    NewHighlight ：（親、args）=> {
      const highlight = {
        ID：string（highlights.length 1）、
        タイトル：args.title || ''、
        著者：args.author || ''、
        コンテンツ：Args.Content
      };
      highlights.push（highlight）;
      ハイライトを返します。
    }、
    updatehighlight ：（親、args）=> {
      const index = highlights.findindex（highlight => highlight.id === args.id）;
      const highlight = {
        ID：args.id、
        コンテンツ：Args.Content、
        著者：ハイライト[index] .author、
        タイトル：ハイライト[index] .title
      };
      Highlights [index] = highlight;
      ハイライトを返します。
    }、
    deletehighlight ：（親、args）=> {
      const deletedhighlight = highlights.find（
        highlight => highlight.id === args.id
      ）;
      highlights = highlights.filter（highlight => highlight.id！== args.id）;
      deletedhighlightを返します。
    }
  }
};

これらの変異を書いた後、GraphQLの遊び場を使用して突然変異データを練習できます。突然変異の構造はクエリとほぼ同じであり、突然変異の名前を指定し、パラメーター値を渡し、特定のデータの返品を要求します。最初に新しい抜粋を追加しましょう：

突然変異{
  NewHighlight（著者：「Adam Scott」タイトル：「JS Everywhere」コンテンツ：「GraphQlはAwesome "）{
    id
    著者
    タイトル
    コンテンツ
  }
}

その後、抜粋を更新するために突然変異を書くことができます。

突然変異{
  updatehighlight（id： "3" content： "graphql is rad"）{
    id
    コンテンツ
  }
}

抜粋を削除します：

突然変異{
  deletehighlight（id： "3"）{
    id
  }
}

要約します

おめでとう！これで、Apolloサーバーを使用し、メモリ内データオブジェクトでGraphQLクエリと突然変異を実行できるGraphQL APIを正常に構築しました。 GraphQL API開発の世界を調査するための強固な基盤を築きました。

レベルを改善するための次のステップを次に示します。

• ネストされたGraphQLクエリと突然変異について学びます。
• Apolloフルスタックチュートリアルに従ってください。
• 例を更新して、MongoDBやPostgreSQLなどのデータベースを含めます。
• より優れたCSS-Tricks GraphQL記事を探索してください。
• 新しく取得したGraphQL知識を使用して、Gatsbyを使用して静的Webサイトを構築します。

以上がノードでGraphQL APIの構築を開始しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。