Question

我做错了什么？ - 未捕获的 TypeError：Object（...）不是一个函数 - React GraphQL

2020-02-17

1843

reactjs graphql

我在其他帖子中看到，要解决这个问题，我需要安装“react”：“16.8.0”和“react-dom”：“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'

thedude

2020-02-17

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={...