> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superblocks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# GraphQL

> Call any internal or external GraphQL API from Superblocks

export const IntegrationSuccess = ({integrationName}) => {
  return <p>
      <b>{integrationName} connected!</b><br />You can now use{" "}
      <a href="/building-with-clark">Clark to build</a> with {integrationName}.
    </p>;
};

export const Alert = ({type, title, children}) => {
  const variant = ["info", "success", "warning", "danger", "note"].includes(type) ? type : "note";
  return <div className={`alert alert--${variant}`}>
      <div className="alert-icon" />
      <div className="alert-content">
        {title && <div className="alert-title">{title}</div>}
        <div className="alert-body">{children}</div>
      </div>
    </div>;
};

## Setting up GraphQL

### 1. Add integration

<p>
  Select <strong>GraphQL</strong> from the{" "}
  <a href="https://app.superblocks.com/integrations/graphql">integrations page</a>.
</p>

### 2. Configure settings

Fill out the form with the following settings:

| Field          | Required                                   | Description                                                                                                                                                                                                                    |
| -------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| URL            | <span className="table-checkmark">✓</span> | GraphQL URL to connect to                                                                                                                                                                                                      |
| Authentication | <span className="table-checkmark">✓</span> | The [authentication type](/integrations/auth/authentication-types) you want to use. See detailed instructions for setting up API auth in our docs on [Authentication & authorization](/integrations/auth/authentication-types) |
| Headers        | <span className="table-x">✗</span>         | List of headers that will be added to requests to your API                                                                                                                                                                     |

### 3. Test and save

Click **Test Connection** to check that Superblocks can connect to your API.

After connecting successfully, click **Create** to save the integration.

<Alert type="success">
  <IntegrationSuccess integrationName="GraphQL" />
</Alert>