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

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:（任意）オンに切り替えると、すべてのリクエストに値を自動的に注入します。GraphQL API で必要となる可能性がある認証情報（auth credentials）を含めるのに便利です

GraphQL integration

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

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

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

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

また、コネクターの Details セクションから injections を追加・削除・更新できます。

Security rules の要件​

このコネクターがデータへアクセスする際に security rules を必須にするかどうかを指定できます。

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

Squid Client SDK を使用する​

GraphQL コネクターを作成したら、Squid Client SDK と Squid GraphQL SDK を使用して GraphQL API にアクセスできます。

  1. 次のコマンドで Squid の GraphQL パッケージをインストールします。
npm install @squidcloud/graphql
  1. 次の import をアプリケーションに追加します。Squid backend からコネクターにアクセスする場合は、Squid を import する必要はありません。
import { Squid } from '@squidcloud/client';
import { GraphQLClient } from '@squidcloud/graphql';
  1. GraphQL クライアントを作成します。Squid インスタンスとコネクターの ID を渡します。Squid backend からコネクターにアクセスする場合は、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. mutation を実行するには、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,
});