Nuxt Apollo websockets链接选项？

我正在尝试使用websocket订阅。对于我的服务器（8base.com），我需要随订阅请求一起发送一个

connectionParams

对象

---

Nuxt Apollo似乎有一个

httpLinkOptions

，但我真正需要的是一个

wssLinkOptions

。有人知道用Nuxt做这件事的方法吗？理想情况下，我不必替换Nuxt Apollo，因为我在整个应用程序中都使用它。

根据文档，您可以将订阅设置为WebSocketLink

下面是完整的示例：

Nuxt配置：

// nuxt.config.js
apollo:{
 clientConfigs:{
  default: '~/apollo/client-configs/default.js'
 }
}

默认客户端配置：

// apollo/client-configs/default.js
import { ApolloLink, concat, split } from 'apollo-link'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { WebSocketLink } from 'apollo-link-ws'
import { getMainDefinition } from 'apollo-utilities'
import 'subscriptions-transport-ws' // this is the default of apollo-link-ws

export default (ctx) => {
  const httpLink = new HttpLink({uri: 'https://api.graph.cool/simple/v1/' + process.env.GRAPHQL_ALIAS})
  const authMiddleware = new ApolloLink((operation, forward) => {
    const token = process.server ? ctx.req.session : window.__NUXT__.state.session
    operation.setContext({
      headers: {
        Authorization: token ? `Bearer ${token}` : null
      }
    })
    return forward(operation)
  })
  // Set up subscription
  const wsLink = new WebSocketLink({
    uri: `wss://subscriptions.graph.cool/v1/${process.env.GRAPHQL_ALIAS}`,
    options: {
      reconnect: true,
      connectionParams: () => {
        const token = process.server ? ctx.req.session : window.__NUXT__.state.session
        return {
          Authorization: token ? `Bearer ${token}` : null
        }
      }
    }
  })

  const link = split(
    ({query}) => {
      const {kind, operation} = getMainDefinition(query)
      return kind === 'OperationDefinition' && operation === 'subscription'
    },
    wsLink,
    httpLink
  )

  return {
    link: concat(authMiddleware, link),
    cache: new InMemoryCache()
  }
}

客户端配置订阅应使用Vue Apollo模型：

如果您只需要基础知识，还可以指定您的HTTP和WS-EndPint：

apollo:{
 clientConfigs:{
  default:{
    httpEndpoint: YOUR_ENDPOINT,
    wsEndpoint: YOUR_WS_ENDPOINT
  }
 }
}

---

因此，在尝试了几种不同的方法之后，这似乎是最好的方法。只需使用插件覆盖

wsClient

因此在

numxt.config.js

中：

    plugins: [
        { src: "~/plugins/apollo-ws-client.js", mode: "client" }
    ],
    apollo: {
        clientConfigs: {
            default: "~/plugins/apollo-config-default.js"
        }
    },

export default function() {
    return {
        httpEndpoint: "https://api.8base.com/123456",
        wsEndpoint: "wss://ws.8base.com"
    }
}

在

plugins/apollo config default.js

中：

    plugins: [
        { src: "~/plugins/apollo-ws-client.js", mode: "client" }
    ],
    apollo: {
        clientConfigs: {
            default: "~/plugins/apollo-config-default.js"
        }
    },

export default function() {
    return {
        httpEndpoint: "https://api.8base.com/123456",
        wsEndpoint: "wss://ws.8base.com"
    }
}

然后在

plugins/apollo ws-client.js中

export default ({ app }) => {
    const client = app.apolloProvider.defaultClient
    const token = app.$apolloHelpers.getToken()

    if (token) {
        client.wsClient.lazy = true
        client.wsClient.reconnect = true
        client.wsClient.connectionParams = () => {
            return {
                workspaceId: "123456",
                token: token
            }
        }
    }
}

非常好。
这是我在nuxt.config中直接配置的方式

  modules: [
    '@nuxtjs/apollo',
  ],
  apollo: {
    clientConfigs: {
      default: {
          httpEndpoint: 'your_graphql_url'
      }
    }
  },
  env: {
      WS_URL: 'ws://you_url/ws',
  }

感谢您的好发现，这是旧文档，很好奇它是否有效，但我会尝试一下。我无法理解如何将此示例与Nuxt Apollo当前想要设置Apollo的方式合并：我添加了一些更详细的信息，特别是Nuxt配置如何加载客户端配置订阅。希望它更有用：）是的，但是你如何在上面设置一个标题呢？在nuxt.config上只需添加这些lineshow，你会在上面添加标题吗？我的想法完全被忽视了