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 で要求される可能性がある認証資格情報を含めるのに便利です

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

6. 接続が成功したら、Add Connector をクリックしてください。

The GraphQL schema playground

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

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

Security rules requirements

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

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

Using the Squid Client SDK

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

1. 次のコマンドを使用して Squid の GraphQL パッケージをインストールしてください:

npm install @squidcloud/graphql

2. 次のインポート文をアプリケーションに追加してください。Squid バックエンドからコネクタにアクセスする場合は、Squid のインポートは不要です:

import { Squid } from '@squidcloud/client';
import { GraphQLClient } from '@squidcloud/graphql';

3. Squid インスタンスとコネクタの ID を渡して GraphQL クライアントを作成します。Squid バックエンドからコネクタにアクセスする場合は、提供された Squid インスタンスに this.squid を使用してアクセスできます:

const graphQLClient = new GraphQLClient(squid, 'CONNECTOR_ID');

4. クエリを実行するには、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,
});

5. ミューテーションを実行するには、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,
});