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

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 endpoint URL
  • Inject Request Headers:（任意）オンにすると、すべてのリクエストに値を自動的に注入します。GraphQL API で必要になる可能性のある認証情報を含めるのに役立ちます。

GraphQL integration

  1. Test Connection をクリックして、API への接続をテストします。接続に失敗する場合は、endpoint の値と（追加した場合は）header の値を確認してください。

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

GraphQL schema playground​

コネクタを追加すると、Squid Console でコネクタの Schema タブから GraphQL schema を検索したり、API コールをテストしたりできます。

コネクタの Details セクションから、injection の追加、削除、更新を行えます。

Security rules requirements​

データにアクセスする際にコネクタが 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. Squid インスタンスとコネクタの ID を渡して GraphQL クライアントを作成します。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,
});