vue-apollo 3.0.0 测试版配置

Posted 2023-03-08

【中文标题】vue-apollo 3.0.0 测试版配置

【英文标题】：vue-apollo 3.0.0 Beta configuration

【发布时间】：2018-11-19 22:49:10

【问题描述】：

在这方面很新，所以非常感谢任何帮助。 我知道如何使用 Apollo 客户端进行身份验证，但是当我将新的 vue-apollo-plugin (https://www.npmjs.com/package/vue-apollo) 添加到我的 Vue-cli-3 生成的项目中时。我不明白如何以及在哪里配置我的 authMiddleware。

这是 cli 自动生成的文件：

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import  createApolloClient, restartWebsockets  from 'vue-cli-plugin-apollo/graphql-client'

// Install the vue plugin
Vue.use(VueApollo)

// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token'

// Config
const defaultOptions = 
  httpEndpoint: process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000',  // Use `null` to disable subscriptions
  wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000',
  // LocalStorage token
  tokenName: AUTH_TOKEN,
  // Enable Automatic Query persisting with Apollo Engine
  persisting: false,
  // Use websockets for everything (no HTTP)
  // You need to pass a `wsEndpoint` for this to work
  websocketsOnly: false,
  // Is being rendered on the server?
  s-s-r: false,

  // Additional ApolloClient options
  // apollo:  ... 

  // Client local data (see apollo-link-state)
  // clientState:  resolvers:  ... , defaults:  ...  


// Call this in the Vue app file
export function createProvider (options = ) 
  // Create apollo client
  const  apolloClient, wsClient  = createApolloClient(
    ...defaultOptions,
    ...options,
  )
  apolloClient.wsClient = wsClient

  // Create vue apollo provider
  const apolloProvider = new VueApollo(
    defaultClient: apolloClient,
    defaultOptions: 
      $query: 
        // fetchPolicy: 'cache-and-network',
      ,
    ,
    errorHandler (error) 
      // eslint-disable-next-line no-console
      console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
      ,
  )

  return apolloProvider


// Manually call this when user log in
export async function onLogin (apolloClient, token) 
  localStorage.setItem(AUTH_TOKEN, token)
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try 
    await apolloClient.resetStore()
   catch (e) 
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (login)', 'color: orange;', e.message)
  


// Manually call this when user log out
export async function onLogout (apolloClient) 
  localStorage.removeItem(AUTH_TOKEN)
  if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient)
  try 
    await apolloClient.resetStore()
   catch (e) 
    // eslint-disable-next-line no-console
    console.log('%cError on cache reset (logout)', 'color: orange;', e.message)
  

我有我以前通过此处的标头用于身份验证的内容：

const authMiddleware = new ApolloLink((operation, forward) => 
  // add the authorization to the headers
  const token = localStorage.getItem(AUTH_TOKEN)
  operation.setContext(
    headers: 
      authorization: token ? `Bearer $token` : null
    
  )

  return forward(operation)
)

似乎当我更深入地研究从 vue-apollo 包中导入的一些对象时，createApolloClient 对象中已经内置了类似的东西，它具有以下属性：

authLink = setContext(function (_, _ref2) 
      var headers = _ref2.headers;
      return 
        headers: _objectSpread(, headers, 
          authorization: getAuth(tokenName)
        )
      ;
    ); 

这是否意味着我可以简单地解构 createApolloClient 对象的属性？非常感谢任何帮助或提示。

【参考方案1】：

看看vue-cli-plugin-apollo

您可以在const defaultOptions = ... 中传递link: authLink 和\或getAuth:()=>return "something" /vue-apollo.js。

或者在您拨打createProvider时在main.js中

new Vue(
  // router, store
  apolloProvider: createProvider(
    link: authLink,
    getAuth: AUTH_TOKEN => localStorage.getItem(AUTH_TOKEN)
  ),
  // ...
)

如果您在 authLink 中添加标头，同时使用两者，getAuth 可能是多余的。

如果你打算使用多个链接，有apollo-link包link: ApolloLink.from([ ... ])