[graphiql] GraphiQL Explorer Plugin generates incorrect order_by syntax

[Varun-Choudhary]

Is there an existing issue for this?

• [x] I have searched the existing issues

Current Behavior

The GraphiQL Explorer plugin is generating incorrect syntax for order_by arguments. When using the Explorer UI to add ordering fields, it generates an object syntax instead of the required array of objects syntax.

When using the Explorer to add ordering fields, it generates queries like this:

query MyQuery {
  billing(
    order_by: {billingDate: Asc, billingId: Asc, customerId: Asc, paymentStatus: Asc}
  ) {
    billingId
    billingDate
  }
}

It throws an error -

  "data": null,
  "errors": [
    {
      "message": "order_by expects a list of input objects with exactly one key-value pair per input object. Please split the input object with multiple key-value pairs into a list of single key-value pair objects."
    }
  ]
}

Expected Behavior

The query should be generated with an array of objects syntax like this:

  billing(
    order_by: [{billingDate: Asc}, {billingId: Asc}, {customerId: Asc}, {paymentStatus: Asc}]
  ) {
    billingId
    billingDate
  }
}

Steps To Reproduce

1. Open GraphiQL Explorer
2. Select a query field that supports ordering
3. Add multiple order_by fields through the Explorer UI
4. Observe the generated query syntax

Environment

• GraphiQL Version: 3.2.0
• graphiql/plugin-explorer: 2.0..0
• OS:
• Browser:
• Bundler:
• react Version: 0.21.0
• graphql Version:

Anything else?

No response