0

我不知道为什么会这样。我正在收听postAdded每次使用突变创建帖子时都会发布的订阅。

import React, { Component } from 'react'
import { graphql, gql } from 'react-apollo'

class App extends Component {
  componentDidMount() {
    this.props.subscribeToNewPosts()
  }

  render() {
    return (
      <div>
        <h1>Hello world</h1>
        {console.log(this.props)}
      </div>
    )
  }
}

const Query = gql`
  query Posts {
    posts {
      id
      title
      content
      author {
        firstName
        lastName
      }
    }
  }
`

const Subscription = gql`
  subscription postAdded {
    postAdded {
      id
      title
      content
      author {
        firstName
        lastName
      }
    }
  }
`

App = graphql(Query, {
  name: 'posts',
  props: props => {
    return {
      subscribeToNewPosts: () => {
        return props.posts.subscribeToMore({
          document: Subscription,
          updateQuery: (prev, { subscriptionData }) => {
            if(!subscriptionData.data) {
              return prev
            }

            const newPost = subscriptionData.data.postAdded

            console.log(newPost)

            return {
              ...prev,
              posts: [...prev.posts, newPost]
            }
          }
        })
      },
      posts: props.posts
    }
  }
})(App)

export default App

错误：

在此处输入图像描述

4

1 回答 1

0

首先，这很可能是服务器实现问题。该错误可能是由您的 graphql 端点的 graphql-tools 引发的。

在关注官方博客上的Full-stack + GraphQL教程的第二部分时，我也发生了完全相同的事情。

虽然情况不一定相同，但发生在我身上的是本教程使用以下方式导出模式对象：export { schema }这相当于export { schema: schema }而不是通常的默认导出，例如export default schema

在我的 graphql 服务器端点中，我导入的import schema from './src/schema'那个是错误的，因为架构是作为子对象导出的，而不是默认导出。我的案例的正确导入应该是import { schema } from './src/schema'

TL;DR 检查您的服务器代码，检查您的导出和导入语句。该错误消息确实具有误导性，但很可能与模块导入/导出有关。

如果我们使用 webpack 而不是像教程中那样使用 babel-node 进行编译，则可以避免或提供更明确的信息。

于 2017-07-04T03:30:34.947 回答