Question

我正在尝试将Apollo Client Subscription 1.x转换为2.x，但仍无法正常工作

现有代码。

subscriptions-transport-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身份验证失败；没有有效的凭据

Answer 1

我认为问题可能出在传递给SubscriptionClient的Config对象上

下面是一些对我有用的代码。它与您的设置不完全相同（它从localstorage而不是基本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()
});

如何从1.x版使用Apollo Client 2.x转换带有身份验证的Apollo订阅

1 个答案: