" this.getClient(...)。watchQuery不是一个函数" - 使用Apollo 2 / Next.js进行远程模式拼接

时间:2018-04-03 18:59:16

标签: reactjs graphql apollo react-apollo next.js

所以我试图在Next.js应用程序的客户端上拼接多个远程GraphCMS端点,在尝试/组合互联网上的每个示例之后,我已经得到了它一个值得询问的地方。我的错误:

TypeError: this.getClient(...).watchQuery is not a function at GraphQL.createQuery

github repo here ,您可以在上下文中看到此initApollo.js:

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 => {
    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 => {
    return new Observable(observer => {
      const { query, variables, operationName } = operation
      graphql(mergedSchema, print(query), {}, {}, variables, operationName)
        .then(result => {
          observer.next(result)
          observer.complete()
        })
        .catch(e => 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
}

我在.then()Observable内获取有用数据,我可以在result中记录=DIVIDE($A1,5)

0 个答案:

没有答案