Dealing with duplicate subscriptions

dustin · September 10, 2020, 9:45am

Hi everyone!
I’m currently working on setting up a subscription in React app using the Apollo 3 client and the useSubscription hook. I’m noticing that whenever I reload the page the subscription gets recreated successfully, but I’m also getting phantom updates over the socket from all previously created subscriptions that seem to still be open. Is this the expected behavior? Is there a way to check for existing subscriptions before recreating another? Not seeing anything in the docs.

Forgive my ignorance if this is something obvious, I’m new to GraphQL land.

balaji · September 10, 2020, 2:07pm

Hey Dustin,

Could you provide me the steps to reproduce the issue. That would help us to debug it quickly.

Thanks

dustin · September 14, 2020, 5:40am

Hi Balaji, I was just now able to reproduce the behavior with these steps

clone the sample chat app following the instructions from here https://github.com/dgraph-io/graphql-sample-apps/tree/master/chat-app-react
reload the page several times after starting the dev server
look at the websocket connections in chrome dev tools and click on “graphql” to see the individual payloads being sent
post a message from the chat app and see that more than one payload with the same data gets received from the subscription.
reload the page again, than post another message from the chat app and see that now there are even more payloads being sent per post

The number of payloads being sent is consistent and only increases after the page is reloaded. I’m assuming that because the useSubscription hook is setting up a new subscription and the server isn’t checking that it already has an open subscription to that same client which is still active because it hasn’t timed out yet? I originally noticed the issue because each duplicate payload to the subscription was triggering a useEffect hook in my app to run multiple times per mutation. It also looks like each payload is costing a full query credit.

Attaching an image of what it looks like in my chrome dev tools when this happens.