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; skip?: boolean; + context?: Context; onSubscriptionData?: (options: OnSubscriptionDataOptions) => any; onSubscriptionComplete?: () => void; }