How to remove subscription?

Hi, probably a dumb question, but I didn’t find the answer for it yet. How do I force unsubscribtion using react hooks?

i.e. I have this functional component

function ({ query, queryType }) {

        const [result] = useSubscription({
            query: query,
        })

        const data = result.data && result.data[queryType];

        useEffect(() => {
            console.log("unsubscribe from previous sub")
        }, [queryType])

        return data ? <Component data={data} /> : <>No data</>
}

I want to unsubscribe from previous subscription, when queryType changes and useEffect is triggered. Is there a way to do it?

[svkior]

@JoviDeCroock tomorrow we will extract the peace of our current project into separate repo and I will provide the link in this issue

btw in appolo-client there is no problem with unsubscribe, but appolo client has performance issues

[JoviDeCroock]

Hey @vicsnow

There are no dumb questions 😄 , so on useQuery and useSubscription we have a property called pause that can be passed as an option, similar to how you’re passing query at this time.

Let’s say you want to pause when queryType is not “sub” then we can do:

function ({ query, queryType }) {

        const [result] = useSubscription({
            query: query,
            pause: queryType !== 'sub',
        })

        const data = result.data && result.data[queryType];

        return data ? <Component data={data} /> : <>No data</>
}

Now the subscription will be torn down until you unpause it.

Linearly, if your query is dependent on variables it will unsubscribe and resubscribe to the new variables when you change them.