websocket - Nuxt Apollo websockets 链接选项？

Question

我正在尝试使用 Nuxt Apollo 获取 websocket 订阅。对于我的服务器 (8base.com)，我需要随订阅请求一起发送 connectionParams 对象。

看起来 Nuxt Apollo 有一个 httpLinkOptions 但我真正需要的是 wssLinkOptions 。有人知道用 Nuxt 做到这一点的方法吗？理想情况下，我不必替换 Nuxt Apollo，因为我在整个应用程序中都在使用它。

Answer 1

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

https://www.npmjs.com/package/@nuxtjs/apollo/v/3.0.4#example-with-subscription-graphcool-as-example

  // 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
        }
      }
    }
  })

这是完整的例子:

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 模型: https://apollo.vuejs.org/guide/apollo/subscriptions.html#setup

如果您只需要基础知识，您也可以只指定您的 HTTP 和 WS 端点:

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