FabioCosta FabioCosta - 1 year ago 103
Javascript Question

Apollo server + React Apollo pubSub not showing data

After a mutation I can't seem to receive the pubSub data on my react front end

I have the following Graphql schema:

type SSiD {
id: ID!
name: String
status: String
hidden: Boolean
type Subscription {
SSiDAdded: SSiD

On my apolloServer after the mudation I send the pubSub data like this

const data = result.dataValues
data.__typename = 'SSiD'
context.pubsub.publish('SSiDAdded', data)

That console.log will output:

{ id: 2208,
name: 'FooBar',
hidden: true,
status: 'broadcasting',
updatedAt: 2016-10-27T22:07:09.119Z,
createdAt: 2016-10-27T22:07:09.119Z,
__typename: 'SSiD' }

And finally on my react front end I have the following:

const query = gql`
subscription ssidList{
this.subscriptionObserver = this.props.client.subscribe({
next (data) {
console.log('The subscription data', data)
error (err) {
console.error('Error subscription', err)


On the console.log above subscription data is always null.

Am I wrapping the response wrong or something like that?

Answer Source

Here a couple things to check. On my schema, it has some syntax I'm not seeing in yours at the moment. See the : instant_message after the query strings?

const typeDefinitions = [`

type instant_message {
  id: Int
  fromID: String
  toID: String
  msgText: String
type Query {
  instant_message(id: Int, fromID: String, toID: String, msgText: String): [instant_message]
type Mutation {
    fromID: String!
    toID: String!
    msgText: String!
  ): instant_message
type Subscription {
  # Subscription fires on every comment added
  IMAdded(id: Int, fromID: String!, toID: String!): instant_message

schema {
  query: Query,
  mutation: Mutation
  subscription: Subscription


I've got some different syntax on the client as well:

subscribe(fromID, toID, updateQueryViaSubscription) {
    const SUBSCRIPTION_QUERY = gql`
      subscription getIMsViaSubscription($fromID: String!, $toID: String!){
          IMAdded(fromID:$fromID, toID: $toID){
    this.subscriptionObserver = this.props.client.subscribe({
        query: SUBSCRIPTION_QUERY,
        variables: { fromID: this.fromID, toID: this.toID },
        next(data) {
            const newMsag = data.IMAdded;
            updateQueryViaSubscription((previousResult) => {
                // if it's our own mutation, we might get the subscription result
                // after the mutation result.
                // if (isDuplicateIM(newComment, previousResult.entry.comments)) {
                //     return previousResult;
                // }
                // update returns a new "immutable" list with the new comment
                // added to the front.
                return update(
                        instant_message: {
                            $push: [newMsag],
        error(err) {
            console.error('err', err); },

Please check that and let me know if the updated code gets rid of that error yet.

UPDATE: Per our discussion on Slack, you found that you needed your executableSchema to be like this:

const executableSchema = makeExecutableSchema({
    typeDefs: typeDefinitions,
    resolvers: Resolvers,
    connectors: Connectors,
    logger: console,

export default executableSchema;

Here's the resolver I'm using:

Subscription: {
    IMAdded(IMThatWasAdded) {
        var ret = IMThatWasAdded;
        return ret;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download