0

I have no idea why it is happening. I am listening to subscription postAdded which gets published every time I create a post using mutation.

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

The error:

enter image description here

shabenda
  • 1,759
  • 3
  • 14
  • 23

1 Answers1

0

First, this is most likely a server implementation issue. The error is likely being throw by graphql-tools that's your graphql end point.

The exact same thing happened to me while following second part of the Full-stack + GraphQL tutorial on the official blog.

While it is not necessarily the same case, what happened to me was that the tutorial exports the schema object with: export { schema } which is equivalent to export { schema: schema } instead of the usual exports as default, e.g. export default schema

In my graphql server endpoint I import with import schema from './src/schema' which was wrong because schema was exported as a sub object and not the default export. Correct import for my case should have been import { schema } from './src/schema'

TL;DR Check your server code, check your export and import statements. The error message is really misleading but it most likely has to do with module import/ export.

It could have been avoided or giving more explicit information if we were compiling using webpack instead of using babel-node like in the tutorial.

user3363247
  • 76
  • 2