美化GraphiQL查询：过滤器始终以不可读的长行格式设置

Question

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

精美代码

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

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

带来的不便是小事，但是随着时间的推移，这种滚动加起来了。这样实现的美化具有糟糕的用户体验。我会过滤所有查询，因此必须进行大量滚动。

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

有没有办法告诉prettify给过滤器自己的一行？

Answer 1

除非您自己构建GraphiQL实例并将其指向端点，否则我认为没有任何方法可以进行配置。您可以尝试（Altair）[https://altair.sirmuel.design/]之类的客户端，尽管没有保证。

另一个选择是简单地使filter为变量。在这方面，我认为prettify在变量JSON对象上效果更好。

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

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

我正在猜测实际的类型名称-检查架构文档以获取正确的名称。另外请记住，variables can't be used with StaticQuery。