reactjs - GraphQL Subscriptions with Express-GraphQL and React-Apollo -

i've followed apollo's docs setting graphql subscriptions on both client , server, , though i'm 90% there, can't figure out how set subscription channels , how connect mutations channels whenever mutation occurs, server pushes new data client. (for content, i'm making reddit clone people post topics , others comment on it. when see "topics" or "topiclist," think of posts.)

so far, have set apollo client subscriptions successfully:

const wsclient = new subscriptionclient('ws://localhost:3001/subscriptions', {   reconnect: true });  const networkinterface = createnetworkinterface({     uri: '/graphql',     opts: {         credentials: 'same-origin'     } });  const networkinterfacewithsubscriptions = addgraphqlsubscriptions(   networkinterface,   wsclient, );  const client = new apolloclient({     networkinterface: networkinterfacewithsubscriptions,     dataidfromobject: o => o.id }); 

and i've set back-end subscriptions well. here's server.js file:

//=========================================================== //subscription managaer //=========================================================== const pubsub = new pubsub(); const subscriptionmanager = new subscriptionmanager({   schema: schema,   pubsub: pubsub });  //===================================== //websocket + express server //=====================================  const server = createserver(app);  //setup listening port server.listen(3001, ()=>{     new subscriptionserver(     {         subscriptionmanager: subscriptionmanager,         onconnect: (connectionparams, websocket) => {             console.log('websocket connection established');         },         onsubscribe: (message, params, websocket) => {             console.log("the client has been subscribed", message, params);         },         onunsubsribe: (websocket) => {             console.log("now unsubscribed");         },         ondisconnect: (websocket) => {             console.log('now disconnected');         }     },      {         server: server,         path: '/subscriptions',     });     console.log('server hot man!'); }) 

i know these successful, because "websocket connection established" message logged in terminal.

next actual subscription - i've created subscription schema type (just queries , mutations):

const subscriptiontype = new graphqlobjecttype({     name: 'subscription',     fields: () => ({         topicadded: {             type: topictype,             args: {repofullname: {type: graphqlstring}}, //i don't understand repofullname - trying follow apollo docs, never specified             resolve(parentvalue, args){                 return parentvalue;             }          }     }) });  module.exports = subscriptiontype; 

and incorporated root schema. when check out graphiql, see: subscription available in docs side menu my graphiqil ui showing subscriptionschema successfully

in react component, 'subscribe' using apollo's subscribetomore method:

const topics_subscription = gql`     subscription ontopicadded($repofullname: string){         topicadded(repofullname: $repofullname){             id         }     } `;  class topiclist extends component {     componentdidmount() {         this.createmessagesubscription = this.props.data.subscribetomore({           document: topics_subscription,           // updatequery: (previousstate, {subscriptiondata}) => {           //   const newtopic = subscriptiondata.data.topic.node           //   const topics = previousstate.findtopics.concat([newtopic])           //   return {           //     findtopics: topics           //   }           // },           onerror: (err) => console.error(err)         })        } //... 

and "the client has been subscribed" message logged terminal. i'm stuck. i've read setupfunction subscriptionmanager, isn't included in apollo's docs. , can't find how map 'createtopic' mutation subscription whenever adds new topic, pops in topiclist.

i realize long, i've been pulling hair out tyring figure out what's next step. appreciated!! thank reading!

yes missing setup function. take @ links graphql subscription docu or example.

how should work: first need channel on publish changed data. in case this:

const manager = new sub.subscriptionmanager({    schema,    pubsub,      setupfunctions: {      topicadded: (options, args) => ({ // name of graphql subscription        topicaddedchannel: { // name of pubsub publish-tag          filter: (topic) => {            console.log(topic); //should show new topic if there subscribed client            return true; // might want add filter. maybe guest users or          },        },      }),    },  });

and here see need of args: {repofullname: {type: graphqlstring}} argument in subscription. if want filter subscription dependent on "reponame". meaning client subscription "reponame" argument gets update.

next need place call pubsub.publish function. in case after add topic mutation has passed. this:

...    const topic = new topic(/* args */);  topic.save((error, topic) => {    if (!error) {      pubsub.publish("topicaddedchannel", topic);    }    ...  });      ....