Shopify GraphQL, используя fetch API, возвращает пустой json, ошибок нет - PullRequest
Новая
       29

Shopify GraphQL, используя fetch API, возвращает пустой json, ошибок нет

0 голосов
/ 20 октября 2018

Попытка просто получить имя моего магазина в компоненте React с использованием API Fetch и конечной точки GraphQL Shopify.

Я создал магазин Shopify, дал разрешения API-интерфейсу Storefront и создал его в моем разделе componentDidMount() моего компонента реакции.

let query = '{ shop { name } }';
console.log(JSON.stringify(query));

fetch('https://myStoreName.myshopify.com/api/graphql', {
        method: "POST",
        headers: {
            "Content-Type": "application/graphql",
            "X-Shopify-Storefront-Access-Token": "<My API Key>"
        },
        body: JSON.stringify(query),
    })
  .then(function(myJson) {
    console.log('fetched');
    console.log(JSON.stringify(myJson));
  });

Вывод журнала моей консоли: 

"{ shop { name } }"
App.js:21 fetched
App.js:22 {}

Я даже не получаю сообщение об ошибке, заставляет меня думать, что это возможно?Но не можете найти название моего магазина в этом запросе?

Я думаю, что в целом я не знаю лучших практик для создания запроса GraphQL в Javascript.Я делаю большую строку или просто обычный JSON для ее представления?

* Также я сейчас пытаюсь не использовать клиентскую библиотеку graphQL, а просто использовать API выборки.

1 Ответ

0 голосов
/ 20 октября 2018

Вы не можете прочитать ответ, который вызов fetch разрешает прямо так.Вместо этого вы должны вызывать любой метод, подходящий для типа mime, который вы выбираете.Из документов Mozilla:

Как только ответ получен, существует ряд методов, позволяющих определить, что такое содержание тела и как оно должно обрабатываться.

Для JSON вы вызываете метод json.Вы можете увидеть больше примеров здесь .Это означает, что ваш код должен выглядеть примерно так: 

fetch(...)
  .then(res => res.json())
  .then(console.log)

Также имейте в виду, что вам не нужно stringify ваш запрос.Вам, вероятно, следует использовать тип содержимого application/json (который, я считаю, является стандартным) и обернуть ваш запрос внутри объекта следующим образом. 

body: { query },

Тогда, если у вас есть переменные, они могут быть включены в тот жеобъект: 

body: { query, variables }
...