"this.getClient(...).watchQuery is not a function" - remote schema stitching with Apollo 2 / Next.js : <p>So I'm attempting to stitch multiple remote GraphCMS endpoints together on the clientside of a Next.js app, and after trying/combining about every example on the face of the internet, I've gotten it to a place that's worth asking about. My error:</p>

<p><code>TypeError: this.getClient(...).watchQuery is not a function at GraphQL.createQuery</code></p>

<p><strong><a href="https://github.com/willmeierart/next-apollo-schema-stitching" rel="noreferrer">github repo here</a></strong>, where you can see this initApollo.js in context:</p>

<pre><code>import { ApolloClient } from 'apollo-client'
import {
  makeRemoteExecutableSchema,
  mergeSchemas,
  introspectSchema
} from 'graphql-tools'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import fetch from 'node-fetch'
import { Observable, ApolloLink } from 'apollo-link'
import { graphql, print } from 'graphql'
import { createApolloFetch } from 'apollo-fetch'

let apolloClient = null

if (!process.browser) {
  global.fetch = fetch
}

const PRIMARY_API = 'https://api.graphcms.com/simple/v1/cjfipt3m23x9i0190pgetwf8c'
const SECONDARY_API = 'https://api.graphcms.com/simple/v1/cjfipwwve7vl901427mf2vkog'

const ALL_ENDPOINTS = [PRIMARY_API, SECONDARY_API]

async function createClient (initialState) {
  const AllLinks = ALL_ENDPOINTS.map(endpoint =&gt; {
    return new HttpLink({
      uri: endpoint,
      fetch
    })
  })

  const allSchemas = []

  for (let link of AllLinks) {
    try {
      allSchemas.push(
        makeRemoteExecutableSchema({
          schema: await introspectSchema(link),
          link
        })
      )
    } catch (e) {
      console.log(e)
    }
  }

  const mergedSchema = mergeSchemas({
    schemas: allSchemas
  })

  const mergedLink = operation =&gt; {
    return new Observable(observer =&gt; {
      const { query, variables, operationName } = operation
      graphql(mergedSchema, print(query), {}, {}, variables, operationName)
        .then(result =&gt; {
          observer.next(result)
          observer.complete()
        })
        .catch(e =&gt; observer.error(e))
    })
  }

  return new ApolloClient({
    connectToDevTools: process.browser,
    ssrMode: !process.browser,
    link: mergedLink,
    cache: new InMemoryCache().restore(initialState || {})
  })
}

export default function initApollo (initialState) {
  if (!process.browser) {
    return createClient(initialState)
  }
  if (!apolloClient) {
    apolloClient = createClient(initialState)
  }
  console.log('\x1b[37m%s\x1b[0m', apolloClient)
  return apolloClient
}
</code></pre>

<p>I'm getting useful data all the way up into the <code>.then()</code> inside the <code>Observable</code>, where I can log the <code>result</code></p>
