美化 GraphQL 查询：过滤器总是格式化为一长串不可读的行

Question

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

漂亮的代码

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

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

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

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

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

Answer 1

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

另一种选择是简单地使过滤器成为一个变量。在这方面，我认为 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.

美化 GraphQL 查询：过滤器总是格式化为一长串不可读的行

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

graphql

graphql-js

gatsby

graphiql