Dedicated to the Hydrogen framework, headless commerce, and building custom storefronts using the Storefront API.
Hi guys,
I'm trying to get CustomerAccessToken by querying GraphQL in my React App. So far, I tried testing on GraphiQL and everything worked just fine. However, when I tried querying in my React App, I got this error
""Variable $input of type CustomerAccessTokenCreateInput! was provided invalid value""
Sorry if this is a noobie question. GraphQL is pretty new for me.
Here's my code.
componentDidMount() {
const query = `
mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
customerAccessTokenCreate(input: $input) {
customerAccessToken {
accessToken
expiresAt
}
customerUserErrors {
code
field
message
}
}
}
`
const input = {
"email": "myemail@gmail.com",
"password": "abcdefg"
}
fetch('https://my-store.myshopify.com/api/2020-07/graphql.json', {
method: 'POST',
headers: {
"Accept": "application/json",
"Content-Type": "application/graphql",
'X-Shopify-Storefront-Access-Token': `${storefrontAccessToken.shopifyCredentials}`
},
body: query,
variables: JSON.stringify({ input })
})
.then(res => res.json())
.then(data => console.log(data))
}
Not sure what am I missing here. I'd appreciate any help.
I managed to make it work like this
const customerInfo = {
email: "myemail@gmail.com",
password: "abcdefg"
}
const query = `
mutation customerAccessTokenCreate {
customerAccessTokenCreate(input: {
email: "${customerInfo.email}",
password: "${customerInfo.password}"
}) {
customerAccessToken {
accessToken
expiresAt
}
customerUserErrors {
code
field
message
}
}
}
`
Is there any other more concise ways ?
It will work this way.
componentDidMount() {
const body = {
query: `
mutation customerAccessTokenCreate($input: CustomerAccessTokenCreateInput!) {
customerAccessTokenCreate(input: $input) {
customerAccessToken {
accessToken
expiresAt
}
customerUserErrors {
code
field
message
}
}
}
`,
variables:{
input: {
"email": "myemail@gmail.com",
"password": "abcdefg"
}
}
};
fetch('https://my-store.myshopify.com/api/2020-07/graphql.json', {
method: 'POST',
headers: {
"Accept": "application/json",
"Content-Type": "application/graphql",
'X-Shopify-Storefront-Access-Token': `${storefrontAccessToken.shopifyCredentials}`
},
body: JSON.stringify(body),
})
.then(res => res.json())
.then(data => console.log(data))
}