Nuxt：选择默认以外的客户端配置答案

【问题标题】：Nuxt: choose client config other than defaultNuxt：选择默认以外的客户端配置
【发布时间】：2019-12-30 05:17:29
【问题描述】：

我正在使用 Nuxt 和 Nuxt-Apollo 创建我的 Vue 应用程序。我的nuxt.config.js 文件中有以下阿波罗配置：

apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'http://localhost:8000/graphql/'
      },
      stage: {
        httpEndpoint: 'https://example-stage.com/graphql/'
      }
      prod: {
        httpEndpoint: 'https://example.com/graphql/'
      }
    }
  }

如何指向 stage 或 prod 配置。每次我运行应用程序时，它都指向default 配置。必须有我可以设置的地方。

【问题讨论】：

它们不是不同的环境，而是不同的连接。使用 process.env 变量在每个环境中设置 default 值。
nuxtjs.org/api/configuration-env
@Ohgodwhy 所以我应该删除舞台和产品配置并将默认配置设置为这样的：httpEndpoint: process.env.apollo_endpoint
是的。正是你应该做的。
@Ohgodwhy 如果你把它写成答案，我会接受它

标签： javascript vue.js nuxt.js apollo vue-apollo

【解决方案1】：

假设您尝试访问多个客户端，而不仅仅是针对 prod 和 dev 的不同客户端，这可能会有所帮助，就像我在当前项目中使用的一样。

    apollo: {
      includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
      authenticationType: 'Basic', // optional, default: 'Bearer'
      errorHandler: '~/apollo/customErrorHandler',
      clientConfigs: {
      default:
         {
           httpEndpoint:
             'https://me.something.com/api/graphql/query?token=******',
           httpLinkOptions: {
             credentials: 'same-origin'
           }
         },
        //  '~/apollo/clientConfig.js',
      otherClient: {
        httpEndpoint:
          'https://second-endpoint-gql.herokuapp.com/v1/graphql',
        httpLinkOptions: {
          credentials: 'same-origin'
        }
      }
    }
  },

现在您需要做的就是让您的查询正常进行，但区别在于 vue 组件。

/gql/allCars.gql

{
  allCars {
    id
    make
    model
    year
  }
}

默认调用将像往常一样：

<script>
import allcars from '~/gql/users'
export default {
  apollo: {
    allcars: {
      prefetch: true,
      query: allcars
    }
  },
  filters: {
    charIndex (i) {
      return String.fromCharCode(97 + i)
    }
  },
  head: {
    title: ....
  },
  data () {
    return {
      ...
    }
  }
}
</script>

调用需要添加 $client 的辅助端点：

<script>
import allcars from '~/gql/users'
export default {
  apollo: {
    $client: 'otherClient',
    allcars: {
      prefetch: true,
      query: allcars
    }
  },
  filters: {
    charIndex (i) {
      return String.fromCharCode(97 + i)
    }
  },
  head: {
    title: ....
  },
  data () {
    return {
      ...
    }
  }
}
</script>

apollo 调试器似乎只查询 apollo 配置中端点列表中的最后一个端点，在我的例子中是“otherClient”，这毫无价值。

参考我是如何进行上述整合的：Vue multiple client

【讨论】：