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

# GraphQL Request

export const BrunoButton = ({collectionUrl, width = 160, height = 40, className = '', style = {}}) => {
  const encodedUrl = encodeURIComponent(collectionUrl);
  const buttonUrl = `https://fetch.usebruno.com?url=${encodedUrl}`;
  return <div style={{
    display: 'flex',
    justifyContent: 'center',
    width: '100%',
    margin: '2rem 0',
    ...style
  }} className={className}>
      <a href={buttonUrl} target="_blank" rel="noopener noreferrer" style={{
    textDecoration: 'none',
    display: 'inline-block'
  }}>
        <img src="https://fetch.usebruno.com/button.svg" alt="Fetch in Bruno" width={width} height={height} noZoom style={{
    width: `${width}px`,
    height: `${height}px`,
    display: 'block',
    cursor: 'pointer'
  }} />
      </a>
    </div>;
};

Bruno provides the capability to send GraphQL requests, allowing you to interact with APIs that use the GraphQL query language.

## Create GraphQL request

1. Create new request from collection context menu (...) and select **New Request**.
2. Select **GraphQL** as request type with:
   * **URL**: The URL of the GraphQL endpoint.
   * **Name**: The name of the request.
3. Click on **Create** button.

<img src="https://mintcdn.com/bruno-a6972042/k_zr3I3gL1BrG0vM/images/screenshots/send-request/graphql/create-graphql-request.webp?fit=max&auto=format&n=k_zr3I3gL1BrG0vM&q=85&s=97a1df07e68ad24e57d8d883691e42dc" alt="create-graphql-request" width="2472" height="1126" data-path="images/screenshots/send-request/graphql/create-graphql-request.webp" />

## GraphQL request with query

After creating the request:

* Go to **Query** section where you can write and execute all your GraphQL queries
* You can also use the **Variables** section to pass variables to your query

<img src="https://mintcdn.com/bruno-a6972042/qClWzi66cJAFmDKE/images/screenshots/send-request/graphql/02-gql-query.webp?fit=max&auto=format&n=qClWzi66cJAFmDKE&q=85&s=80152679dd192c1836cb58f25d528643" alt="query-graphql" width="2596" height="1478" data-path="images/screenshots/send-request/graphql/02-gql-query.webp" />

**Example Query:**

You can test this query using the below GraphQL API: `https://graphqlzero.almansi.me/api`

```graphql theme={null}
query Albums {
  albums {
    data {
      id
      title
    }
  }
}
```

## Get Started with GraphQL APIs

Explore our sample [REST and GraphQL collection](https://github.com/bruno-collections/rest-graphql-collection) to see practical examples and test GraphQL endpoints:

<BrunoButton collectionUrl="https://github.com/bruno-collections/rest-graphql-collection" width={160} height={40} />