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 Connectors tab.

3. Click Available Connectors and find the GraphQL connector. Then Click Add Connector.

4. Provide the following details:

• Connector ID: A unique ID of your choice. It is best to keep it brief and meaningful
• Base URL: The GraphQL endpoint URL
• Inject Request Headers: (Optional) Toggle on to automatically inject a value with all of your requests. This can be useful for including auth credentials that may be required by the GraphQL API

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 Connector.

The GraphQL schema playground

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

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

Security rules requirements

You have the option to specify whether the connector requires security rules for accessing data.

To secure a GraphQL connector, refer to the Secure GraphQL documentation.

Using the Squid Client SDK

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

1. Install Squid's GraphQL package using the following command:

npm install @squidcloud/graphql

2. Add the following imports to your application. If accessing your connector from the Squid backend, you don't need to import Squid:

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

3. Create a GraphQL client, passing your Squid instance and the ID of your connector. If accessing your connector from the Squid backend, you can access the provided Squid instance using this.squid:

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

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

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