Prettify GraphiQL query: filter always formatted in one long unreadable line

Question

I prettify my GraphQL query in the GraphiQL window of my browser. I use the Gatsby GrapiQL implementation. The filter part is always condensed in one long line so that I have to use the horizontal scroll bar. This has been bugging me for months now.

The prettyfied code

{
  allFile(filter: {sourceInstanceName: {eq: "tour-data"}}, sort: {fields: base, order: ASC}) {
    edges {
      node {
        relativePath
      }
    }
  }
}

How it looks in the browser: Without scrolling I cannot see or edit how it is sorted.

It's a small inconvenience but this scrolling adds up over time. Prettify implemented like this has terrible user experience. I filter all my queries so I have to do a lot of scrolling.

I looked in the official documentation and the github project. I did not find a way to alter the formatting rules.

Is there a way to tell prettify to give the filter its own lines?

Answer 1

I don't think there's any way to configure that unless you built an instance of GraphiQL yourself and pointed it at your endpoint. You might try a client like Altair though no promises.

The other option is to simply make filter a variable. I think the prettify works a little better on the variables JSON object in that regard.

query ($filter: FileFilterInput!, $sort: FileSortInput!) {
  allFile(filter: $filter, sort: $sort) {
    edges {
      node {
        relativePath
      }
    }
  }
}

{
  "filter": {
    "sourceInstanceName": {
      "eq": "tour-data"
    }
  },
  "sort": {
    "fields": "base",
    "order": "ASC"
  }
}

I'm guessing at the actual type names -- check the schema docs for the correct names. Also bear in mind that variables can't be used with StaticQuery.