> ## Documentation Index
> Fetch the complete documentation index at: https://requestly-mintlify-changelog-requestly-past-week-38456.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# GraphQL Support

> Learn to modify GraphQL API requests and responses using Requestly to debug and test GraphQL APIs.

***

Unlike REST APIs, GraphQL APIs provide a flexible approach to querying and mutating data through a single endpoint. They allow clients to specify exactly what data is needed, reducing over-fetching and under-fetching issues common with REST APIs. GraphQL APIs can be modified to customize requests and responses for testing and debugging. This guide provides detailed steps to achieve this using Requestly.

## Modifying GraphQL Responses

In GraphQL, client interactions are typically managed through a single HTTP endpoint. The specific operation to execute is often indicated by the `operationName` field in the request payload.

**Example Request**

```bash theme={null}
POST <https://www.example.com/graphqlapi>
{
  "operationName": "getUsers",
  "query": `
    query getUsers {
      users {
        id
        email
      }
    }
  `
}
```

To modify the response of a GraphQL API:

### Steps to Modify API Response

<Steps>
  <Step title="Open HTTP Rules">
    Navigate to the HTTP Rules section in the web or desktop app.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/c2dbce79-cafa-4f4a-8fb3-3054f2027f85.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=6c10e87bfa8ad2812e28374546cd5379" align="center" fullwidth="false" width="2400" height="1332" data-path="images/graphql-modify-request-response/c2dbce79-cafa-4f4a-8fb3-3054f2027f85.png" />
  </Step>

  <Step title="Create a New Rule">
    Click on "+ New Rule" and select **Modify API Response**.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/4f54d5ec-8d60-4edf-a0e0-45488977bcbc.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=d20d5fb6b6dec22e1feccad679d9ffec" align="center" fullwidth="false" width="2400" height="1332" data-path="images/graphql-modify-request-response/4f54d5ec-8d60-4edf-a0e0-45488977bcbc.png" />
  </Step>

  <Step title="Configure Resource Type">
    Choose "GraphQL API" as the Resource Type.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/94125ed8-54e8-4a23-b0c4-83bf87af50f9.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=9134565be5c343d81450961cdf115d4f" align="center" fullwidth="false" width="2400" height="1276" data-path="images/graphql-modify-request-response/94125ed8-54e8-4a23-b0c4-83bf87af50f9.png" />
  </Step>

  <Step title="Set GraphQL Operation Filter">
    In the **GraphQL Operation (Request Payload Filter)** section:

    * Enter **Key** as `operationName`.

    * Enter **Value** as the operation name you want to target (e.g., `getUsers`).

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/f308ed77-6708-4e56-9495-6cb08bd93f1a.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=71f0775d1f76cc46c6087a158f9944b5" align="center" fullwidth="false" width="2400" height="1276" data-path="images/graphql-modify-request-response/f308ed77-6708-4e56-9495-6cb08bd93f1a.png" />
  </Step>

  <Step title="Customize Response">
    Define the new response you want to serve for the specified operation.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/ade413a6-caeb-4f6a-b065-697ecd83ed69.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=43d6122e2cd0328464a75a405abeb3b4" align="center" fullwidth="false" width="2400" height="1276" data-path="images/graphql-modify-request-response/ade413a6-caeb-4f6a-b065-697ecd83ed69.png" />
  </Step>

  <Step title="Save and Activate">
    Click **Save** to store the rule and toggle it ON to apply the changes.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/7ef71084-b8cb-4e54-9ccb-633d11c77db1.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=008d2f5b19eeaff09bc3c89f6eecb54b" align="center" fullwidth="false" width="2400" height="1332" data-path="images/graphql-modify-request-response/7ef71084-b8cb-4e54-9ccb-633d11c77db1.png" />
  </Step>

  <Step title="Test the Rule">
    Validate the rule by sending a request matching your conditions and verifying the modified response.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/a1e80ffd-39ed-4fa0-baca-656a432fa90d.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=8fd4493a46a51a8b137ee45e58f0c688" align="center" fullwidth="false" width="2400" height="1404" data-path="images/graphql-modify-request-response/a1e80ffd-39ed-4fa0-baca-656a432fa90d.png" />
  </Step>
</Steps>

For additional details, visit the Modify API Response Rule Page.

**Notes**

* The **Key** represents the JSON key in the request payload and supports nested paths. For example:

  * If `operationName` is located at `data.operationName`, specify `data.operationName`.

  * For array payloads, such as `[{"operationName": "value"}]`, use `0.operationName` as the key.

* If the request does not include `operationName`, select **Resource Type** as "REST API" and use **Dynamic (JavaScript) Mode** to filter and modify the response.

### Example Without `operationName`

In cases where the operation is specified within the `query` field:

```bash theme={null}
POST /graphql
{
  "query": `
    query getUsers {
      users {
        id
        email
      }
    }
  `
}
```

You can modify the response using a JavaScript snippet:

```jsx theme={null}
function modifyResponse(args) {
  const { url, response, requestData, responseJSON } = args;

  if (requestData.query?.includes("query getUsers")) {
    console.log("Requestly: Modifying response", { query: requestData.query });
    return { ...responseJSON, custom: true };
  }

  return response;
}
```

***

## Modifying GraphQL Requests

If you need to alter the GraphQL query or its variables, use the **Modify Request Body** rule to change the request payload dynamically.

### Steps to Modify Request Body

<Steps>
  <Step title="Open HTTP Rules">
    Navigate to the HTTP Rules tab in the web or desktop app.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/5bb28e10-7243-4eaa-8618-229476ccf604.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=bf907c8098fc6e5c85acd1e783207b00" align="center" fullwidth="false" width="2400" height="1332" data-path="images/graphql-modify-request-response/5bb28e10-7243-4eaa-8618-229476ccf604.png" />
  </Step>

  <Step title="Create a New Rule">
    Click on "+ New Rule" and select **Modify Request Body**.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/77286f4f-e8cc-4267-b18a-a715c6ae16f1.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=54a766e9b975f81f92fb0b104b170993" align="center" fullwidth="false" width="2400" height="1332" data-path="images/graphql-modify-request-response/77286f4f-e8cc-4267-b18a-a715c6ae16f1.png" />
  </Step>

  <Step title="Configure Resource Type">
    Choose "GraphQL API" as the Resource Type.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/112f8c75-4bb0-4e3d-91a6-c78c9f0434c5.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=8ed1c8584195cf39aea2b3d7bd2f5510" align="center" fullwidth="false" width="2250" height="1364" data-path="images/graphql-modify-request-response/112f8c75-4bb0-4e3d-91a6-c78c9f0434c5.png" />
  </Step>

  <Step title="Set GraphQL Operation Filter">
    In the **GraphQL Operation (Request Payload Filter)** section:

    * Enter **Key** as `operationName`.

    * Enter **Value** as the operation name you want to target (e.g., `getUsers`).

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/dde4dd52-6ffd-4c94-86d9-171a88d5a88d.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=333a08862db089b83805ca13af454c66" align="center" fullwidth="false" width="2236" height="1278" data-path="images/graphql-modify-request-response/dde4dd52-6ffd-4c94-86d9-171a88d5a88d.png" />
  </Step>

  <Step title="Customize Request">
    Define the new Request you want to serve for the specified operation

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/027a3c69-b67f-4608-a5e5-7ae5e93fe875.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=aef6464a3d7211a92dffa80936f8385a" align="center" fullwidth="false" width="2236" height="1278" data-path="images/graphql-modify-request-response/027a3c69-b67f-4608-a5e5-7ae5e93fe875.png" />
  </Step>

  <Step title="Save and Activate">
    Click **Save** to store the rule and toggle it ON to apply the changes

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/6751b63e-802b-4efa-954c-124dbc162c86.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=89f3bbace93450de95a54e582f0687be" align="center" fullwidth="false" width="2250" height="1364" data-path="images/graphql-modify-request-response/6751b63e-802b-4efa-954c-124dbc162c86.png" />
  </Step>

  <Step title="Test the Rule">
    Validate the rule by sending a request matching your conditions and verifying the modified response.

    <img src="https://mintcdn.com/requestly-mintlify-changelog-requestly-past-week-38456/UhN5Eh5FO_C7QFYI/images/graphql-modify-request-response/fa513012-32fe-4203-848f-3b4edec6abda.png?fit=max&auto=format&n=UhN5Eh5FO_C7QFYI&q=85&s=361e743d62706a41009ecdaf5395d63e" align="center" fullwidth="false" width="2236" height="1278" data-path="images/graphql-modify-request-response/fa513012-32fe-4203-848f-3b4edec6abda.png" />
  </Step>
</Steps>

For additional details, visit the Modify Request Rule Page.
