📣
TiDB Cloud Premium はパブリックプレビュー中です。エンタープライズワークロード向けの無制限のスケーリング、即時の弾力性、高度なセキュリティを提供します。このページは自動翻訳されたものです。原文はこちらからご覧ください。
AI
開発者向け
ベストプラクティス
API

Next.jsでデータアプリのOpenAPI仕様を使用する

このドキュメントではデータアプリの OpenAPI 仕様を使用してクライアント コードを生成し、Next.js アプリケーションを開発する方法を紹介します。

始める前に

Next.jsでOpenAPI Specificationを使用する前に、以下のものが用意されていることを確認してください。

このドキュメントでは、例としてTiDB Cloud Starterインスタンスを使用します。

ステップ1. データの準備

まず、 TiDB Cloud StarterインスタンスまたはTiDB Cloud Dedicatedクラスターにテーブルtest.repositoryを作成し、サンプルデータを挿入します。以下の例では、デモンストレーション用のデータとして、PingCAP が開発したオープンソースプロジェクトをいくつか挿入します。

SQL ステートメントを実行するには、 TiDB CloudコンソールのSQLエディタ使用できます。

-- Select the database
USE test;

-- Create the table
CREATE TABLE repository (
        id int NOT NULL PRIMARY KEY AUTO_INCREMENT,
        name varchar(64) NOT NULL,
        url varchar(256) NOT NULL
);

-- Insert some sample data into the table
INSERT INTO repository (name, url)
VALUES ('tidb', 'https://github.com/pingcap/tidb'),
        ('tikv', 'https://github.com/tikv/tikv'),
        ('pd', 'https://github.com/tikv/pd'),
        ('tiflash', 'https://github.com/pingcap/tiflash');

ステップ2. データアプリを作成する

データ挿入後、 TiDB Cloudコンソールのデータデータサービスページに移動します。 TiDB Cloud StarterインスタンスまたはTiDB Cloud Dedicatedクラスターにリンクするデータ アプリを作成し、データ アプリの API キーを作成してから、データ アプリにGET /repositoriesエンドポイントを作成します。このエンドポイントに対応する SQL ステートメントは次のとおりです。これはtest.repositoryテーブルからすべての行を取得します。

SELECT * FROM test.repository;

詳細については、データサービスの利用開始をご覧ください。

ステップ3．クライアントコードを生成する

以下では、Next.jsを例として、データアプリのOpenAPI仕様を使用してクライアントコードを生成する方法を説明します。

  1. hello-reposという名前の Next.js プロジェクトを作成します。

    公式テンプレートを使用してNext.jsプロジェクトを作成するには、次のコマンドを使用し、プロンプトが表示されたらすべてのデフォルトオプションをそのまま使用してください。

    yarn create next-app hello-repos

    以下のコマンドを使用して、新しく作成したプロジェクトのディレクトリに移動します。

    cd hello-repos

  2. 依存関係をインストールします。

    このドキュメントではOpenAPIジェネレーターを使用して、OpenAPI 仕様から API クライアント ライブラリを自動的に生成します。

    OpenAPI Generatorを開発依存関係としてインストールするには、次のコマンドを実行します。

    yarn add @openapitools/openapi-generator-cli --dev

  3. OpenAPI仕様をダウンロードして、 oas/doc.jsonとして保存してください。

    1. TiDB Cloudデータサービスページで、左側のペインにあるデータアプリ名をクリックすると、アプリの設定が表示されます。
    2. API仕様エリアで「ダウンロード」をクリックし、JSON形式を選択して、プロンプトが表示されたら「承認」をクリックします。
    3. ダウンロードしたファイルをoas/doc.jsonプロジェクトディレクトリにhello-repos }という名前で保存してください。

    詳細については、 OpenAPI仕様書をダウンロードする参照してください。

    oas/doc.jsonファイルの構造は以下のとおりです。

    {
  "openapi": "3.0.3",
  "components": {
    "schemas": {
      "getRepositoriesResponse": {
        "properties": {
          "data": {
            "properties": {
              "columns": { ... },
              "result": { ... },
              "rows": {
                "items": {
                  "properties": {
                    "id": {
                      "type": "string"
                    },
                    "name": {
                      "type": "string"
                    },
                    "url": {
                      "type": "string"
                    }
...
  "paths": {
    "/repositories": {
      "get": {
        "operationId": "getRepositories",
        "responses": {
          "200": {
            "content": {
              "application/json": {
                "schema": {
                  "$ref": "#/components/schemas/getRepositoriesResponse"
                }
              }
            },
            "description": "OK"
          },
...

  4. クライアントコードを生成する：

    yarn run openapi-generator-cli generate -i oas/doc.json --generator-name typescript-fetch -o gen/api

    このコマンドはoas/doc.json仕様を入力として使用してクライアントコードを生成し、 gen/apiディレクトリに出力します。

ステップ4．Next.jsアプリケーションを開発する

生成されたクライアントコードを使用して、Next.jsアプリケーションを開発できます。

  1. hello-reposプロジェクトディレクトリに、次の変数を含む.env.localファイルを作成し、変数の値をデータアプリの公開鍵と秘密鍵に設定します。

    TIDBCLOUD_DATA_SERVICE_PUBLIC_KEY=YOUR_PUBLIC_KEY
TIDBCLOUD_DATA_SERVICE_PRIVATE_KEY=YOUR_PRIVATE_KEY

    データ アプリの API キーを作成するには、 APIキーを作成する参照してください。

  2. hello-reposプロジェクトディレクトリで、 app/page.tsxの内容を、 GET /repositoriesエンドポイントからデータを取得して表示する以下のコードに置き換えてください。

    import {DefaultApi, Configuration} from "../gen/api"

export default async function Home() {
  const config = new Configuration({
    username: process.env.TIDBCLOUD_DATA_SERVICE_PUBLIC_KEY,
    password: process.env.TIDBCLOUD_DATA_SERVICE_PRIVATE_KEY,
  });
  const apiClient = new DefaultApi(config);
  const resp = await apiClient.getRepositories();
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <ul className="font-mono text-2xl">
        {resp.data.rows.map((repo) => (
          <a href={repo.url}>
            <li key={repo.id}>{repo.name}</li>
          </a>
        ))}
      </ul>
    </main>
  )
}

    注記：

    データアプリにリンクされているTiDB Cloud StarterインスタンスまたはTiDB Cloud Dedicatedクラスターが異なるリージョンでホストされている場合、ダウンロードした OpenAPI 仕様ファイルのserversセクションに複数の項目が表示されます。この場合、 configオブジェクトのエンドポイント パスを次のように構成する必要があります。

    const config = new Configuration({
    username: process.env.TIDBCLOUD_DATA_SERVICE_PUBLIC_KEY,
    password: process.env.TIDBCLOUD_DATA_SERVICE_PRIVATE_KEY,
    basePath: "https://${YOUR_REGION}.data.dev.tidbcloud.com/api/v1beta/app/${YOUR_DATA_APP_ID}/endpoint"
  });

    basePathデータアプリの実際のエンドポイントパスに置き換えてください。 ${YOUR_REGION}と{YOUR_DATA_APP_ID}を取得するには、エンドポイントのプロパティパネルでエンドポイント URL を確認してください。

ステップ5．Next.jsアプリケーションをプレビューする

注記：

プレビューを実行する前に、必要な依存関係がすべてインストールされ、正しく設定されていることを確認してください。

ローカル開発サーバーでアプリケーションをプレビューするには、次のコマンドを実行します。

yarn dev

その後、ブラウザでhttp://localhost:3000を開くと、 test.repositoryデータベースのデータがページに表示されます。

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