Axios, Shopify Storefront API, «Параметры отсутствуют или недействительны», «Ошибка синтаксического анализа»

Question

Я застрял. Я пытаюсь получить данные из Shopify Storefront API. Почтовые запросы нормально работают в почтальоне. Это http-запросы graphql. вот скриншот

Поэтому я скопировал код axios из приложения postman и вставил его в свое приложение React (которое просто реагирует и покупает sdk для покупки). вот мой код:

      var data = JSON.stringify({
    query: `query {     
      shop {
          name
      }
  }`,
    variables: {}
  });

  var config = {
    method: 'post',
    url: 'https://<shop name>.myshopify.com/api/2021-07/graphql.json',
    headers: { 
      'X-Shopify-Storefront-Access-Token': '<access token>', 
      'Content-Type': 'application/json'
    },
    data : data
  };

  axios(config)
  .then(function (response) {
    console.log(JSON.stringify(response.data));
  })
  .catch(function (error) {
    console.log(error.response);
  });

И это ошибка, которую он возвращает: статус 400, «параметр отсутствует или недействителен». Вместо этого я попробовал что-то вроде этого:

      const url = 'https://<shop-name>.myshopify.com/api/2021-07/graphql.json'
  const headers = {
    'X-Shopify-Storefront-Access-Token': '<access token>',
    'Content-Type': 'application/json',
  }

await axios.post(
    url, // this is the same as the previous url
    {query: `
      shop {
        name
      }
    `},
    {headers: headers}) // headers are the same as previous headers
  .then((result) => console.log(result))
  .catch((error) => {
      console.log(error.response);
  });

и теперь я получаю статус 200, но без названия магазина. Скорее, я получаю ошибку синтаксического анализа : «Ошибка синтаксического анализа в« магазине »(ИДЕНТИФИКАТОР) в [2, 11]». И если я изменю заголовок Content-Type на application / graphql, я получу аналогичную ошибку синтаксического анализа .

Пожалуйста помоги. Я понятия не имею, как заставить это работать. Заранее спасибо.

Answer 1

Получил ту же проблему и найти решение. Данные должны быть объектом {query:"xxxx"}; Для GraphQL.

      
  var config = {
    method: 'post',
    url: 'https://<shop name>.myshopify.com/api/2021-07/graphql.json',
    headers: { 
      'X-Shopify-Storefront-Access-Token': '<access token>', 
      'Content-Type': 'application/json'
    },
     data: {
        query: `query {
            shop {
                name
              }
          }`,
      },
  };

отклик:

           method: 'post',
     url: 'https://qxxxx.myshopify.com/api/2022-04/graphql.json',
     data: '{"query":"query {\\n            shop {\\n                name\\n              }\\n          }"}'
>    },

Скриншот Shopify graphQL Postman:

Answer 2

Сначала вы должны понять коды ошибок из graphql. Конечная точка graphql всегда возвращает 200, когда POSTбыл успешным, но может возникнуть вложенная ошибка при разрешении вашего запроса.

Во-вторых, ваш запрос с TypedStringArrayпропускает query. Это должно выглядеть так

      const url = 'https://<shop-name>.myshopify.com/api/2021-07/graphql.json'
  const headers = {
    'X-Shopify-Storefront-Access-Token': '<access token>',
    'Content-Type': 'application/json',
  }

await axios.post(
    url, // this is the same as the previous url
    {data : {
       query: `
         query GiveMeMyShop {
           shop {
             name
         }
       }
    `},
    {headers: headers}) // headers are the same as previous headers
  .then((result) => console.log(result))
  .catch((error) => {
      console.log(error.response);
  });

для правильного синтаксиса запроса. Но во всех случаях я рекомендую использовать клиент gql, такой как apollo.