diff --git a/src/react/data/SubscriptionData.ts b/src/react/data/SubscriptionData.ts
index de7b41a4e3e..8e74a97920c 100644
--- a/src/react/data/SubscriptionData.ts
+++ b/src/react/data/SubscriptionData.ts
@@ -82,7 +82,8 @@ export class SubscriptionData<
this.currentObservable.query = this.refreshClient().client.subscribe({
query: options.subscription,
variables: options.variables,
- fetchPolicy: options.fetchPolicy
+ fetchPolicy: options.fetchPolicy,
+ context: options.context,
});
}
diff --git a/src/react/hooks/__tests__/useSubscription.test.tsx b/src/react/hooks/__tests__/useSubscription.test.tsx
index 3ffeccd19ee..a18e2526794 100644
--- a/src/react/hooks/__tests__/useSubscription.test.tsx
+++ b/src/react/hooks/__tests__/useSubscription.test.tsx
@@ -2,7 +2,7 @@ import React from 'react';
import { render, cleanup, wait } from '@testing-library/react';
import gql from 'graphql-tag';
-import { ApolloClient } from '../../../core';
+import { ApolloClient, ApolloLink, concat } from '../../../core';
import { InMemoryCache as Cache } from '../../../cache';
import { ApolloProvider } from '../../context';
import { MockSubscriptionLink } from '../../../testing';
@@ -293,4 +293,71 @@ describe('useSubscription Hook', () => {
expect(renderCount).toEqual(7);
});
});
+
+ it('should share context set in options', async () => {
+ const subscription = gql`
+ subscription {
+ car {
+ make
+ }
+ }
+ `;
+
+ const results = ['Audi', 'BMW'].map(make => ({
+ result: { data: { car: { make } } }
+ }));
+
+ let context: string;
+ const link = new MockSubscriptionLink();
+ const contextLink = new ApolloLink((operation, forward) => {
+ context = operation.getContext()?.make
+ return forward(operation);
+ });
+ const client = new ApolloClient({
+ link: concat(contextLink, link),
+ cache: new Cache({ addTypename: false })
+ });
+
+ let renderCount = 0;
+ const Component = () => {
+ const { loading, data, error } = useSubscription(subscription, {
+ context: {
+ make: 'Audi',
+ },
+ });
+ switch (renderCount) {
+ case 0:
+ expect(loading).toBe(true);
+ expect(error).toBeUndefined();
+ expect(data).toBeUndefined();
+ break;
+ case 1:
+ expect(loading).toBe(false);
+ expect(data).toEqual(results[0].result.data);
+ break;
+ case 2:
+ expect(loading).toBe(false);
+ expect(data).toEqual(results[1].result.data);
+ break;
+ default:
+ }
+ setTimeout(() => {
+ renderCount <= results.length &&
+ link.simulateResult(results[renderCount - 1]);
+ });
+ renderCount += 1;
+ return null;
+ };
+
+ render(
+
+
+
+ );
+
+ return wait(() => {
+ expect(renderCount).toBe(3);
+ expect(context).toEqual('Audi');
+ });
+ });
});
diff --git a/src/react/types/types.ts b/src/react/types/types.ts
index 2ebfebce434..00aa6bb449f 100644
--- a/src/react/types/types.ts
+++ b/src/react/types/types.ts
@@ -230,6 +230,7 @@ export interface BaseSubscriptionOptions<
| ((options: BaseSubscriptionOptions) => boolean);
client?: ApolloClient