GraphQL

Squid は GraphQL API に接続でき、Squid Client SDK を使用して access できます。

GraphQL API を Squid に接続するには、次の setup step を完了します。

1. Squid Console に移動し、使用する Squid application を選択します。

2. Connectors tab をクリックします。

3. Available Connectors をクリックし、GraphQL connector を見つけます。次に Add Connector をクリックします。

4. 次の detail を入力します。

• Connector ID: 任意の unique ID。簡潔で意味のあるものにすることをおすすめします
• Base URL: GraphQL endpoint URL
• Inject Request Headers: （Optional）すべての request に value を自動 inject するには toggle を on にします。GraphQL API に必要な auth credential を含める場合に役立ちます

5. Test Connection をクリックして、API への connection を test します。connection が failure した場合は、endpoint の value と、追加した場合は header を確認します。

6. connection が成功したら、Add Connector をクリックします。

GraphQL Schema Playground

connector を追加すると、Squid Console の connector Schema tab で GraphQL schema を検索し、API call を test できます。

connector の Details section から injection の追加、削除、update を行えます。

Security Rule の要件

connector の data access に security rule が必要かどうかを指定できます。

GraphQL connector を保護するには、Secure GraphQL documentation を参照してください。

Squid Client SDK の使用

GraphQL connector を作成すると、Squid Client SDK と Squid GraphQL SDK を使用して GraphQL API に access できます。

1. 次の command を使用して Squid GraphQL package を install します。

npm install @squidcloud/graphql

2. 次の import を application に追加します。Squid backend から connector に access する場合は、Squid を import する必要はありません。

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

3. Squid instance と connector ID を渡して GraphQL client を作成します。Squid backend から connector に access する場合は、this.squid を使用して提供された Squid instance に access できます。

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

4. query を実行するには、GraphQLClient の query method を使用し、query と任意の variable を含む object を渡します。

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. mutation を実行するには、GraphQLClient の mutate method を使用し、query と任意の variable を渡します。

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,
});