GraphQL

Squid can connect to a GraphQL API, allowing you to access it using the Squid Client SDK.

To connect a GraphQL API to Squid, complete the following setup steps:

1. Navigate to the Squid Console and choose your desired Squid application.

2. Click the Integrations tab.

3. Click Available Integrations and find the GraphQL integration. Then Click Add Integration.

4. Provide the following details:

• Integration ID: A unique string for your integration that is used in code to identify the integration. You can select an ID of your choice, but it's better to keep it brief and meaningful
• GraphQL URL: The GraphQL endpoint URL.
• Inject Request Headers: (Optional) Toggle on to automatically inject a value with all of your requests. This is useful for including auth credentials that may be required by the GraphQL API, for example.

5. Click Test Connection to test your connection to the API. If the connection fails, verify the value of your endpoint and header if you added one.

6. When the connection is successful, click Add Integration.

The GraphQL schema playground

Once you have added your integration, you can search the GraphQL schema and test API calls in the Squid Console under your integration's Schema tab.

You can add, remove, and update injections from the Details section of your integration.

Security rules requirements

You have the option to specify whether the integration requires security rules for accessing data. By default, security rules are required, and in a production environment, it's essential to never allow access to the integration without them.

To secure a GraphQL integration, refer to the Secure GraphQL section.

Using the Squid Client SDK

Once you've created a GraphQL integration, you can use the Squid Client SDK and Squid GraphQL SDK to access the GraphQL API.

1. Add the following imports to your application. If running the GraphQLClient from the Squid backend, you don't need to import Squid. Instead, you can access a provided Squid instance using this.squid.

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

2. Create a GraphQL client, passing your Squid instance and the ID of your integration:

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

3. To perform a query, use the GraphQLClient's query method, passing an object containing your query and any variables:

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

4. To run a mutation, use the GraphQLClient's mutate method, passing your query and any variables:

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