0

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

漂亮的代码

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

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

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

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

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

4

1 回答 1

1

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

另一种选择是简单地使过滤器成为一个变量。我认为美化在这方面对变量 JSON 对象的效果更好一些。

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

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

我在猜测实际的类型名称——检查模式文档以获取正确的名称。另请记住，变量不能与 StaticQuery 一起使用。

于 2019-08-10T01:17:02.030 回答