Fail to retreive Storefront API customerAccessTokenCreate

[66zombiestech]

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.

[66zombiestech]

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 ? 

[KamalDixit]

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))
  }