Support for wildcard expanding all available fields

[alanhamlett]

Sometimes I would like to see all the data and all fields available, without having to list all of them. In this case, it would be nice if GraphiQL supported me typing * and then autocompleted with all available fields. For example, when I type:

{
  user {
    *
  }
}

If user contained 4 fields I would want GraphiQL to autocomplete and fill in the query as:

{
  user {
    id
    name
    location
    created_at
  }
}

[alanhamlett]

Related to graphql/graphql-spec#127, but we don't actually need wildcards in the query protocol... only in the GraphiQL client.

[acao]

this used to work in graphiql and may be a regression, what happens when you cmd+enter on completion?

graphiql/packages/graphiql/src/components/GraphiQL.tsx

Line 997 in 4d3eeaa

public autoCompleteLeafs() {

it may be that this is somehow incompatible with the latest version of codemirror. this is even customizeable via the getDefaultFieldNames prop

I started with an experiment of adding this to monaco-graphql as well on completion, and had great success. no need for a *, a command available as a keyboard shortcut, in the command palette, and as code action (the lightbulb ala vscode) would be easier.

I'm considering proposing this completion option as well: fillLeafsOnCompletion: "all", "required", or "none".

[alanhamlett]

⌘ + Enter just sends the query to API for me.

[itdependsnetworks]

The @ symbol seems to work some places but not others, and I am pretty sure I have used other special characters that have works, but again only sometimes and I can't reproduce.

Working

Not Working

[itdependsnetworks]

ok, typing a number seems to work

[itdependsnetworks]

One more... for filters, using a parenthesis seems to work, it has to be empty, so you often have to delete your current filter to get the whole list again. So only when you type ( does it reliably show up. I have seen $ and I think others occasionally work, but not consistently.

[acao]

I will make a guide to this soon, as it's much easier to auto expand and fill leafs than this, and the getDefaultFieldNames prop callback allows you to endlessly customize this, to the point of allowing you to enable auto-expansion of all fields. it's just a matter of knowing the keyboard shortcuts and how to customize!

1. shift + space = expand autocompletion anywhere (also ctrl+space, windows+space and cmd+space works for this)
   

2. once a field name is completely typed out, type cmd/windows + enter to auto-expand relay-esque defaults as per the default getDefaultFieldNames prop value (note this default callback value may move for 4.x). there is a bug from the 2.x rewrite that causes it to accidentally execute the query here that we need to fix

as you can see, if you remove the condition on line 113, you have a recipe for auto-expanding all leafs, something like this maybe:

function myCustomGetDefaultFieldNames(type: GraphQLType) {
  // If this type cannot access fields, then return an empty set.
  // if (!type.getFields) {
  if (!('getFields' in type)) {
    return [];
  }

  const fields = type.getFields();

  // Include all fields.
  const leafFieldNames: Array<string> = [];
  for (const fieldName of Object.keys(fields)) {
      leafFieldNames.push(fieldName);
  }
  return leafFieldNames;
}


<GraphiQL getDefaultFieldNames={myCustomGetDefaultFieldNames} />

these are all part of the original GraphiQL and date back to 0.6.x or earlier iirc.