Context for useSubscription

[dan-online]

Describe the bug When specifying context (like in queries and mutations, to provide the bearer token with headers) for useSubscription or subscribeToMore, the provided headers are not sent with the websocket connection, leading to my apollo server being unable to identify the websocket.

To Reproduce Steps to reproduce the behavior:

1. Use useSubscription with options such as below:

const { result } = useSubscription(Document, null, {
  context: { headers: { Authorization: `Bearer ${token}` } }
});

Expected behavior The Authorization header to be sent with the connection websocket

Versions nuxt: 3.0.0-rc.2 vue-apollo: ^3.1.0 @apollo/client: ^3.6.2

Additional context I am using nuxt 3 but both queries and mutations work and this seems to be an issue with this library, one thing I noticed is that context appears in intellisense for options but not on the website

[why-martijn]

I have the same issue, any news on this?

[ochiribogaz]

I have the same issue

[spoilerdo]

I fixed it with the following code. I basically create a new client and memo it in React. It is not the best but it works for now. Mind you that this is only needed if you have a variable context that is not constant troughout the whole application for all subscriptions.

  const { createClient, createWsLink } = useGraphQL();
  const client = useMemo(
    () =>
      createClient(
        createWsLink({
          headers: { [Headers.Role]: permission ?? Permissions.User },
        }),
      ),
    [],
  );

    const subscription = client
      .subscribe<OnSyncTaskSubscription, OnSyncTaskSubscriptionVariables>({
        query: OnSyncTaskDocument,
        variables: { taskId },
      })
      .subscribe((nextResult) => {
         // Do stuff
      });