GraphQL エディター用のファブリック API

GraphQL 用の Fabric API は、グラフィカルなブラウザー内 GraphQL 開発環境を提供します。これにより、対話型のプレイグラウンドで GraphQL クエリと変更のライブ結果を作成、テスト、および表示できます。

エディターに移動するには、Fabric で GraphQL 用 API 項目を開き、ポータル画面の左下隅にある [クエリ] を選択します。

graphQL クエリは、[クエリ] タブ上で直接入力して実行できます。IntelliSense 機能は次のキーボード ショートカットで使用できます: Ctrl + Space キー (Windows)、または Command + Space キー(macOS)。 [実行] を選択してクエリを実行し、データ ソースから適宜データを取得します。

コードを生成する

目的の GraphQL 操作をテストしてプロトタイプを作成したら、API エディターでは、このエディター内で実行されたクエリまたは変更に基づいて定型的な Python または Node.js コードを生成できます。 生成されたコードをテスト目的でローカルで実行し、その一部をアプリケーション開発プロセスで再利用できます。

重要

生成されたコードは、対話型のブラウザー資格情報を使用するため、テスト目的での使用に限定する必要があります。 運用環境では、常に Microsoft Entra にアプリケーションを登録し、適切な client_id とスコープを使用します。 サンプル コードを含むエンドツーエンドの例は、「アプリケーションの接続」にあります。

まず、クエリを実行し、[コードの生成] ボタンを選択し、適宜、言語を選択します。

生成されたコードは、コピーし、ローカル フォルダーにファイルとして保存できます。 選択した言語に応じて、シンプルな手順に従ってローカルでテストします。

Python

1. コマンド python -m venv .venv を使用して仮想環境を作成します
2. .venv\Scripts\activate または source .venv/bin/activate を使用して venv をアクティブにします。
3. コマンド pip install azure.identity を使用して必要な依存関係をインストールします
4. python <filename.py> を使用してコードを実行します

Node.JS

1. 保存したファイルと同じフォルダー内に、次の内容を含む package.json ファイルを作成します。

{
  "type": "module",
  "dependencies": { 
  }
}

2. 選択したパッケージ マネージャーで、npm install --save @azure/identity またはこれと同様のコマンドを実行して、ID ライブラリの最新バージョンをインストールします。
3. node <filename>.js を使用してコードを実行します

クエリと変更の開発

次の短い GraphQL スキーマを確認します。このスキーマでは、1 つの投稿を読み取るか、すべての投稿を一覧表示するクエリを含む 1 つの Post 型を定義します。 また、すべての CRUDL (作成、読み取り、更新、削除、リスト) のユース ケースをサポートする投稿を作成、更新、または削除するための変更も定義します。

type Post {
  id: ID!
  title: String!
  content: String!
  author: String!
  published: Boolean
}

type Query {
  getPost(id: ID!): Post
  getAllPosts: [Post]
}

type Mutation {
  createPost(title: String!, content: String!, author: String!): Post
  updatePost(id: ID!, title: String, content: String, author: String, published: Boolean): Post
  deletePost(id: ID!): Boolean
}

スキーマで定義されている任意のクエリを使用して、GraphQL で公開されているデータを読み取ることができます。 getPost クエリは、次の例のようになります。

query MyQuery {
  getPost(id: "1234") {
    title
    content
    author
  }
}

応答:

{
  "data": {
    "getPost": {
      "title": "First Post",
      "content": "This is my first post.",
      "author": "Jane Doe"
    }
  }
}

必要なパラメーターを使用して投稿を作成する createPost などの変更を使用してデータを書き込みます。

mutation MyMutation {
  createPost(title: "Second post", content: "This is my second post", author: "Jane Doe", published: false) {
    id
    title
    content
    author
  }
}

応答:

{
  "data": {
    "createPost": {
      "id": "5678",
      "title": "Second Post",
      "content": "This is my second post.",
      "author": "Jane Doe"
    }
  }
}

クエリ変数

クエリまたは変更に変数としてパラメーターを渡すには、[クエリ] タブの右側にある [クエリ変数] ウィンドウを使用します。 変数は、他のプログラミング言語の変数と同じように機能します。 各変数は、その変数に格納されている値にアクセスするために使用される名前で宣言する必要があります。 前の変更の例では、クエリ変数を使用するように少し変更できます。

mutation MyMutation ($title: String!, $content: String!, $author: String!){
  createPost(title: $title, content: $content, author: $author) {
    id
    title
    content
    author
  }
}

次の例のように、ウィンドウで変数を定義します。

    {
      "id": "5678",
      "title": "Second Post",
      "content": "This is my second post.",
      "author": "Jane Doe"
    }

変数を使用すると、変更コードがクリーンになり、パラメーターの読み取り、テスト、変更が簡単になります。

関連するコンテンツ

• その他のクエリと変更の例
• GraphQL スキーマ ビューとスキーマ エクスプローラー用の Fabric API