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

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

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

graphqlとは何ですか？

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

私たちは何を構(gòu)築していますか

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

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

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

始める

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

 <code># 創(chuàng)建新目錄mkdir highlights-api # 進(jìn)入目錄cd highlights-api # 初始化新的節(jié)點(diǎn)項(xiàng)目npm init -y # 安裝項(xiàng)目依賴項(xiàng)npm install apollo-server graphql # 安裝開發(fā)依賴項(xiàng)npm install nodemon --save-dev</code>

先に進(jìn)む前に、依存関係を分解しましょう。

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

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

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

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

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

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

GraphQLスキーマタイプ

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

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

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

 <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>

抜粋のオブジェクトタイプを定義しましたが、クライアントがそのデータをどのように取得するかを説明する必要もあります。これはクエリと呼ばれます。後でクエリに飛び込みますが、次に、誰(shuí)かが私たちのパターンの抜粋をどのように取得するかを説明しましょう。すべての抜粋が要求されると、データは配列として返され（ [Highlight] ）、単一の抜粋を取得する場(chǎng)合は、パラメーターとして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サーバーを設(shè)定できます。

 <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>

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

 <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アプリケーションが起動(dòng)します。これにより、APIと対話するためのユーザーインターフェイスが提供されます。

GraphQLパーサー

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

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

ハイライトを= [
  {
    ID： '1'、
    コンテンツ：「ある日、私は正しい言葉を見(jiàn)つけるでしょう、そして彼らは簡(jiǎn)単になります」、
    タイトル：「ダルマバムズ」、
    著者：「ジャック?ケルアック」
  }、
  {
    ID： '2'、
    コンテンツ：「狀況の限界にはユーモアがあり、恵みがあり、他のすべてがあります」、
    タイトル：「任意の愚かな目標(biāo)」、
    著者： '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パラメーターを使用すると、ユーザーが提供するパラメーターにアクセスできます。この場(chǎng)合、APIユーザーは特定の抜粋にアクセスするidパラメーターを提供します。

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

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

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

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

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

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

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

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

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

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

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

突然変異

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

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を更新してこれらの操作を?qū)g行できるようになりました。各突然変異は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の遊び場(chǎng)を使用して突然変異データを練習(xí)できます。突然変異の構(gòu)造はクエリとほぼ同じであり、突然変異の名前を指定し、パラメーター値を渡し、特定のデータの返品を要求します。最初に新しい抜粋を追加しましょう：

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

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

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

抜粋を削除します：

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

要約します

おめでとう！これで、Apolloサーバーを使用し、メモリ內(nèi)データオブジェクトでGraphQLクエリと突然変異を?qū)g行できるGraphQL APIを正常に構(gòu)築しました。 GraphQL API開発の世界を調(diào)査するための強(qiáng)固な基盤を築きました。

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

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

以上がノードでGraphQL APIの構(gòu)築を開始しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。