GraphQLツールキットであるApolloの完全な紹介

JavaScriptの学習に興味がありますか? jshandbook.comで無料の電子ブックを入手

アポロの紹介

過去数年間で、GraphQLはRESTを介してAPIを構築するための代替アプローチとして非常に人気があります。

GraphQLは、サーバーにデータの固定セットを送信させるのではなく、ネットワーク上で送信するデータをクライアントに決定させる優れた方法です。

また、ネストされたリソースを指定できるため、REST APIを扱う際に必要になることがある前後を削減できます。

Apolloは、GraphQLの上に構築されるチームおよびコミュニティであり、プロジェクトの構築に役立つさまざまなツールを提供します。

apolllographql.comの好意によるアポロロゴ

Apolloが提供するツールは主に3つです:クライアント、サーバー、エンジン。

Apollo Clientは、React、Vue、Angular、Ember、Meteorなどの最も一般的なフロントエンドWebテクノロジーをサポートすることで、GraphQL APIの使用を支援します。また、iOSおよびAndroidでのネイティブ開発もサポートしています。

Apolloサーバーは、GraphQLのサーバー部分であり、バックエンドとインターフェイスし、クライアント要求に応答を返します。

Apollo Engineはホストされたインフラストラクチャ(SaaS)であり、クライアントとサーバーの間の仲介者として機能し、キャッシュ、パフォーマンスレポート、負荷測定、エラー追跡、スキーマフィールド使用統計、履歴統計、その他多くの利点を提供します。現在、1か月あたり最大100万件のリクエストが無料であり、Apolloの中で唯一オープンソースではない無料の部分です。プロジェクトのオープンソース部分に資金を提供します。

これらの3つのツールは何らかの方法でリンクされていないことに注意してください。たとえば、Apolloクライアントを使用して第3部のAPIとやり取りしたり、クライアントがまったくなくてもApolloサーバーを使用してAPIを提供したりできます。

Apolloを使用する利点

すべてGraphQL標準仕様と互換性があるため、Apolloには独自の技術や互換性のない技術はありません。

ただし、GraphQL関連のすべてのニーズに対応する完全なスイートとして、これらのツールをすべて1つの屋根の下にまとめると非常に便利です。

Apolloは使いやすく、貢献しやすいよう努めています。

Apollo ClientとApollo Serverはすべて、コミュニティのためにコミュニティによって構築されたコミュニティプロジェクトです。 Apolloは、非常に人気のあるJavaScriptフレームワークであるMeteor Development Group(Meteorの背後にある会社)によって支援されています。

アポロは物事をシンプルに保つことに焦点を当てています。これは、人気を博したい技術の成功の鍵です。そこにある技術やフレームワーク、ライブラリの多くは、中小企業の99%にとって過剰である可能性があり、非常に複雑なニーズを持つ大企業に本当に適しています。

アポロクライアント

Apollo Clientは、GraphQLの主要なJavaScriptクライアントです。コミュニティ主導型であるため、GraphQLデータと連動するUIコンポーネントを構築できるように設計されています。そのデータを表示したり、特定のアクションが発生したときに突然変異を実行したりします。

Apollo Clientを使用するためにアプリケーションのすべてを変更する必要はありません。 1つの小さなレイヤーと1つのリクエストで開始し、そこから展開できます。

何よりも、Apollo Clientは、シンプルで小さく、柔軟に一から構築されています。

この投稿では、Reactアプリケーション内でApolloクライアントを使用するプロセスの詳細を説明します。

GitHub GraphQL APIをサーバーとして使用します。

Reactアプリを開始する

create-react-appを使用してReactアプリをセットアップします。これは非常に便利で、必要なものの骨を追加するだけです。

npx create-react-app myapp
npxは、最新のnpmバージョンで使用可能なコマンドです。このコマンドがない場合は、npmを更新します。

アプリのローカルサーバーを起動します

糸開始

src / index.jsを開きます。

ReactからReactをインポート
ReactDOMを「react-dom」からインポートする
インポート './index.css'
「./App」からアプリをインポート
「./registerServiceWorker」からregisterServiceWorkerをインポートします

ReactDOM.render(、document.getElementById( 'root'))
registerServiceWorker()

このコンテンツをすべて削除します。

Apollo Boostを始めよう

Apollo Boostは、新しいプロジェクトでApolloクライアントの使用を開始する最も簡単な方法です。 react-apolloとgraphqlに加えてインストールします。

コンソールで、実行します

糸追加アポロブースト反応アポログラフql

またはnpmを使用:

npm install apollo-boost react-apollo graphql --save

ApolloClientオブジェクトを作成する

index.jsのapollo-clientからApolloClientをインポートすることから始めます。

「apollo-client」から{ApolloClient}をインポートします

const client = new ApolloClient()

デフォルトでは、Apolloクライアントは現在のホストで/ graphqlエンドポイントを使用するため、GraphQLエンドポイントURIを設定して、Apolloリンクを使用してGraphQLサーバーへの接続の詳細を指定します。

アポロリンクス

Apollo LinkはHttpLinkオブジェクトで表され、apollo-link-httpからインポートします。

Apollo Linkは、GraphQL操作の結果を取得する方法と、応答をどうするかを記述する方法を提供します。

つまり、複数のApollo Linkインスタンスを作成し、それらはすべてGraphQLリクエストに次々に作用し、最終的な結果を提供します。一部のリンクでは、成功しなかった場合にリクエストを再試行するオプション、バッチ処理などを提供できます。

GitHub GraphQLエンドポイントURI https://api.github.com/graphqlを使用するために、ApolloリンクをApolloクライアントインスタンスに追加します。

「apollo-client」から{ApolloClient}をインポートします
'apollo-link-http'から{HttpLink}をインポートします

const client = new ApolloClient({
  リンク:新しいHttpLink({uri: 'https://api.github.com/graphql'})
})

キャッシング

まだ終わっていません。実際の例を使用する前に、使用するキャッシュ戦略をApolloClientに指示する必要があります。InMemoryCacheはデフォルトであり、開始に適したものです。

「apollo-client」から{ApolloClient}をインポートします
'apollo-link-http'から{HttpLink}をインポートします
'apollo-cache-inmemory'から{InMemoryCache}をインポートします

const client = new ApolloClient({
  リンク:新しいHttpLink({uri: 'https://api.github.com/graphql'})、
  キャッシュ:新しいInMemoryCache()
})

ApolloProviderを使用する

次に、Apolloクライアントをコンポーネントツリーに接続する必要があります。メインのReactファイルにアプリケーションコンポーネントをラップすることにより、ApolloProviderを使用します。

ReactからReactをインポート
ReactDOMを「react-dom」からインポートする
「apollo-client」から{ApolloClient}をインポートします
'apollo-link-http'から{HttpLink}をインポートします
'apollo-cache-inmemory'から{InMemoryCache}をインポートします
「react-apollo」から{ApolloProvider}をインポートします

「./App」からアプリをインポート

const client = new ApolloClient({
  リンク:新しいHttpLink({uri: 'https://api.github.com/graphql'})、
  キャッシュ:新しいInMemoryCache()
})

ReactDOM.render(
  
    <アプリ/>
  、
  document.getElementById( 'root')
)

これは、Apolloクライアントが初期化された状態で、デフォルトのcreate-react-app画面をレンダリングするのに十分です:

gqlテンプレートタグ

これで、Apollo Clientで何かを行う準備ができました。GitHubAPIからデータを取得してレンダリングします。

そのためには、gqlテンプレートタグをインポートする必要があります。

「graphql-tag」からgqlをインポート

GraphQLクエリは、次のように、このテンプレートタグを使用して構築されます。

constクエリ= gql`
  クエリ{
    ...
  }
`

GraphQLリクエストを実行する

gqlは、ツールセットで必要な最後のアイテムでした。

これで、Apollo Clientで何かを行う準備ができました。GitHubAPIからデータを取得してレンダリングします。

APIのアクセストークンを取得する

最初に行うことは、GitHubから個人アクセストークンを取得することです。

GitHubは、必要なアクセス許可を選択するためのインターフェイスを提供することにより、それを簡単にします。

このチュートリアルの例では、これらのアクセス許可は必要ありません。これらはプライベートユーザーデータへのアクセスを目的としていますが、パブリックリポジトリデータのみをクエリします。

取得するトークンは、OAuth 2.0 Bearerトークンです。

コマンドラインから実行することで簡単にテストできます:

$ curl -H "承認:持参人*** _ YOUR_TOKEN_HERE _ ***" -X POST -d "\
 {\
   \ "query \":\ "query {viewer {login}} \" \
 } \
"https://api.github.com/graphql

結果が得られるはずです

{"data":{"viewer":{"login": "*** _ YOUR_LOGIN_NAME _ ***"}}}

または

{
  「メッセージ」:「不正な資格情報」、
  「documentation_url」:「https://developer.github.com/v4」
}

何かがうまくいかなかった場合。

Apolloリンクを使用して認証する

したがって、上記のcurlリクエストで行ったように、GraphQLリクエストとともにAuthorizationヘッダーを送信する必要があります。

Apollo Linkミドルウェアを作成することにより、Apollo Clientでこれを行うことができます。 apollo-link-contextのインストールから始めます。

npm install apollo-link-context

このパッケージを使用すると、リクエストのコンテキストを設定して認証メカニズムを追加できます。

この方法でsetContext関数を参照することにより、このコードで使用できます。

const authLink = setContext((_、{headers})=> {
  constトークン= '*** YOUR_TOKEN **'

  return {
    ヘッダー:{
      ...ヘッダー、
      承認:「ベアラー$ {token}」
    }
  }
})

この新しいApollo Linkを作成したら、リンクでconcat()メソッドを使用して、すでに持っているHttpLinkで作成できます。

const link = authLink.concat(httpLink)

src / index.jsファイルの完全なコードと現在のコードを次に示します。

ReactからReactをインポート
ReactDOMを「react-dom」からインポートする
「apollo-client」から{ApolloClient}をインポートします
'apollo-link-http'から{HttpLink}をインポートします
'apollo-cache-inmemory'から{InMemoryCache}をインポートします
「react-apollo」から{ApolloProvider}をインポートします
'apollo-link-context'から{setContext}をインポートします
「graphql-tag」からgqlをインポート

「./App」からアプリをインポート

const httpLink = new HttpLink({uri: 'https://api.github.com/graphql'})

const authLink = setContext((_、{headers})=> {
  constトークン= '*** YOUR_TOKEN **'

  return {
    ヘッダー:{
      ...ヘッダー、
      承認:「ベアラー$ {token}」
    }
  }
})

const link = authLink.concat(httpLink)

const client = new ApolloClient({
  リンク:リンク、
  キャッシュ:新しいInMemoryCache()
})

ReactDOM.render(
  
    <アプリ/>
  、
  document.getElementById( 'root')
)
警告このコードは教育目的の例です。 GitHub GraphQL APIを公開して、世界中のフロントエンド向けコードで確認できるようにします。実動コードでは、このトークンを非公開にする必要があります。

これで、このファイルの下部で最初のGraphQLリクエストを作成できます。このサンプルクエリでは、5万個以上のスターを持つ10の最も人気のあるリポジトリの名前と所有者を要求します。

const POPULAR_REPOSITORIES_LIST = gql`
{
  search(query: "stars:> 50000"、タイプ:REPOSITORY、最初:10){
    repositoryCount
    エッジ{
      ノード{
        ...リポジトリ{
          名前
          所有者{
            ログインする
          }
          stargazers {
            総数
          }
        }
      }
    }
  }
}
`

client.query({query:POPULAR_REPOSITORIES_LIST})。then(console.log)

このコードを正常に実行すると、ブラウザーコンソールにクエリの結果が返されます。

コンポーネントでGraphQLクエリ結果セットをレンダリングする

これまで見てきたことは、すでにクールです。さらに優れているのは、GraphQL結果セットを使用してコンポーネントをレンダリングすることです。

Apolloクライアントに負担(または喜び)を持たせるか、データを取得してすべての低レベルのものを処理します。これにより、react-apolloが提供するgraphqlコンポーネントエンハンサーを使用して、データの表示に集中できます。

ReactからReactをインポート
「react-apollo」から{graphql}をインポート
「apollo-boost」から{gql}をインポート

const POPULAR_REPOSITORIES_LIST = gql`
{
  search(query: "stars:> 50000"、タイプ:REPOSITORY、最初:10){
    repositoryCount
    エッジ{
      ノード{
        ...リポジトリ{
          名前
          所有者{
            ログインする
          }
          stargazers {
            総数
          }
        }
      }
    }
  }
}
`

const App = graphql(POPULAR_REPOSITORIES_LIST)(props =>
  
        {props.data.loading? '':props.data.search.edges.map((row、i)=>       
  •         {row.node.owner.login} / {row.node.name}:{''}                    {row.node.stargazers.totalCount}                     )}    ) デフォルトのアプリをエクスポート

以下は、コンポーネントでレンダリングされたクエリの結果です

Apolloサーバー

GraphQLサーバーには、エンドポイントで着信リクエストを受け入れ、リクエストを解釈し、クライアントのニーズを満たすために必要なデータを検索するジョブがあります。

可能なすべての言語には、さまざまなGraphQLサーバー実装が多数あります。

Apolloサーバーは、特にNode.jsプラットフォーム向けのJavaScript用のGraphQLサーバー実装です。

以下を含む多くの一般的なNode.jsフレームワークをサポートします。

  • エクスプレス
  • ハピ
  • コア
  • 改めて

Apolloサーバーは基本的に3つのことを提供します:

  • データをスキーマで記述する方法。
  • リゾルバのフレームワーク。リクエストを実行するために必要なデータを取得するために記述する関数です。
  • APIの認証の処理を容易にします。

Apolloサーバーの基本を学習するために、サポートされているNode.jsフレームワークは使用しません。代わりに、Apolloチームによって構築されたものを使用します。これは、学習の基盤となる本当に素晴らしいものです:Launchpad。

発射台

Launchpadは、製品のApollo傘の一部であるプロジェクトであり、JSPiddleのCodepenでコードのスニペットを実行するのと同じように、クラウド上でコードを記述し、Apolloサーバーをオンラインで作成できる非常に素晴らしいツールです。またはJSBin。

そこに隔離されるビジュアルツールを構築する代わりに、単なるショーケースまたは学習ツールとして使用することを除き、LaunchpadでGraphQL APIを作成します。一般公開されます。

Launchpad上のすべてのプロジェクトはpadと呼ばれ、GraphQLエンドポイントURLがあります:

https://1jzxrj129.lp.gql.zone/graphql

パッドを作成すると、Launchpadはそれを実行しているNode.jsアプリの完全なコードをダウンロードするオプションを提供します。npminstallとnpm startを実行するだけで、Apollo GraphQL Serverのローカルコピーを取得できます。

要約すると、学習、共有、プロトタイプ作成に最適なツールです。

ApolloサーバーHello World

新しいLaunchpadパッドを作成するたびに、Hello、World!が表示されます。 Apolloサーバーの。それに飛び込みましょう。

まず、graphql-toolsからmakeExecutableSchema関数をインポートします。

「graphql-tools」から{makeExecutableSchema}をインポート

この関数は、スキーマ定義(GraphQLスキーマ言語で記述された)とリゾルバのセットを提供することにより、GraphQLSchemaオブジェクトを作成するために使用されます。

スキーマ定義は、クエリの説明と各フィールドに関連付けられたタイプを含むテンプレートリテラル文字列です。

const typeDefs = `
  タイプQuery {
    こんにちは:文字列
  }
`

リゾルバは、スキーマ内のフィールドをリゾルバ関数にマップするオブジェクトです。データを検索してクエリに応答することができます。

これは、helloフィールドのリゾルバー関数を含む単純なリゾルバーです。これは、単にHello world!を返します。文字列:

const resolvers = {
  クエリ:{
    こんにちは:(ルート、引数、コンテキスト)=> {
      「Hello world!」を返す
    }
  }
}

これらの2つの要素、スキーマ定義とリゾルバーが与えられると、先ほどインポートしたmakeExecutableSchema関数を使用してGraphQLSchemaオブジェクトを取得し、それをスキーマconstに割り当てます。

export const schema = makeExecutableSchema({typeDefs、resolvers})

シンプルな読み取り専用APIを提供するために必要なのはこれだけです。 Launchpadは細部を処理します。

Hello Worldの簡単な例の完全なコードを次に示します。

「graphql-tools」から{makeExecutableSchema}をインポート

const typeDefs = `
  タイプQuery {
    こんにちは:文字列
  }
`

const resolvers = {
  クエリ:{
    こんにちは:(ルート、引数、コンテキスト)=> {
      「Hello world!」を返す
    }
  }
}

export const schema = makeExecutableSchema({
  typeDefs、
  レゾルバ
})

Launchpadは、APIを使用するための優れた組み込みツールを提供します。

また、前述したように、APIは一般公開されているため、ログインしてパッドを保存するだけです。

https://kqwwkp0pr7.lp.gql.zone/graphqlにエンドポイントを公開するパッドを作成したので、コマンドラインからcurlを使用して試してみましょう。

$カール\
  -X POST \
  -H "Content-Type:application / json" \
  --data '{"クエリ": "{hello}"}' \
  https://kqwwkp0pr7.lp.gql.zone/graphql

これにより、期待どおりの結果が得られます。

{
  「データ」:{
    「hello」:「Hello world!」
  }
}

GraphQLサーバーをローカルで実行する

Launchpadで作成したものはすべてダウンロード可能であると述べたので、続けましょう。

パッケージは2つのファイルで構成されています。 1つ目は、schema.jsです。

2つ目のserver.jsは、Launchpadには表示されません。これが、人気のあるNode.jsフレームワークであるExpressを使用して、基礎となるApollo Server機能を提供します。

これはApolloサーバーのセットアップの最も単純な例ではないため、説明のために、より単純な例に置き換えます(ただし、基本を理解した後は、自由に検討してください)。

最初のApolloサーバーコード

最初に、ダウンロードしたLaunchpadコードでnpm installとnpm startを実行します。

以前に初期化したノードサーバーは、ファイルが変更されるとnodemonを使用してサーバーを再起動するため、コードを変更すると、変更が適用された状態でサーバーが再起動されます。

server.jsに次のコードを追加します。

const express = require( 'express')
const bodyParser = require( 'body-parser')
const {graphqlExpress} = require( 'apollo-server-express')
const {スキーマ} = require( './ schema')

const server = express()

server.use( '/ graphql'、bodyParser.json()、graphqlExpress({schema}))

server.listen(3000、()=> {
  console.log( 'http:// localhost:3000 / graphqlでリッスンしているGraphQL')
})

11行しかないため、Launchpadでセットアップされたサーバーよりもはるかに簡単です。必要に応じてコードの柔軟性を高めるものをすべて削除したためです。

コーディングにより、あなたは厳しい決定を下さざるを得ません。今、どれだけの柔軟性が必要ですか?クリーンで理解しやすいコードを用意して、今から6か月後に簡単に調整したり、他の開発者やチームメンバーに渡して必要な時間で生産性を高めたりすることはどれほど重要ですか?

コードの機能は次のとおりです。

まず、使用するいくつかのライブラリをインポートします。

  • 基になるネットワーク機能を強化してエンドポイントを公開することを表現する
  • bodyParserは、ノード本体の解析ミドルウェアです。
  • graphqlExpressは、ExpressのApolloサーバーオブジェクトです。
const express = require( 'express')
const bodyParser = require( 'body-parser')
const {graphqlExpress} = require( 'apollo-server-express')

次に、上記のschema.jsファイルで作成したGraphQLSchemaオブジェクトをSchemaとしてインポートします。

const {スキーマ} = require( './ schema')

ここにいくつかの標準のExpressセットがあり、ポート3000でサーバーを初期化するだけです。

const server = express()

これで、Apolloサーバーを初期化する準備ができました。

graphqlExpress({スキーマ})

そして、それをエンドポイントへのコールバックとしてHTTP JSONリクエストに渡します:

server.use( '/ graphql'、bodyParser.json()、graphqlExpress({schema}))

今必要なのは、Expressを起動することだけです。

server.listen(3000、()=> {
  console.log( 'http:// localhost:3000 / graphqlでリッスンしているGraphQL')
})

GraphiQLエンドポイントを追加する

GraphiQLを使用する場合、GraphiQLインタラクティブなブラウザー内IDEで使用するために、/ graphiqlエンドポイントを簡単に追加できます。

server.use( '/ graphiql'、graphiqlExpress({
  エンドポイントURL: '/ graphql'、
  クエリ: ``
}))

次に、Expressサーバーを起動するだけです。

server.listen(PORT、()=> {
  console.log( 'http:// localhost:3000 / graphqlでリッスンしているGraphQL')
  console.log( 'http:// localhost:3000 / graphiqlでリッスンしているGraphiQL')
})

もう一度curlを使用してテストできます。

$カール\
  -X POST \
  -H "Content-Type:application / json" \
  --data '{"クエリ": "{hello}"}' \
  http:// localhost:3000 / graphql

これにより、Launchpadサーバーを呼び出した上記と同じ結果が得られます。

{
  「データ」:{
    「hello」:「Hello world!」
  }
}
JavaScriptの学習に興味がありますか? jshandbook.comで無料の電子ブックを入手