Реакция с GraphQL: TypeError: синтаксический анализ не является функцией

В настоящее время я пытаюсь заменить свой спокойный вызов для получения всех моих articles с сервера вызовом конечной точки graphql. Я протестировал следующий запрос с помощью GraphiQL, и он возвращает ожидаемые данные. Я также отправил конечную точку вручную с помощью fiddler, и она работает, как и ожидалось. Моя проблема заключается в попытке вызвать конечную точку из компонента реакции с помощью Apollo.

В настоящее время я получаю следующую ошибку:

TypeError: parse is not a function

пример данных, которые возвращаются из моего запроса graphql:

{
  "data": {
    "articles": [
      {
        "id": 1,
        "description": "desc1"
      },
      {
        "id": 2,
        "description": "desc2"
      }
    ]
  }
}

и компонент полностью:

import React, { Component } from 'react';
import { Glyphicon } from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import { Query } from "react-apollo";
import gql from "graphql-tag";

export class ArticlesIndex extends Component {
  displayName = ArticlesIndex.name

  constructor(props) {
    super(props);
    this.state = { articles: [], loading: true };
  }

  componentDidMount () {
      <Query
        query = {gql`
        query GetArticleData {
          articles {
            id
            description
          }
        }
        `}
      >
    {({ loading, error, data }) => {
      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error :(</p>;

        console.info(data.articles);
        this.setState({articles: data.articles, loading: false});
    }}
      </Query>
  }

  renderArticlesTable = articles => {
    return (
      <table className='table'>
        <thead>
          <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Description</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {articles.map(article =>
            <tr key = {article.id}>
              <td>{article.id}</td>
              <td>{article.title}</td>
              <td dangerouslySetInnerHTML = {{ __html: article.description }}></td>
              <td>
                <LinkContainer to = {'/articles/edit/' + article.id}>
                    <Glyphicon glyph='edit' />
                </LinkContainer>
            </td>
            <td onClick = {(e) => this.deleteArticle(e, article.id) }>
              <Glyphicon glyph='trash' />
            </td>
            </tr>
          )}
        </tbody>
      </table>
    );
  }

  render() {
    let contents = this.state.loading
      ? <p><em>Loading...</em></p>
      : this.renderArticlesTable(this.state.articles);

    return (
      <div>
        <h1>Articles</h1>
        <LinkContainer to = {'/articles/create'}>
          <button type = "button" className = "btn btn-default">New Article</button> 
        </LinkContainer>
        {contents}
      </div>
    );
  }

  deleteArticle(event, id) { 
    fetch('https://localhost:44360/api/articles/' + id, {  
        method: 'DELETE'
    }).then((response) => response.json())  
        .then((responseJson) => {  
            var deletedId = responseJson.id;

        this.setState({
          articles: this.state.articles.filter(function( obj ) {
            return obj.id !== deletedId;
          })
        });

    })  
  }
}

Обратите внимание, что мои точки останова не срабатывают на стороне сервера, и на сервер не делается никаких запросов.

В App.js я настроил ApolloClient и ApolloProvider следующим образом:

client = new ApolloClient({
    uri: "https://localhost:44360/graphql"
  });

  render() {
    return (
      <ApolloProvider client = {this.client}>
        <Layout>
          <Route exact path='/' component = {Home} exact = {true} />
          <Route path='/articles' component = {ArticlesIndex} exact = {true} />
          <Route path='/articles/create' component = {ArticlesCreate} exact = {true} />
          <Route path='/articles/edit/:id' component = {ArticlesEdit} exact = {true} />
        </Layout>
      </ApolloProvider>
    );
  }

Почему это происходит и как я могу это преодолеть?

Обновлено: как я видел в другом месте, я понизил пакет graphql npm до версии 0.12.3, и это не привело к ошибкам в консоли или иным образом, но экран остается на Loading... по-прежнему без отправки запроса на сервер.

Обновлено еще раз: теперь я пробовал все обходные пути, перечисленные в здесь, и после попытки изменить конфигурацию веб-пакета страница не будет выдавать ошибку, как раньше, однако запрос по-прежнему не отправляется на сервер, и Loading... навсегда остается на странице. Точки останова в моей функции componentDidMount срабатывают, но, похоже, ничего не происходит.

РЕДАКТИРОВАТЬ 3: Если я заменю вызов graphql для получения данных следующим спокойным вызовом, все будет вести себя как обычно, но целью этого проекта является изучение реакции с помощью graphql. Успокаивающий вызов, который работает правильно и который я пытаюсь заменить, приведен ниже:

fetch('https://localhost:44360/api/Articles/')
      .then(response => response.json())
      .then(data => {
        this.setState({ articles: data, loading: false });
      });