---
schema_version: "1"
id: 8fe20d55fb07d02c96ed5269ee21a3282dcebf8023ace40a304680e073f7b812
title: GraphQL API の実装
collection: mulesoft
version: current
locale: ja-jp
portal_url: https://docs.salesforce.com/mulesoft/current/ja-jp/anypoint-code-builder/tut-graphql-implement-api.md
canonical_url: https://docs.mulesoft.com/jp/anypoint-code-builder/tut-graphql-implement-api
source_site: docs.mulesoft.com
content_type: documentation
content_hash: 16b5a3720b21ac65d064fda846b13fe8af3952f3f50a11666555df74da05f2d5
description: MuleSoft Documentation Site
latest: true
---
# GraphQL API の実装

**進行中のベータリリース**​: **クラウド IDE は進行中のベータリリースです**​。ベータ状態での Anypoint Code Builder の使用には、IDE で入手できる、該当するベータサービス契約条件が適用されます。

Anypoint Exchange に GraphQL API スキーマをパブリッシュします。次に、Anypoint Code Builder を使用して、スキーマを Mule アプリケーションにインポートしてスキャフォールディングします。インターフェースを実行して実装します。

## [](#始める前に)始める前に

次の手順を実行します。

- MuleSoft 環境をセットアップします。 詳細は、[Anypoint Code Builder 入門](https://docs.mulesoft.com/jp/anypoint-code-builder/start-acb)を参照してください。
- [**ブック API**​ GraphQL スキーマ](https://docs.mulesoft.com/jp/anypoint-code-builder/_attachments/books-api.graphql)​をダウンロードします。
    
    または、次のコンテンツが含まれる ​`books-api.graphql`​ という名前のファイルを作成します。
    
    ```graphql
    schema {
      query: Query
    }
    
    type Query {
      bookById(id: ID): Book
      books: [Book]
      bestsellers: Bestsellers
    }
    
    type Book {
      id: ID!
      name: String
      pageCount: Int
      author: Author
    }
    
    type Author {
      id: ID!
      firstName: String
      lastName: String
    }
    
    type Bestsellers {
      books: [Book]
      authors: [Author]
    }
    ```

## [](#graphql-api-を-exchange-にパブリッシュする)GraphQL API を Exchange にパブリッシュする

GraphQL API を実装するには、まず GraphQL API を Exchange に手動でパブリッシュする必要があります。

1. Anypoint Exchange に移動し、サインインします。
    
    手順を表示
    
    - US クラウド (非 EU ホスト): [Exchange (US)](https://anypoint.mulesoft.com/exchange/)
    - EU クラウド (EU ホスト): [Exchange (EU)](https://eu1.anypoint.mulesoft.com/exchange/)
2. **\[Publish new asset (新規アセットをパブリッシュ)\]**​ をクリックします。
3. **\[Name (名前)\]**​ に​`「books-api」`​と入力します。
4. **\[Asset types (アセットタイプ)\]**​ では、​**\[GraphQL API\]**​ を選択します。
5. **\[Method (方法)\]**​ では、​**\[Upload a GraphQL API Schema (GraphQL API スキーマをアップロード)\]**​ を選択します。
    
    ![GraphQL API アセットをパブリッシュするフォーム](/mulesoft/current/ja-jp/anypoint-code-builder/_images/upload-graphql-api-exchange-method-select.png)
6. **\[File upload (ファイルアップロード)\]**​ では、​**\[Choose file (ファイルを選択)\]**​ をクリックして目的の ​`books-api.graphql`​ スキーマファイルを探します。
7. **\[Lifecycle state (ライフサイクル状態)\]**​ では、​**\[Stable (安定)\]**​ を選択します。
8. **\[Publish (パブリッシュ)\]**​ をクリックします。

## [](#graphql-api-スキーマを実装する)GraphQL API スキーマを実装する

Anypoint Code Builder を使用して Anypoint Exchange のスキーマを取得し、デスクトップ IDE またはクラウド IDE から実装できるインターフェースにスキーマをスキャフォールディングします。

1. Anypoint Code Builder を開きます。
2. コマンドパレットを開きます。
    
    手順を表示
    
    - キーボードショートカットを使用する。
        
        - Mac: Cmd+Shift+p
        - Windows: Ctrl+Shift+p
    - デスクトップ IDE で、​**\[View (表示)\]**​ > ​**\[Command Palette (コマンドパレット)\]**​ を選択する。
    - クラウド IDE で、​![](/mulesoft/current/ja-jp/anypoint-code-builder/_images/icon-menu.png)​ (メニュー) アイコンをクリックし、​**\[View (表示)\]**​ > ​**\[Command Palette (コマンドパレット)\]**​ を選択する。
3. 次のコマンドを入力します。
    
    ```command
    MuleSoft: Implement an API Specification
    ```
4. Anypoint Platform にサインインするように求められたら、​**\[Allow (許可)\]**​ をクリックして、プロンプトに従ってサインインします。
5. 次の値を使用してプロジェクトを設定します。
    
    ![新しい API 仕様を実装するフォーム](/mulesoft/current/ja-jp/anypoint-code-builder/_images/implement-api-configure-in-task.png)
    
    1. **Project Name (プロジェクト名)**​: `books-implementation`
    2. **\[Project Location (プロジェクトの場所)\]**​: **\[Browse (参照)\]**​ をクリックしてホームディレクトリを選択します。
    3. Exchange で​`「books」`​と入力して Return キーを押し、​**books-api**​ 仕様を検索して結果を表示します。
    4. 検索結果で ​**books-api**​ の上にマウスポインターを置き、表示される ​**\[Add Asset (アセットを追加)\]**​ ボタンをクリックします。
        
        ![\[Add Asset (アセットを追加)\] ボタンが強調表示されている、使用可能な API 仕様のテーブル](_images/select-books-graphql-api.png)
    5. **Mule Runtime**​ および ​**Java**​ バージョンを入力します。
6. **\[Create Project (プロジェクトを作成)\]**​ をクリックします。
7. 確認を促されたら、API 仕様の作成者を信頼します。
    
    信頼しないと、IDE からプロジェクトの作業を行うことができません。
    
    作成者を信頼すると、Anypoint Code Builder では GraphQL API をスキャフォールディングし、ブック API GraphQL スキーマ内のタイプごとに空のフローでプロジェクトを作成します。
    
    <table class="tableblock frame-all grid-all stretch">
<colgroup>
<col style="width: 50%;">
<col style="width: 50%;">
</colgroup>
<thead>
<tr>
<th class="tableblock halign-left valign-top">GraphQL スキーマ</th>
<th class="tableblock halign-left valign-top">Mule フロー</th>
</tr>
</thead>
<tbody>
<tr>
<td class="tableblock halign-left valign-top"><div class="content"><div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-GraphQL hljs" data-lang="GraphQL">type Query {
  bookById(id: ID): Book
  books: [Book]
  bestsellers: Bestsellers
}

type Book {
  id: ID!
  name: String
  pageCount: Int
  author: Author
}

type Author {
  id: ID!
  firstName: String
  lastName: String
}

type Bestsellers {
  books: [Book]
  authors: [Author]
}</code></pre>
</div>
</div></div></td>
<td class="tableblock halign-left valign-top"><div class="content"><div class="listingblock">
<div class="content">
<pre class="highlightjs highlight"><code class="language-XML hljs" data-lang="XML">&lt;flow name="Query.bookById"/&gt;
&lt;flow name="Query.books"/&gt;
&lt;flow name="Query.bestsellers"/&gt;
&lt;flow name="Book.author"/&gt;
&lt;flow name="Bestsellers.books"/&gt;
&lt;flow name="Bestsellers.authors"/&gt;</code></pre>
</div>
</div></div></td>
</tr>
</tbody>
</table>
    
    各フローには、​`<graphql-router:data-fetcher/>`​、​`<set-payload/>`​、​`<graphql-router:serialize/>`​ 要素の設定が含まれます。 `<graphql-router:data-fetcher>`​ 要素は、フローのトリガーとして機能します。データフェッチャーについての詳細は、[データソースへの GraphQL API のマッピング](https://docs.mulesoft.com/jp/apikit/latest/apikit-graphql-api-mapping)を参照してください。
8. [GraphQL プロジェクトをテストする](https://docs.mulesoft.com/jp/anypoint-code-builder/tut-graphql-test-first-implementation)に進み、Anypoint Code Builder でアプリケーションを実行して、GraphQL クエリをエンドポイントに投稿します。