GraphQL API работает с почтальоном, но не работает с Javascript

Question

Я построил сервер GraphQL следующим образом,

import express from 'express';
import graphqlHTTP from 'express-graphql';
import { schema } from './data/schema';

const app = express();

app.use(express.static(__dirname + '/public'));
app.get('/', function(req, res) {
  res.sendFile('index.html');
});

app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true
}));

app.listen(8081, () => {
  console.log('Running server on port localhost:8081/graphql');
});

И я могу сделать POST-вызов из Почтальона, как показано ниже,

Однако, когда я пытаюсь вызвать API с помощью fetch в файле app.js, который загружается в файл index.html, следующим образом,

function fetchQuery(query) {
  return fetch('/graphql', {
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  }).then(response => {
    return response.json();
  });
}
const query = `{
  friend {
    firstName
  }
}`;

fetchQuery(query).then((data) => {
  console.log(data);
});

В нем сообщается об следующих ошибках:
app.js: 2 POST http://localhost:8081/graphql 400 (неверный запрос)
и сообщение об ошибке ответа: «Необходимо указать строку запроса».

Answer 1

Заголовки должны передаваться путем предоставления свойства headers в объекте параметров, а не header.

headers: {
  'Content-Type': 'application/json',
},

Тип содержимого для запроса необходим, чтобы body-parser знал, как правильно анализировать тело.Без заголовка тело заканчивается пустым объектом, и поэтому req.body.query не определено, поэтому вы видите эту ошибку.