Что я делаю неправильно? Uncaught TypeError: Object (...) не является функцией - React GraphQL

Question

Я читал в других сообщениях, что для решения этой проблемы мне нужно установить «реагировать»: «16.8.0» и «реагировать-дом»: «16.8.0», я уже сделал это, и ошибка сохраняется-

Это первый раз, когда возится с GraphQL, вот мой код (упрощенно)

import React from 'react'
import { Query } from 'react-apollo'
import { gql } from 'graphql-tag'

const Header = () => (     
      <Query query={
         gql`
          {
            menu(id: "TWVudToy") {
              menuId            
            }
          }`
      }>

        { 
          ({ loading, error, data }) => {
            console.log(data)
            return <div>ff</div>
        }

        }
      </Query>

)

export default Header

Полная ошибка

Uncaught TypeError: Object(...) is not a function
    at Header (index.js:40)
    at renderWithHooks (react-dom.development.js:12740)
    at mountIndeterminateComponent (react-dom.development.js:14670)
    at beginWork (react-dom.development.js:15194)
    at performUnitOfWork (react-dom.development.js:18780)
    at workLoop (react-dom.development.js:18820)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at replayUnitOfWork (react-dom.development.js:18052)

Answer 1

Использовать импорт по умолчанию из graphql-tag, например:

import gql from 'graphql-tag'

Answer 2

Если вы используете GraphQL, это должна быть директива, поэтому:

<Query query={
   gql`
     {
       menu(id: "TWVudToy") {
...

Должно быть

<Query query={
  gql`
    query menu(id: 'TWVudToy') {
...

Это, и действительно, вы должны абстрагировать код запроса. Так что-то вроде этого:

const MY_QUERY = gql`
  ...

Тогда это сделает ваш запрос более читабельным:

<Query query={MY_QUERY} variables={...