diff --git a/README.md b/README.md index a338f9311..7ebde833d 100644 --- a/README.md +++ b/README.md @@ -114,7 +114,7 @@ interface Tab { In addition to this, the React app provides some more properties: - `props` (React Component) -- `createApolloLink` [`(session: Session) => ApolloLink`] - this is the equivalent to the `fetcher` of GraphiQL. For each query that is being executed, this function will be called +- `createApolloLink` [`(session: Session, subscriptionEndpoint?: string) => ApolloLink`] - this is the equivalent to the `fetcher` of GraphiQL. For each query that is being executed, this function will be called `createApolloLink` is only available in the React Component and not the middlewares, because the content must be serializable as it is being printed into a HTML template. diff --git a/packages/graphql-playground-react/src/components/Playground.tsx b/packages/graphql-playground-react/src/components/Playground.tsx index 02ea09e28..41f767ae8 100644 --- a/packages/graphql-playground-react/src/components/Playground.tsx +++ b/packages/graphql-playground-react/src/components/Playground.tsx @@ -84,7 +84,10 @@ export interface Props { fixedEndpoints: boolean headers?: any configPath?: string - createApolloLink?: (session: Session) => ApolloLink + createApolloLink?: ( + session: Session, + subscriptionEndpoint?: string, + ) => ApolloLink workspaceName?: string schema?: GraphQLSchema } diff --git a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx index 4c37feaab..bc53a0903 100644 --- a/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx +++ b/packages/graphql-playground-react/src/components/PlaygroundWrapper.tsx @@ -57,7 +57,10 @@ export interface PlaygroundWrapperProps { config?: GraphQLConfig configPath?: string injectedState?: any - createApolloLink?: (session: Session) => ApolloLink + createApolloLink?: ( + session: Session, + subscriptionEndpoint?: string, + ) => ApolloLink tabs?: Tab[] schema?: { __schema: any } // introspection result codeTheme?: EditorColours diff --git a/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts b/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts index 40df8be95..b45d1fcbb 100644 --- a/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts +++ b/packages/graphql-playground-react/src/state/sessions/fetchingSagas.ts @@ -40,7 +40,7 @@ import { safely } from '../../utils' import { set } from 'immutable' // tslint:disable -let subscriptionEndpoint = '' +let subscriptionEndpoint export function setSubscriptionEndpoint(endpoint) { subscriptionEndpoint = endpoint @@ -58,7 +58,7 @@ export interface Headers { export const defaultLinkCreator = ( session: LinkCreatorProps, - wsEndpoint?: string, + subscriptionEndpoint?: string, ): { link: ApolloLink; subscriptionClient?: SubscriptionClient } => { let connectionParams = {} const { headers, credentials } = session @@ -73,20 +73,15 @@ export const defaultLinkCreator = ( credentials, }) - if (!(wsEndpoint || subscriptionEndpoint)) { + if (!subscriptionEndpoint) { return { link: httpLink } } - const finalSubscriptionsEndpoint = wsEndpoint || subscriptionEndpoint - - const subscriptionClient = new SubscriptionClient( - finalSubscriptionsEndpoint, - { - timeout: 20000, - lazy: true, - connectionParams, - }, - ) + const subscriptionClient = new SubscriptionClient(subscriptionEndpoint, { + timeout: 20000, + lazy: true, + connectionParams, + }) const webSocketLink = new WebSocketLink(subscriptionClient) return { @@ -138,7 +133,7 @@ function* runQuerySaga(action) { credentials: settings['request.credentials'], } - const { link, subscriptionClient } = linkCreator(lol) + const { link, subscriptionClient } = linkCreator(lol, subscriptionEndpoint) yield put(setCurrentQueryStartTime(new Date())) let firstResponse = false