如何以与@nuxt/apollo subscribeToMore 一起使用的方式设置我的 nuxt

Posted 2023-03-10

【中文标题】如何以与@nuxt/apollo subscribeToMore 一起使用的方式设置我的 nuxt

【英文标题】：How do I setup my nuxt in a way that with @nuxt/apollo subscribeToMore works

【发布时间】：2021-08-15 17:48:18

【问题描述】：

在我们的 nuxt 项目中使用 @nuxt/apollo 时。由于某种原因，我不断得到

期待一个已解析的 GraphQL 文档。也许您需要将查询字符串包装在“gql”标签中？ http://docs.apollostack.com/apollo-client/core.html#gql

作为来自 Nuxt 的错误消息。 我使用以下语法：

apollo: 
  items: 
    $subscribeToMore: 
        // below is the subscription query.
        document: gql`
         subscription($Group: String!)
           agents(Group: $Group)
             _id
             name
            
           
        `,
        variables () 
          return 
            Group: Object.keys(this.$auth.user.app_access)[0],
          
        ,
        updateQuery: (previousResult,  subscriptionData ) => 
          console.log(subscriptionData);
          return subscriptionData.data; 
        
      ,
   
,

我的 apollo 配置如下所示：

module.exports = function (ctx) 
  const httpEndpoint = ctx.route.path.includes('/app/cmb') ? process.env.GRAPHQL_HTTP_ENDPOINT : process.env.GRAPHQL_HTTP_ENDPOINT_IAM
  const wsEndpoint = ctx.route.path.includes('/app/cmb') ? process.env.GRAPHQL_WS_ENDPOINT : process.env.GRAPHQL_WS_ENDPOINT_IAM
  return 
    httpEndpoint,
    wsEndpoint,
    tokenName: 'auth._token.keycloak',
    inMemoryCacheOptions: 
      addTypename: false,
    ,
    fetchOptions:  mode: 'no-cors' ,
    authenticationType: 'Bearer',
    getAuth: (tokenName) => 
      if (process.client) 
        return localStorage.getItem(tokenName)
       else 
        // get token from cookie in server side request
        return this.__VUE_s-s-r_CONTEXT__.req.headers.cookie.split('; ').reduce((acc, item) => 
          const split = item.split('=')

          if (split[0] === tokenName) 
            acc = decodeURIComponent(split[1]) // decode cookie value
          

          return acc
        , '')
      
    ,
    credentials: 'include'
  

在 nuxt.config 我有以下内容：

apollo: 
    clientConfigs: 
      default: '~/apollo.config.js'
    ,
    authenticationType: 'Bearer',
    tokenName: 'auth._token.keycloak'
  ,

package.json 中的 nuxt apollo："@nuxtjs/apollo": "^4.0.1-rc.5",

有人可以告诉我如何设置正确的方式来进行多个订阅。只有一个订阅可以正常工作，但是当我想使用 subscribeToMore 添加多个订阅时，事情就会变得混乱。

【问题讨论】：

抱歉，这不是问题所在。我已经这样做了。

【参考方案1】：

您是否导入了gql

import gql from 'graphql-tag'

如 vue-apollo 文档中所示：https://apollo.vuejs.org/guide/apollo/queries.html#simple-query

【讨论】：

我做到了。这不是问题。