send the subscription endpoint as parameter to link creator

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.
 

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
 }

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

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