Make It Easier To Construct GraphQL Requests within the Test Builder

[conradwt]

Feature description

I would like to see better support for constructing GraphQL requests within the Test Builder. Thus, I envision something similar to the Postman tool as pictured here:

GraphQL document with variables

GraphQL Document:

query GetPersonByID($id: ID!) {
  person(id: $id) {
    firstName
    lastName
    username
    email
    friends {
      firstName
      lastName
      username
      email
    }
  }
}

GraphQL Variables

{
    "id": 1
}

Generated Javascript

export function S01_getPersonByID() {
  // Get Person By ID
  getPersonByID(1)

  // Add random delay
  sleep(2)
}

export function getPersonByID(id) {
  const query = `
    query GetPersonByID($id: Int!) {
      person(id: $id) {
        firstName
        lastName
        username
        email
        friends {
          firstName
          lastName
          username
          email
        }
      }
    }
  `;

  http.addHeader('Content-Type', 'application/json')

  let response = http.post(
    'http://localhost:4000/graphql',
    JSON.stringify({
      query: query,
      variables: {
        id: id
      }
    },
    {
      tags: 'getPersonByID'
    })
  )
}

GraphQL document without variables

query GetPeople {
  people {
    id
    firstName
    lastName
    username
    email
    friends {
      id
      firstName
      lastName
      username
      email
    }
  }
}

Generated Javascript

export function s02_getPeople() {
  // S02 Get People
  getPeople()

  // Add delay
  sleep(2)
}

export function getPeople() {
  const query = `
    query GetPeople {
      people {
        id
        firstName
        lastName
        username
        email
        friends {
          id
          firstName
          lastName
          username
          email
        }
      }
    }
  `;

  http.addHeader('Content-Type', 'application/json')

  let response = http.post(
    'http://localhost:4000/graphql',
    JSON.stringify({
      query: query
    },
    {
      tags: 'getPeople'
    })
  )
}

In the above Javascript, I'm using the Httpx package. However, the same code is applicable to the http package.

How does this help you?

It would make it easier to copy and paste GraphQL documents (i.e. queries, mutations, and subscriptions) into the Test Builder from GraphiQL or other tools used for editing and submitting GraphQL documents. Also, it would be easier to change the GraphQL document within the generated Javascript code.

How often do you come across needing a feature like this?

Daily

Anything else to add?

No response

[dgzlopes]

This is great. Thanks for opening the issue @conradwt :muscle:

Cc @markjmeier

[markjmeier]

This issue has been migrated to Grafana Feature requests (please contact support or your account team to submit additional ideas or to add to this one)