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

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

エディターに移動するには、Fabric のワークスペースから Api for GraphQL 項目を開き、ポータル画面の左下隅にある [クエリ ] を選択します。

[ クエリ ] タブで 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または.venv\Scripts\activateを実行して、source .venv/bin/activateをアクティブにします。

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 スキーマを確認します。 単一の Post 型を定義し、1 つの投稿を読み取るか、すべての投稿を一覧表示するクエリと、すべての CRUDL (作成、読み取り、更新、削除、リスト) のユース ケースをサポートする、投稿を作成、更新、または削除するための変更を定義します。

{
  type Post {
    id: ID!
    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