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

# Execute GraphQL request

> Executes HTTP requests to GraphQL APIs.

export const FormField = ({property, label, required = false, diType, uiPatterns, children}) => {
  const patterns = Array.isArray(uiPatterns) ? uiPatterns : uiPatterns ? [uiPatterns] : [];
  return <div style={{
    margin: '1.5rem 0'
  }}>
      <div style={{
    display: 'flex',
    alignItems: 'baseline',
    flexWrap: 'wrap',
    gap: '0.5rem',
    marginBottom: '0.25rem'
  }}>
        <strong>{label}</strong>
        <span style={{
    fontSize: '0.7rem',
    fontWeight: 600,
    textTransform: 'uppercase',
    letterSpacing: '0.04em',
    color: required ? '#6241f5' : '#6b7280'
  }}>
          {required ? 'Required' : 'Optional'}
        </span>
      </div>

      <div>{children}</div>

      {diType || patterns.length > 0 ? <p style={{
    fontSize: '0.85rem',
    color: '#6b7280',
    marginBottom: 0
  }}>
          {diType ? <>
              See the <a href={`/references/${diType}`}>{diType}</a> reference.{' '}
            </> : null}
          {patterns.length > 0 ? <>
              Accepts a <a href={`/documentation/placeholders-and-patterns/patterns#${patterns[0]}`}>pattern</a>.
            </> : null}
        </p> : null}
    </div>;
};

Sends a request to a GraphQL API and places the response into the data. GraphQL APIs let you ask for exactly the fields you need in a single query, so this is handy for enriching the data mid-route, for example fetching a product with just its name and price. It works the same way as the HTTP request step, but the request body is a GraphQL query written in a dedicated editor. By default the response replaces the data flowing through this step, so the next steps work with what the API returned.

This documentation describes: [Schema](/schemas/transformer/graphql-transformer)

## Fields

<FormField property="client" label="HTTP API connection" diType="http-client">
  A pre-configured connection that sets shared settings for the request, such as a base address, default headers, and authentication. Leave it empty to use the default HTTP API connection.
</FormField>

<FormField property="request.uri" label="Request URI" required>
  The address of the GraphQL endpoint. If the selected HTTP API connection already has a base address, start this with a slash to append a path to it; otherwise enter the full URL such as `https://example.org/graphql`. Placeholders are supported, so you can build the address from the data.
</FormField>

<FormField property="request.method" label="Request Method">
  The HTTP method used to send the query. Defaults to GET; GraphQL queries are commonly sent with POST. Placeholders are supported.
</FormField>

<FormField property="request.payload" label="Request Parameters">
  The GraphQL query to run, written in the query editor. For GET requests it is sent as query parameters; for POST and PUT requests it is sent in the request body. Defaults to `&{@}`, the whole output of this step, and you can use placeholders anywhere in the query to insert values from the data.
</FormField>

## Sample data

This step makes a live GraphQL call, so the result depends on the endpoint you call. The example below fetches a product by id with a POST request, using a placeholder to insert the id from the data into the query. The GraphQL response replaces the data.

| Field              | Value                         |
| ------------------ | ----------------------------- |
| Request URI        | `https://example.org/graphql` |
| Request Method     | POST                          |
| Request Parameters | the query below               |

```
{
    product(id: "&{identifier}") {
        identifier
        name
        price
    }
}
```

A typical response then replaces the data:

```json theme={null}
{
    "identifier": 1234,
    "name": "Red T-Shirt M",
    "price": 19.95
}
```

```json Configuration theme={null}
{
  "prototype": "graphql-transformer",
  "parameters": {
    "request": {
      "uri": "https://example.org/graphql",
      "method": "post",
      "payload": "{ product(id: \"&{identifier}\") { identifier name price } }"
    }
  }
}
```

To keep both your original data and the response, follow this with a merger step. See [Placeholders](/references/placeholders) for how to reference values such as `&{identifier}` in the query.