メインコンテンツまでスキップ

GraphQL

SquidはGraphQL APIに接続でき、Squid Client SDKを使用してアクセスすることができます。​

GraphQL APIをSquidに接続するには、以下のセットアップ手順を完了してください:

  1. Squid Console に移動し、希望するSquidアプリケーションを選択します。

  2. Connectors タブをクリックします。

  3. Available Connectors をクリックして、GraphQL コネクタを探します。その後、Add Connector をクリックします。

  4. 以下の詳細を入力してください:

  • Connector ID: お好みのユニークなIDです。簡潔で意味のあるものにするのが望ましい
  • Base URL: GraphQLエンドポイントのURL
  • Inject Request Headers: (Optional) 全てのリクエストに自動的に値を注入する場合はオンにします。GraphQL APIで必要とされる可能性のある認証情報を含める場合に便利です

GraphQL integration

  1. Test Connection をクリックして、APIへの接続をテストしてください。接続に失敗した場合は、エンドポイントの値および追加した場合はヘッダーを確認してください。

  2. 接続が成功したら、Add Connector をクリックします。

GraphQLスキーマプレイグラウンド​

コネクタを追加すると、Squid Consoleのコネクタの Schema タブでGraphQLスキーマを検索し、API呼び出しをテストすることができます。

コネクタの Details セクションから、注入を追加、削除、更新することができます。

セキュリティルールの要件​

コネクタがデータにアクセスするためにセキュリティルールを必要とするかどうかを指定するオプションがあります。

GraphQLコネクタを保護するには、Secure GraphQL のドキュメントを参照してください。

Squid Client SDKの使用方法​

GraphQLコネクタを作成すると、Squid Client SDKおよびSquid GraphQL SDKを使用してGraphQL APIにアクセスすることができます。

  1. 以下のコマンドを使用して、SquidのGraphQLパッケージをインストールしてください:
npm install @squidcloud/graphql
  1. 次のインポートをアプリケーションに追加します。Squidバックエンドからコネクタにアクセスする場合は、Squidのインポートは不要です:
import { Squid } from '@squidcloud/client';
import { GraphQLClient } from '@squidcloud/graphql';
  1. あなたのSquidインスタンスとコネクタのIDを渡して、GraphQLクライアントを作成します。Squidバックエンドからコネクタにアクセスする場合は、this.squid を使用して提供されたSquidインスタンスにアクセスできます:
const graphQLClient = new GraphQLClient(squid, 'CONNECTOR_ID');
  1. クエリを実行するには、GraphQLClientの query メソッドを使用し、クエリおよび変数を含むオブジェクトを渡します:
const query = `
  query ($title: String!, $description: String!) {
    exampleQuery(
      input: {
        title: $title,
        description: $description
      }
    ) {
      success
      result {
        id
        url
      }
    }
  }
`;

const variables = {
  title: 'Example Title',
  description: 'Example description.',
};

const result = await graphQLClient.query({
  query: query,
  variables: variables,
});
  1. ミューテーションを実行するには、GraphQLClientの mutate メソッドを使用し、クエリおよび変数を渡します:
const graphQlRequest = `
  mutation ($title: String!, $description: String!) {
    create(
      input: {
        title: $title,
        description: $description,
      }
    ) {
      success
      result {
        id
        title
        description
      }
    }
  }
`;
const variables = {
  title: 'Example Title',
  description: 'Example description.',
};

const result = await graphQLClient.mutate({
  query: graphQlRequest,
  variables: variables,
});