Plugin: button/shortcut to order query fields

[MatthiasKunnen]

When using interfaces or spreading objects into type declarations, the GraphiQL field output quickly becomes disorganized. I suggest to add an option called sortFields which would cause the fields to be ordered lexicographically when set to true.

[acao]

this sounds like something that could be acheived via a combination of prettier/eslint. we are hoping to expose a plugin interface in 1.x that allows people to define custom prettier options and UI choices, and this would make sense as a config option for a customizable "prettify" action as we see now

[benjie]

(Aside: I think ordering by the schema field order (rather than lexicographically) would be an interesting option too.)

[dimaMachina]

This feature can be easily achieved with integration graphql-eslint which has a built-in rule for alphabetizing fields, and selections in GraphQL SDL https://github.com/graphql/graphiql/issues/3057

[MatthiasKunnen]

@B2o5T, would the eslint plugin help with the order of fields displayed in the GraphiQL Docs panel? I hope to be able to order the fields in the Docs panel regardless of the way the fields were declared in the code.

[dimaMachina]

@MatthiasKunnen GraphQL-ESLint’s alphabetize rule can alphabetize schema fields, input arguments, and even type/interface definitions, also you can declare a custom order to keep id field always first.

So yes, we can alphabetize schema before showing it in the docs panel

[acao]

@MatthiasKunnen I think there are several features being requested here. @B2o5T 's suggestion is for alphebitizing schema fields in SDL format ahead of time, but if you are using code-first schema approach, this won't apply to you. IYou can use this eslint rule to sort fields in your query document files, but not in the editor itself.

it sounds like you need several different things:

1. to be able to alphabetize fields in the editor

2. to be able to provide a sort for fields in the doc explorer

3. can be provided by sorting the order of type fields in the editor using a code action we can provide with monaco, or with a simple button now similar to merge query. this could be provided as a plugin

4. would require some sorting options as you suggest, as you say, it requires being able to order the fields in the docs panel regardless of the way the fields are declared in code, however eslint will only help you on the code side

[MatthiasKunnen]

@acao, I am indeed looking for either a button to sort the fields in the Docs panel or for a setting to enable autosorting of those same fields. This last setting could be a setting in the GraphiQL UI or a setting in the GraphQL schema build options.