Reactjs 如何使用Apollo Client 2.x从1.x转换为Apollo订阅和身份验证

我正在尝试将Apollo客户端订阅1.x转换为2.x，但仍然无法工作

现行守则

订阅传输ws:0.8.3 阿波罗客户机：1.9.3

import { ApolloAuthProvider } from '../auth'
import { SubscriptionClient, addGraphQLSubscriptions } from 'subscriptions-transport-ws'
import ApolloClient, { createNetworkInterface } from 'apollo-client'


networkInterface.use([{
  applyMiddleware (req, next) {
    if (!req.options.headers) {
      req.options.headers = {}  
    }
    req.options.headers.authorization = 'Basic xxxx'
    next()
  }
}])


const wsClient = new 
SubscriptionClient(ApolloAuthProvider.APISocketEndPoint, {
  reconnect: true,
  connectionParams: {
    'Authorization' : 'Basic xxxx'
  }
})

const networkInterfaceWithSubscriptions = addGraphQLSubscriptions(
  networkInterface,
  wsClient
)

export default (store) => (
  new ApolloClient({
    networkInterface: networkInterfaceWithSubscriptions
  })
)

新代码：

import { ApolloClient } from 'apollo-client'
import { setContext } from 'apollo-link-context'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloAuthProvider } from '../auth'
import { ApolloLink } from 'apollo-link'
import { SubscriptionClient } from 'subscriptions-transport-ws'
import { getMainDefinition } from 'apollo-utilities'
import { WebSocketLink } from 'apollo-link-ws'


const getHttpClientConfig = () => {
  let config = {
    uri: ApolloAuthProvider.APIEndPoint
  }

  if (ApolloAuthProvider.isNeedAuthentication()) {
    config.credentials = 'include'
    config.headers = ApolloAuthProvider.getHeader()
  }
  return config
}


const httpLink = new createHttpLink(getHttpClientConfig())

const wsClient = new 
SubscriptionClient(ApolloAuthProvider.APISocketEndPoint, {
  reconnect: true,
  connectionParams: {
    'Authorization' : 'Basic xxxx'
  }
})

const webSocketLink = new WebSocketLink(wsClient)

const requestLink = ({ queryOrMutationLink, subscriptionLink }) =>
  ApolloLink.split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(query)
      return kind === 'OperationDefinition' && operation === 'subscription'
    },
    subscriptionLink,
    queryOrMutationLink,
  )

const router = ApolloLink.from([
  requestLink({
    queryOrMutationLink: httpLink,
    subscriptionLink: webSocketLink,
  }),
])



export default (store) => (
  new ApolloClient({
    link: router,
    cache: new InMemoryCache()
  })
)

预期：正常工作 实际结果：

---

client.js:426 WebSocket与“wss://”的连接失败：HTTP身份验证失败；没有可用的有效凭据

我认为问题可能在于传递给SubscriptionClient的配置对象

下面是一些适合我的代码。它的设置与您的设置不完全相同（它从localstorage而不是basic auth获取承载令牌），但我认为它应该为您指明正确的方向

import { ApolloClient } from 'apollo-client';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { WebSocketLink } from 'apollo-link-ws';
import { GRAPHCOOL_HTTP_ENDPOINT, GRAPHCOOL_WS_ENDPOINT, JWT_LOCAL_STORAGE_KEY } from './constants';
import { getMainDefinition } from 'apollo-utilities';
import { split } from 'apollo-link';

const httpLink = createHttpLink({
  uri: GRAPHCOOL_HTTP_ENDPOINT
});

const authLink = setContext((_, { headers }) => {
  // Get the authentication token from local storage if it exists
  const token = localStorage.getItem(JWT_LOCAL_STORAGE_KEY);
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ""
    }
  };
});

const wsLink = () => {
  // Get the authentication token from local storage if it exists
  const token = localStorage.getItem(JWT_LOCAL_STORAGE_KEY);
  return new WebSocketLink({
    uri: GRAPHCOOL_WS_ENDPOINT,
    options: {
      reconnect: true,
      timeout: 30000,
      connectionParams: {
        Authorization: `Bearer ${token}`,
        authToken: token
      }
    }
  });
};

// using the ability to split links, you can send data to each link
// depending on what kind of operation is being sent
const link = split(
  // split based on operation type
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    return kind === "OperationDefinition" && operation === "subscription";
  },
  wsLink(),
  authLink.concat(httpLink)
);

export const client = new ApolloClient({
  link: link,
  cache: new InMemoryCache()
});

---

这只是以

“payload”：{“Authorization”：“Bearer[object object]，“authToken”：{“u40:0”，“u65:1”，“u55”：“sessionid=zgcelooi0tbq5kijz4w2qnrhjeehunf2”，“u72:null}}

@yokhen您的Bearer令牌应该是字符串而不是对象。我认为这可能是在您将其保存到本地存储时发生的-您保存了一个对象，它得到了stringifiedIt这是一个承诺结果，但是的，不确定如何将其转换为字符串。Async await或。然后

AsyncStorage

（react native）已经是异步的

wait

给出错误

TypeError:bundle.added未定义

和

。然后（）

不会及时返回结果，也不会初始化

connectionParams

。但是谢谢你的建议。