Graphql 美化GraphiQL查询：过滤器总是格式化在一个不可读的长行中

我在浏览器的GraphiQL窗口中美化GraphQL查询。我使用Gatsby GrapiQL实现。过滤器部分总是压缩成一条长线，因此我必须使用水平滚动条。这几个月来一直困扰着我

经过修饰的代码

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

它在浏览器中的外观：如果不滚动，我无法查看或编辑它的排序方式

这是一个小的不便，但随着时间的推移，这种滚动累积起来。像这样实现的美化具有糟糕的用户体验。我过滤所有的查询，所以我必须做很多滚动

我查阅了官方文档和github项目。我没有找到改变格式规则的方法

---

有没有一种方法可以告诉prettify为过滤器指定自己的行？

我认为没有任何方法可以配置它，除非您自己构建了一个GraphiQL实例并将其指向端点。你可以尝试像Altair这样的客户[尽管没有承诺]

另一个选择是简单地将filter设置为一个变量，我认为在这方面，prettify在variables JSON对象上的效果更好一些

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

---

我在猜测实际的类型名称-检查架构文档中是否有正确的名称。同时请记住。

您能给出或链接一个如何使用筛选变量的示例吗？@EliteRaceElephant添加了一个示例

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