Subscriptions-transport-ws: Need some help please...

Created on 18 Sep 2019  路  3Comments  路  Source: apollographql/subscriptions-transport-ws

I'am pretty exited to use Graphql subscription but i can't seam to get any basic functionality without a some tweeking...

Issues
1) Connection not connecting for some reason on chrome...
on firefox it works just fine..
tried

  • setting lazy to both true and false
  • setting reconnect to both true and false
const wslink = new SubscriptionClient('ws://192.168.1.2:8080/graphql/default', { 
    lazy: true,
    reconnect:false, 
    connectionParams:{
        headers:{
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content,
        }
    },
});

console warning

WebSocket is closed before the connection is established

2) React subscribeToMore starts subscription for given query first time and after component has unmounted and remounted and prev state cleaned up.... subscribeToMore sending stop with id without a start
This one is hard to reproduce since it happens randomly or when i fuzz the component by mounting and remounting many times

function MoreSomthing(props){

   { data, subscribeToMore } = useQuery(SOME_LIST_ITEMS_QUERY);

   useEffect(() => {
      if(!data)
           return;
      let unsubscribe = subscribeToMore({document:MORE, variables:{cursor:data.connection.pageInfo.endCursor}, updateQuery:(rev, data)=>{
        console.log(data)
    }})
      return () => unsubscribe();

   }, [props.id, data] );

}

websocket messages

{"id":"10","type":"start","payload":{"variables":{"cursor":"9"},"extensions":{},"operationName":null,"query":"subscription ($cursor: String) {\n  connection(cursor: $cursor) {\n    id\n  }\n}\n"}}
{"id":"11","type":"stop"}
{"id":"12","type":"stop"}
{"id":"13","type":"stop"}

Tried:

  • First i thought the component wasn't unmounting to I set the id as the component key like <MoreSomething key={id} id={id}/>
  • I set an console log after subscribe and checked if subscription was even started and it logs but start subscription was never sent..

Issuse 2 became more observable after i fixed Issue (1) with a hack i found on the issues page https://github.com/apollographql/subscriptions-transport-ws/issues/377#issuecomment-375567665.

wslink.maxConnectTimeGenerator.duration = () => wslink.maxConnectTimeGenerator.max

Most helpful comment

I have the same issue. It doesn't work in Google Chrome but works fine in Microsoft Edge. I use Google Chrome version 77.0.3865.90 (Official Build) (64-bit). Could somebody help?

All 3 comments

I have the same issue. It doesn't work in Google Chrome but works fine in Microsoft Edge. I use Google Chrome version 77.0.3865.90 (Official Build) (64-bit). Could somebody help?

There is no good example anywhere to show someone how to get Subs working the new clients. Hopefully someone will be nice enough to write a document.

When it's not working in chrome, and it's working with other browsers, it's likely the Sec-WebSocket-Protocol header is not se to graphql-ws from the server. At least that was a problem I recently encountered.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

myyellowshoe picture myyellowshoe  路  6Comments

mjasnikovs picture mjasnikovs  路  5Comments

csillag picture csillag  路  5Comments

altschuler picture altschuler  路  4Comments

nickofthyme picture nickofthyme  路  3Comments