reactjs - Invalid response from authorization hook

Question

I'm trying to implement ApolloClient with websockets. My problem was that token was not accutalised in headers, so I used apolloLink in authMiddleware. But now it's not working

import { ApolloClient, InMemoryCache, ApolloLink as x } from '@apollo/client';
import { split, ApolloLink } from 'apollo-link';
import { getMainDefinition } from 'apollo-utilities';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { SubscriptionClient } from 'subscriptions-transport-ws';


const cache = () =>
  new InMemoryCache({
    ...
  });

interface Definintion {
  kind: string;
  operation?: string;
}

const httpLink = new HttpLink({
  uri: process.env.REACT_APP_URL,
});

const authMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext({
    headers: {
      authorization: localStorage.getItem('token') || null,
    },
  });
  // Add onto payload for WebSocket authentication
  (operation as any & { authToken: string | undefined }).authToken = localStorage.getItem('token');

  return forward(operation);
});

const socket = new SubscriptionClient(process.env.REACT_APP_URL2 as string, {
  reconnect: true,
});

const webSocketLink: WebSocketLink = new WebSocketLink(socket);

const link = split(
  ({ query }) => {
    const { kind, operation }: Definintion = getMainDefinition(query);
    return kind === 'OperationDefinition' && operation === 'subscription';
  },
  webSocketLink,
  httpLink,
);

const client = new ApolloClient({
  link: authMiddleware.concat(link) as any,
  cache: cache(),
});

I can't do any query because i'm getting error

Error: Invalid response from authorization hook

Answer 1

等待大神答复