Graphql Variables are sent as string

[baiciluigi]

Hi! The graphql variables are sent as a string instead of an object, which causes issues for most applications. In this case we're using magento 2 graphql API.

Here's the axios code generated:

import axios from "axios";

const options = {
  method: 'post',
  url: 'SAMPLE_ENDPOINT',
  data: {
    query: 'mutation SignIn($email: String!, $password: String!){\n    generateCustomerToken(\n        email: $email\n        password: $password\n    ) {\n        token\n    }\n}',
    variables: '{\n    "email": "SAMPLE@EMAIL.COM",\n    "password": "SAMPLE_PASS"\n}'
  }
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

Variables should be sent as an object instead (This is from VS Code Thunder Client)

import axios from "axios";

let gqlBody = {
  query: `mutation SignIn($email: String!, $password: String!){
    generateCustomerToken(
        email: $email
        password: $password
    ) {
        token
    }
}`,
  variables: {"email":"SAMPLE@EMAIL.COM","password":"SAMPLE_PASS"}
}

let bodyContent = JSON.stringify(gqlBody);

let reqOptions = {
  url: "SAMPLE_ENDPOINT",
  method: "POST",
  data: bodyContent,
}

let response = await axios.request(reqOptions);
console.log(response.data);

Any word on this?

[danilocecilia]

up!

This is causing the grapqhl calls not to work, at least for me none of them works.

{"errorMessage":"Variables must be provided as an Object where each property is a variable value. Perhaps look to see if an unparsed JSON string was provided."}

[subasraj]

Can you please explain in detail with some screen shots?

[baiciluigi]

The first post contains all the details. It's sending a string with \n values in it, it should just do a json stringify on the variables object instead.

[subasraj]

Try like this

{ "query": "mutation SignIn($email: String!, $password: String!){generateCustomerToken(email: $emailpassword: $password) {token}}", "variables": { "email": "SAMPLE@EMAIL.COM", "password": "SAMPLE_PASS" } }

or use like this

{ "query": "mutation SignIn($email: String!, $password: String!){generateCustomerToken(email: $emailpassword: $password) {token}}", "variables": "{\"email\": \"SAMPLE@EMAIL.COM\",\"password\": \"SAMPLE_PASS\"}" }

[baiciluigi]

Why is this closed? We can't send the request manually, it's done via UI... When you select "Graphql" and input values into the "Variables" field. This fails because variables are sent the wrong way

[metawops]

This seems to be the standard behaviour of the developer. Happened in other issues, too. He/she/they write(s) a comment and close(s) the issue. In my case it was just a "I don't know what your problem is, it works for me." – ticket closed. Not nice.

[subasraj]

I asked what are steps you are doing in step by step screen shots. You should have told that you are using Graphql from the body. Simple steps to replicate will avoid these kind of closures. Thanks for understanding

[subasraj]

Also im trying my best to help the developer community @metawops with my extension. If you don’t like my extension please don’t use.

[danilocecilia]

QUERY:

mutation registerOwnerPortal($market: Market!, $registerOwnerPortalInput: RegisterOwnerPortalInput!, $training: Boolean!) { ProfileMutations { registerOwnerPortal( market: $market registerOwnerPortalInput: $registerOwnerPortalInput training: $training ) { status typename } typename } }

VARIABLES:

{ market: { lang: "en", region: "us", brand: "test", application: "ncar", dealerId: "test", salesUserFullName: "Danilo" }, training: false, registerOwnerPortalInput: { opportunityKey: 8524761, clientKey: 7652140, salesUserFullName: "Danilo", custVehInfo: { firstName: "James", lastName: "Vonteps", address: { addressLine1: "1234 Fake St.", city: "BIRMINGHAM", region: "MI", postalCode: "48009", country: "US" }, mobileNumber: "6666666666", email: "john.doe@gmail.com", password: "test/NUAyhGrb4qTsLPvwG3ymnnVt5crBoPtQ2hQGiky+/THJTy/test=", termsAndConditions: false, vehicle: { vin: "test" }, customAttributes: { accountSource: "" }, marketingConsent: false } } }