graphql fetch bad request

When using graphiql, I can successfully run my query:

query Q($component_id: String!, $module_id: String!, $order: JSON!){
  retrieveMod(component_id: $component_id, module_id:$module_id, order: $order){
    id, module_id, module_data, date_created
  }
}

{
  "module_id": "b80ba682-4c8d-42f9-a1de-a126df75f57a",
  "component_id": "2b436a49-a3f7-4eb9-9e49-e3a1e66540fc",
  "order": {
    "column": "id",
    "order": "asc"
  }
}

In chrome debugger. The body is JSON.stringify(graphQLParams) output:

"{"query":"query Q($component_id: String!, $module_id: String!, $order: JSON!){\n  retrieveMod(component_id: $component_id, module_id:$module_id, order: $order){\n    id, module_id, module_data, date_created\n  }\n}\n","variables":{"module_id":"b80ba682-4c8d-42f9-a1de-a126df75f57a","component_id":"2b436a49-a3f7-4eb9-9e49-e3a1e66540fc","order":{"column":"date_created","order":"asc"}},"operationName":"Q"}" 

Trying to run in my code:

let orderBy = {
    column: "date_created",
    order : "desc"
}

let variables = {
    component_id: this.componentID,
    mobile_id: ytModuleID,
    order: orderBy
}

let query = {
    query: "query Q($component_id: String!, $module_id: String!, $order: JSON!) " +
        "{" +
        "retrieveMod(component_id: $component_id, module_id: $module_id, order: $order) " +
        "{" +
        " id, module_id, module_data, date_created " +
        "}" +
        "}"
};                        
query.variables = variables;
query.operationName = "Q";

In chrome debugger. The body is JSON.stringify(query) output:

"{"query":"query Q($component_id: String!, $module_id: String!, $order: JSON!) {\n retrieveMod(component_id: $component_id, module_id: $module_id, order: $order) {\n id, module_id, module_data, date_created }\n}\n","variables":{"component_id":"2b436a49-a3f7-4eb9-9e49-e3a1e66540fc","mobile_id":"b80ba682-4c8d-42f9-a1de-a126df75f57a","order":{"column":"date_created","order":"desc"}},"operationName":"Q"}"

So it seems like both sets of data are the same. But I keep getting a 400 Bad Request. Both are using exact same fetch parameters:

method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}

If anyone can point out what is incorrect in my query I would really appreciate it.

Thanks

via adviner