Visual Studio Code で GraphQL アプリケーションを開発する

Microsoft Fabric でホストされている GraphQL API と統合する React、Apollo Client、TypeScript を使用してフロントエンドアプリケーションを構築する方法について説明します。このチュートリアルでは、最適な開発者エクスペリエンスを実現するために、オートコンプリート、コード生成、IntelliSense などのローカル開発ツールの設定について説明します。

VS Code 開発ツールを使用するユーザー

VS Code を使用したローカル開発は、次の目的で設計されています。

GraphQL を使用して Fabric Lakehouse と Warehouse のデータを使用する Web アプリケーションを構築する React 開発者
Fabric GraphQL API のタイプセーフなクライアントコード生成を必要とする TypeScript 開発者
ローカル IDE サポートを使用して Fabric プラットフォーム上にカスタム分析アプリケーションを構築するフルスタック開発者
IntelliSense を使用した最新のツールと Fabric データアクセスアプリケーションのデバッグを必要とする開発チーム

このアプローチは、TypeScript と Apollo Client を使用して、豊富な IDE サポート、コード生成、ローカルデバッグ機能を必要とする React アプリケーションを構築する場合に使用します。

[前提条件]

開始する前に、次のことを確認します。

Microsoft Fabric ワークスペースアクセス: GraphQL API 項目を作成および変更するために、少なくとも 共同作成者 ロール (管理者、メンバー) を持つ Fabric ワークスペースのメンバーになる
データソースのアクセス許可: GraphQL API を介して公開する予定のデータソースに対する読み取り/書き込みアクセス許可
開発用コンピューターにインストールされている Node.js (npm を含む)
開発用コンピューターにインストールされている Visual Studio Code
React、TypeScript、GraphQL の概念に関する基本的な知識

手順 1: Microsoft Fabric で GraphQL API を作成する

注

このガイドでは、SQL データベースコンテキストから GraphQL API を作成する方法について説明します。まず SQL データベースを作成し、そのデータベース内から直接 GraphQL API を作成します。既に GraphQL API があり、それに接続する場合は、最初に API を作成してから SQL データベースまたはその他のデータソースに接続する作業の開始ガイドに従ってください。

SQL データベースを作成する

GraphQL API のサンプルデータを含む SQL データベースを作成するには:

Fabric ワークスペースで、[ 新しい項目] を選択します。
SQL データベース (プレビュー) を選択します。
データベースの名前を指定します。
[ サンプルデータ ] を選択すると、テーブルが自動的に作成され、サンプルデータが設定されます。これにより、SalesLT.Customer、SalesLT.Product、SalesLT.SalesOrderHeader などのテーブルを含む、SalesLT スキーマを使用して AdventureWorksLT サンプルデータベースが作成されます。

ヒント

前のチュートリアルまたは GraphQL API の作成のサンプルデータを含む SQL データベースが既にある場合は、同じデータベースを再利用できます。 1 つのデータベースで複数の GraphQL API をサポートできるため、SalesLT スキーマを持つデータベースが既にある場合は、新しいデータベースを作成する必要はありません。

GraphQL API を作成する

サンプルデータを含む SQL データベースが作成されたので、GraphQL API を作成します。

SQL データベースで、リボンから GraphQL 用の新しい API を選択します。

$SQL Database リボンの [New API for GraphQL]$GraphQL 用の新しい API$ オプションのスクリーンショット。$
API の名前を指定します。
データベースからすべての SalesLT テーブルを選択します。
[ 読み込み] を選択して API を生成します。

これで GraphQL API の準備が整い、Fabric ワークスペースで使用できるようになりました。

手順 2: 開発環境を設定する

このチュートリアルに従うには、次の手順を実行して React スターターアプリケーションをセットアップし、必要な依存関係をインストールし、GraphQL サポートを使用して Visual Studio Code を構成します。

スターターアプリケーションを複製する - Microsoft Fabric サンプルリポジトリから React スターターアプリケーションを取得します。
```
git clone https://github.com/microsoft/fabric-samples.git
cd fabric-samples/docs-samples/data-engineering/GraphQL/React-Apollo-TS
```
依存関係のインストール - GraphQL 開発、オートコンプリート、およびコード生成に必要なパッケージをインストールします。
```
npm install
```
必要な Visual Studio Code 拡張機能をインストール する - GraphQL: 言語機能サポート拡張機能を Visual Studio Code にインストールして、GraphQL 操作の構文の強調表示、検証、および IntelliSense を有効にします。

手順 3: GraphQL スキーマを構成する

GraphQL スキーマは、API の構造 (使用可能なデータ、実行できる操作、さまざまなデータ型間のリレーションシップ) を定義します。開発ツールでは、このスキーマを使用して IntelliSense、コード補完、型の生成が提供されるため、正しい GraphQL クエリと変更を簡単に記述できます。

GraphQL スキーマは、次の 2 つの方法で取得できます。

オプション 1: スキーマを静的ファイルとしてエクスポートする

Fabric GraphQL API で、リボンから [スキーマのエクスポート ] を選択します。
ダウンロードしたファイル名には、GraphQL API の ID ( GraphQL_your-api-id_schema.graphql など) が含まれます。プロジェクトルートディレクトリに保存し、名前を schema.graphql に変更します。これは、次の構成手順で使用するファイル名です。

オプション 2: リモートエンドポイントを使用する

Fabric Portal で作成した GraphQL API にアクセスします。
Get-PowerBIAccessToken で PowerShell を使用して承認トークンを取得する

注

リモートエンドポイントオプションは常に最も up-to-date スキーマを提供しますが、取得されたトークンは一時的であり、1 時間ごとに期限切れになります。これらは、可能な限り静的ファイルを使用してトークンの有効期限の問題を回避するために、テストと開発の目的でのみ使用する必要があります。

手順 4: IntelliSense とオートコンプリートを構成する

次に、手順 3 のスキーマを使用して IntelliSense を設定します。スキーマファイル (静的またはリモートエンドポイント) を使用すると、GraphQL クエリを記述するときに、VS Code でリアルタイムのコード候補、エラー検出、フィールド検証を提供できます。

プロジェクトルートに構成ファイルを作成します。

静的スキーマファイルの使用

スキーマを静的ファイルとしてエクスポートした場合は、次の構成を使用します。

.graphqlrc.ymlを作成します。

schema: './schema.graphql'
documents: 'src/**/*.{ts,tsx,graphql,gql}'

リモートエンドポイントの使用

GraphQL API エンドポイントからスキーマを直接フェッチする場合は、次の構成を使用します。

graphql.config.ymlを作成します。

schema:
  - https://your-graphql-endpoint.com/graphql:
      headers:
        Authorization: Bearer YOUR_ACCESS_TOKEN
documents: src/**/*.{ts,tsx,graphql,gql}

構成オプション

schema: GraphQL スキーマの場所を指定します
documents: IntelliSense でサポートする必要があるファイルを定義します

構成ファイルを作成したら、Visual Studio Code を再起動して変更を確実に有効にします。

手順 5: コード生成を設定する

GraphQL コード生成では、スキーマと操作から厳密に型指定された TypeScript インターフェイスと React フックが自動的に作成され、エラーが削減され、開発効率が向上します。主な目的は、特に TypeScript のような厳密に型指定された言語を使用する場合に、GraphQL プロジェクトでの型の安全性を強化し、開発を効率化することです。

codegen 構成を作成する

静的ファイルのオプション

スキーマを静的ファイルとしてエクスポートした場合は、プロジェクトルートにcodegen.ymlを作成します。

schema: './schema.graphql'
documents: './src/**/*.graphql'
generates:
  src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHooks: true

リモートエンドポイントオプション

リモートエンドポイントアプローチを使用している場合は、プロジェクトルートにcodegen.ymlを作成します。

schema:
  - https://your-graphql-endpoint.com/graphql:
      headers:
        Authorization: Bearer YOUR_ACCESS_TOKEN
documents: 'src/**/*.{ts,tsx,graphql,gql}'
generates:
  src/generated/graphql.tsx:
    plugins:
      - typescript
      - typescript-operations
      - typescript-react-apollo
    config:
      withHooks: true

構成の内訳

schema: スキーマファイルまたはリモートエンドポイントへのパス
documents: GraphQL 操作ファイルを検索するための Glob パターン
generates: 生成されたコードの出力ファイルを指定します
plugins: 生成するコードを決定します (TypeScript 型と React Apollo フック)

codegen スクリプトを追加する

コード生成スクリプトをプロジェクトディレクトリの package.json ファイルに追加します (このファイルは、手順 2 でリポジトリを複製したときに含まれています)。

{
  "scripts": {
    "codegen": "graphql-codegen --config codegen.yml"
  }
}

手順 6: GraphQL 操作を記述する

.graphql ディレクトリにsrc/operations ファイルを作成して、クエリと変更を定義します。 IntelliSense では、オートコンプリートと検証が提供されます。

クエリの例

src/operations/queries.graphqlを作成し、次のクエリを入力します。

顧客データを取得するサンプルクエリを次に示します。

query GET_CUSTOMERS(
  $after: String
  $first: Int
  $filter: CustomerFilterInput
  $orderBy: CustomerOrderByInput
) {
  customers(after: $after, first: $first, filter: $filter, orderBy: $orderBy) {
    items {
      CustomerID
      FirstName
      LastName
    }
  }
}

変異の例を次に示します。

mutation ADD_CUSTOMER($input: CreateCustomerInput!) {
  createCustomer(item: $input) {
    CustomerID
    FirstName
    LastName
    Title
    Phone
    PasswordHash
    PasswordSalt
    rowguid
    ModifiedDate
    NameStyle
  }
}

手順 7: 型とフックを生成する

コード生成コマンドを実行して、TypeScript 型と React フックを作成します。

npm run codegen

正常に完了すると、 src/generated/graphql.tsx で生成されたコードに次のものが含まれます。

すべての GraphQL 型の TypeScript インターフェイス
各操作ごとに厳密に型指定された React フック
入力と出力の型の定義

手順 8: React コンポーネントで生成されたコードを使用する

生成されたフックを React コンポーネントにインポートして使用します。次に例を示します。

import React from 'react';
import { useGetCustomersQuery, useAddCustomerMutation } from '../generated/graphql';

const CustomersComponent: React.FC = () => {
  const { data, loading, error } = useGetCustomersQuery({
    variables: { first: 10 }
  });

  const [addCustomer] = useAddCustomerMutation();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {data?.customers?.items?.map(customer => (
        <div key={customer.CustomerID}>
          {customer.FirstName} {customer.LastName}
        </div>
      ))}
    </div>
  );
};

export default CustomersComponent;

手順 9: 認証を構成する

アプリケーションの Microsoft Entra ID 認証を構成します。

「アプリケーションを GraphQL 用 Fabric API に接続する」の「Microsoft Entra アプリの作成」セクションに従って、Microsoft Entra アプリを作成します。
必要なパラメーターを使用して、プロジェクト内の authConfig.ts ファイルを更新します。

export const AUTH_CONFIG = {
    clientId: "<Enter_the_Application_Id_Here>",
    tenantId: "<Enter_the_Tenant_Id_Here>",
    clientSecret: "<Enter_the_Client_Secret_Here>", //optional
}
export const GRAPHQL_ENDPOINT = '<Enter_the_GraphQL_Endpoint_Here>';

// The scope required for Fabric GraphQL API access
export const DEFAULT_SCOPE = "https://analysis.windows.net/powerbi/api/.default";

完全な構成ファイルについては、リポジトリの authConfig.tsサンプルを参照してください。

手順 10: アプリケーションを実行する

開発サーバーを起動します。

npm run dev

アプリケーションがブラウザーの http://localhost:3000 で起動します。 GraphQL API データにアクセスするために、Microsoft 資格情報を使用してサインインするように求められます。認証が成功すると、Fabric SQL データベースの SalesLT.Customer テーブルの顧客データが React アプリケーションに表示されます。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-01-21