カスタムAPIエンドポイントを作成する方法?


Strapiは、開発者にカスタムAPIエンドポイントを作成させる強力なAPIのセットを提供します.この記事では、ゼロからカスタムAPIエンドポイントを作成します.

必要条件


このコンテンツにジャンプする前に、次のようにする必要があります.
  • JavaScriptの基礎知識
  • strapiの基本的な理解get started here .
  • インストール


    次のコマンドは、いくつかの既製の構成とデータを持つ新しいstrapiのインスタンスをインストールします.
        npx create-strapi-app plugins-v4-1 --template corporate
    
    お願いします.check out the create-strapi-app node package page for learning about the different ways to install Strapi.
    With --template corporate フラグを選択する必要がありますCustom としてinstallation type . 選択sqlite デフォルトのデータベースとして.
        ? Choose your installation type Custom (manual settings)
        ? Choose your default database client sqlite
        ? Filename: .tmp/data.db
    
    プロジェクトディレクトリが端末のカレントディレクトリであることを確認します.開発サーバーを起動します.
        cd plugins-v4-1/
        yarn develop --watch-admin
    
    The --watch-admin フラグは、AutoReloadが有効になっているアプリケーションとフロントエンドの開発サーバーを起動します.これは、開発者が管理パネルをカスタマイズすることができます.

    インストールが完了すると、ブラウザが自動的に新しいタブを開きます.そうでなければhttp://localhost:8000/admin/ .
    ならば8000 既に別のプロセスで使用されている場合は、CLI出力で説明した代替ポートを確認してください.ほとんどの場合、それは8080 .
    このStrapiアプリケーションの最初の管理者ユーザーを作成するフォームを完了します.

    ウォッチ管理フラグは、AutoReloadが有効になっているアプリケーションとフロントエンドの開発サーバーを起動します.これは、開発者が管理パネルをカスタマイズすることができます.
    コーポレートテンプレートは、コンポーネント、コレクションの種類、およびボックスから単一の型を生成します.
    コンポーネント
  • ユーザー
  • ページ
  • 提出する
  • シングルタイプ:
  • グローバル
  • コンポーネント
  • 要素、レイアウト、リンク、メタ、およびセクションの多くのコンポーネント
  • テンプレートはまた、いくつかの事前にデータを再生するには、プリフィルを提供します.これらのすべては、ちょうど--template corporate strapiのインストール時のフラグ.

    ユースケースの設定


    コレクションタイプpage , 事前にいくつかのデータでいっぱい.

    を返します.http://localhost:1337/api/pages?populate=* , strapi全てを返すpage , そのコンポーネントとダイナミックゾーンコンポーネントデータのすべてを設定します.

    要件は、カスタムAPIのエンドポイントを作成することですGET /api/pages-report これは、ページの簡略化されたレポートを提供します.
        [
          { "id": 1, "name": "Home", "metaTitle": "Strapi corporate site starter" },
          { "id": 2, "name": "Pricingg", "metaTitle": "Pricing" },
          { "id": 3, "name": "Secret", "metaTitle": "Secret page" },
          { "id": 4, "name": "Contact", "metaTitle": "Contact" }
        ]
    
    これはまさに私たちがこの記事で構築することです.

    基本APIの生成


    The npx strapi generate コマンドは対話型CLIセッションを開始します.場合にはyarn and strapi あなたのシステムにグローバルにインストールされているnpx コマンドyarn .
    次のオプションを選択することができます.注意してください、私たちは私たちのAPIという名前をpages-report .

    このコマンドはディレクトリpages-reportssrc/api ディレクトリ.The pages-report ディレクトリ名controllers , routes , and services .

    路線


    任意のURLでstrapiに送られたリクエストはルートで処理されます.デフォルトでは、strapiはすべてのcontent typeのルートを生成しますREST API documentation ). Routes can be added と設定します.ルートが存在すると、コントローラによって処理されたコードが実行されます.
    コードを置き換えるsrc/api/pages-report/routes/pages-report.js 次のコード行を使用します.
        module.exports = {
          routes: [
            {
             method: 'GET',
             path: '/pages-report',
             handler: 'pages-report.findAll',
             config: {
               policies: [],
               middlewares: [],
             },
            },
          ],
        };
    

    コントローラ対サービス


    コントローラは、リクエストに従ってクライアントが到達したアクションと呼ばれる一連のメソッドを含むJavaScriptファイルですroute . クライアントがルートを要求するたびに、アクションはビジネスロジックコードを実行し、response . コントローラは、モデルビューコントローラ(MVC)パターンのCを表します.ほとんどの場合、コントローラはプロジェクトのビジネスロジックの大半を含みます.しかし、コントローラのロジックがますます複雑になるにつれて、それは使用するのに良い練習ですservices コードを再利用可能な部品に編成する.
    サービスは再利用可能な関数の集合です.彼らは特にドライ(自分自身を繰り返さない)プログラミングの概念を尊重し、簡素化するために便利ですcontrollers ロジック.

    サービスの作成


    サービスは基本的にKOAのctx object (リクエストとレスポンス)それは柔軟で再利用可能な機能であると思われます.
    内容を置き換える/src/api/pages-report/services/pages-report.js 次のコード行を使用します.
        'use strict';
    
        module.exports = {
          pagesReport: async () => {
            try {
              // fetching the data
              // we dont really need contentSections for this example.
              // its kept here, just for your reference
              const entries = await strapi.entityService.findMany('api::page.page', {
                fields: ['id', 'shortName'],
                populate: {
                  metadata: {
                    fields: ['metaTitle']
                  },
                  contentSections: {
                    populate: '*'
                  }
                }
              });
    
              // reducing the data to a simple array
              let entriesReduced;
              if (entries && Array.isArray(entries)) {
                entriesReduced = entries.reduce((acc, item) => {
                  acc = acc || [];
                  console.log(acc);
                  acc.push({
                    id: item.id,
                    name: item.shortName || '',
                    metaTitle: item.metadata?.metaTitle || ''
                  });
                  return acc;
                }, [])
    
                // returning the reduced data
                return entriesReduced;
              }
            } catch (err) {
              return err;
            }
          }
        }
    
    このコードでは、strapiのEntity Service API すべてのページを取得するには応答を受け入れる柔軟な方法についてもっと学ぶためにPopulating the Entity Service API ドキュメント.
    The pagesReport サービスが簡略化(縮小)されたデータを返す
        [
          { "id": 1, "name": "Home", "metaTitle": "Strapi corporate site starter" },
          { "id": 2, "name": "Pricingg", "metaTitle": "Pricing" },
          { "id": 3, "name": "Secret", "metaTitle": "Secret page" },
          { "id": 4, "name": "Contact", "metaTitle": "Contact" }
        ]
    
    サービスが作成されると、それはcontrollers その他のサービスから
        // access an API service
        strapi.service('api::apiName.serviceName');
        // access a plugin service
        strapi.service('plugin::pluginName.serviceName');
    
    利用できるサービスの一覧は、コントローラとサービスからログオンできます.
        console.log('strapi.services ', strapi.services);
        console.log('pages-report', strapi.service('api::pages-report.pages-report'));
    

    コントローラの作成


    コントローラーはKoaのctx , したがって、コントローラ機能は、我々のサービスを起動することに責任がありますrequest そして、結果をresponse .
    コードを置き換えるsrc/api/pages-report/controllers/pages-report.js 次のコード行を使用します.
        'use strict';
    
        module.exports = {
          async findAll(ctx, next) {
            try {
              const data = await strapi.service('api::pages-report.pages-report').pagesReport();
              ctx.body = data;
            } catch (err) {
              ctx.badRequest('Page report controller error', { moreDetails: err })
            }
          }
        };
    

    APIのアクセス許可の設定


    これはユースケースに必要なコードです.GETリクエストを送信する/api/pages-report . おそらく403エラーを得るでしょう.

    エンドポイントにパブリックにアクセスできるようにするには、strapiダッシュボードの設定>roleをpublicにしてください.してください、ページのレポートルートの最終を確認し、保存ボタンを押します.

    さて、カスタムAPIは公開されています.

    結論


    この記事ではEntity Service API 結果を取得してフィルター処理する.この仕事を成し遂げる唯一の方法ではない.strapiでは、結果のフェッチとフィルタリングを使用することができますRest API, Query Engine API , and GraphQL API 同様に.
    Entity ServiceはStrapiの複雑なデータ構造を扱う層ですcomponents and dynamic zones また、データベースクエリを実行するには、クエリエンジンAPIをフードの下に使用します.これは、このユースケースのための合理的な選択になります.私たちの例は、我々がfiltering & advanced エンティティサービスAPIのポピュレーションテクニック.
    The source code written for this article can be explored at the git commit. あなたが何か提案がある場合は、知識を構築することを教えてください.