Apollo/Graphql Subscriptions when Adding

apollo
1

Hello there,

I am trying to work with apollo and a mysql database. I have a table “systems” from which i can already get the data and update it (with pubsub working). So if I make a change to a system-item, I can see the changes live.

Now I cannot get the app to show live changes for when adding a system-item. The mutation works (so the item gets added to the DB), but I have to refresh the app to show the changes.

I basically followed this guide: https://medium.com/@michaelcbrook/how-to-get-apollo-2-0-working-with-graphql-subscriptions-321388be030c

My relevant parts look as follow (only for adding):

RESOLVERS
Mutation:

addSystemMutation(obj, args, context) {
       System.create({ args });
      pubsub.publish("addSystemSub", { addSystemSub: args }); 
      return args;
    },

Subscription:

  addSystemSub: {
      subscribe:  () => pubsub.asyncIterator('addSystemSub'),
    },

SCHEMA


	type System {
	  id: ID
	  description: String
	}


type Query {
  systems: [System]
}

type Subscription {
  addSystemSub: System
}

type Mutation {
  addSystemMutation(id: ID!,  description:String): System
}

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

Now in my Body ONCREATED Template i subscribe like this:

this.gqlSubscribe({ query: GET_ALL_SYSTEMS_SUBSCRIPTION, });

Where “GET_ALL_SYSTEMS_SUBSCRIPTION” is:
subscription addSystemSub { addSystemSub { id description } }

I hope this is understandable and someone can help me out. I will gladly provide more info if needed.

Thanks in Advance
Chris

2

Just to give you all parts, that might be relevant (using swydo:blaze-apollo):


Template.body.helpers({
  system() {
  if(Template.instance().system)
    return Template.instance().system.get().system;
  else
	return "";
  },


 systems() {
  if(Template.instance().system)
    return Template.instance().AllSystems.get().systems; 
  else
	return "";
  }

});
3
  1. Please use ‘```’ to wrap your code and format it nicely for us to see here
  2. What is the error, what doesn’t work ? Just the live part ? Is the data sent via websocket ?
4

Hey there,

thanks for the reply.

I formatted my text above, let me know if it needs further formatting.

So to clear up my what my problem is:

Updating my ‘System’ does a live update. So I can call the mutation in my graphIql and see the changes live on my app.

I want the same thing to happen, when i add a ‘System’ -> so when I add a system per mutation, it should be added live to my list of systems in the app. Currently, i have to refresh the page to reflect my changes.

I do not know how to check whether the data is sent via websocket. I tried to check the “network” tab of chrome dev tools, but I am really not sure how to go on from there (i am new to this). I filtered by ‘WS’ and did not get anything after calling my graphiql mutations. So i cannot give you an educated answer… maybe you can give me a little help here?

Thank you very much

Chris

UPDATE: So i figured I have to filter by “WS”, then choose subscription (requesturl: ws://localhost:3000/subscriptions) and then pick a frame. Thing is, there are no frames. Not even when calling my update mutation (which works).

5

@saftig your update mutation works because it’s the Optimistic UI at play from Apollo. Websockets do not work. To test this out, you can try the update from another Tab, and you’ll see it’s not reflected.

I am really not familiar about your internals, but my guesses are:

  1. You did not setup a propper subscription link
  2. You don’t have websockets enabled on the server to work with Meteor

I recommend you checkout https://github.com/cult-of-coders/apollo for defining your server. It has built-in authentication and subscription support, + works with live Queries in React. If you want to keep using Blaze it’s no problem you can still use blaze-apollo as it does not matter.

2 Likes
6

thank you very much. As soon as i get home, I will look deeper into this new package.

Although I have to say, updating from another tab did seem to work. But I still think the websockets are the problem here.

I will reply as soon as I tried this.
Thank you again.

7

Hello there,

so I checked out the package you recommended. And I am feeling like it is getting better.

So first of all I changed the setup of my server like so:

import { initialize } from 'meteor/cultofcoders:apollo';
import { load } from 'graphql-load';
 load({typeDefs,resolvers});
initialize();

and my client like so:

import { initialize } from 'meteor/cultofcoders:apollo';
import { setup } from 'meteor/swydo:blaze-apollo';
 const {client} = initialize();
setup( {client});

I DID NOT CHANGE MY RESOLVERS. I AM STILL USING PUBSUB FROM ‘graphql-subscriptions’:
pubsub.publish(“addSystemSub”, args ); and pubsub.asyncIterator('addSystemSub');

and I can finally test the suscription in localhost:3000/graphql. It seems to work (testing the sub in graphiql did not work before).

If i use this instead of pubsub:
import { asyncIterator } from 'apollo-live-server';

I get the error message “observable.observeChanges is not a function”.

But it does not make sense to keep using the pubsub from ‘graphql-subscriptions’ right?

I could not really find help in the documentation, as I am confused how the whole publish/subscribe thing works in the cultofcoders package.

Maybe you can help me again here.

Thank you very much
Chris

UPDATE:
I tested a bit further with my implementation (with pubsub).
I feel like its working already, but the problem is my templates. (aka blaze)

I get updates, I see them in the network tab (finally). But the changes still dont get reflected live.

Template.menu.onCreated(function menuOnCreated() {
   this.gqlSubscribe({
    query: GET_ALL_SYSTEMS_SUBSCRIPTION,
  });
  this.allSystems = this.gqlQuery({
      query: GET_ALL_SYSTEMS,
    });
});

the gqlsubscribe does not seem to work anymore (from swydo:blaze-apollo).

8

Hello there,

I am almost certain the subbing works, but the app does not show the results live.

{data: {addSystemSub: {id: "123", description: "test", name: "test", __typename: "System"}}}

Is this the expected payload, when adding something? Its what i get in my network frames. It looks right to me.
Also, this only appears when I am subbing through my template - so the subscription of my template should also work.

Somehow, I still do not see the changes live. The Template does not jump into this function again:

systems(){
		return Template.instance().gqlQuery({ query: GET_ALL_SYSTEMS }).get().systems;

Do you got any idea what my problem could be?

Regards
Chris