typescript Apollo websocket TRM

Posted 2021-05-20

in TRM
websocket is not being used now. 
this is for backup codes

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { split } from 'apollo-link';
import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import React from 'react';
import { ApolloProvider } from 'react-apollo';
import authService from './authService';

import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import introspectionQueryResultData from './fragmentTypes.json';
import { env } from 'src/env.config';

const httpLink = createHttpLink({
  uri: env.ApolloServerURL
})

const authLink = setContext((_, { headers }) => {
  const token = authService.getUserData()
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
    }
  }
})

/**
 * websocket is for subscription and the subscription functionality isn't currently in use
 */
const wsLink = new WebSocketLink({
  uri: `ws://localhost:4000`,
  options: {
    reconnect: true,
    connectionParams: {
      authToken: authService.getUserData(),
    }
  }
})

const link = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query)
    return kind === 'OperationDefinition' && operation === 'subscription'
  },
  wsLink,
  authLink.concat(httpLink)
)

/**
 * to remove heuristic matching error
 */
const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
});

const client = new ApolloClient({
  link,
  cache: new InMemoryCache({ fragmentMatcher }),
  connectToDevTools: true,
})

export default function ApolloWrapper(props) {
  return (
    <ApolloProvider client={client}>
      {props.children}
    </ApolloProvider>)
}

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { split } from 'apollo-link';
import { setContext } from 'apollo-link-context';
import { createHttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { getMainDefinition } from 'apollo-utilities';
import React from 'react';
import { ApolloProvider } from 'react-apollo';
import authService from './authService';

import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
import introspectionQueryResultData from './fragmentTypes.json';
import { env } from 'src/env.config';

const httpLink = createHttpLink({
  uri: env.ApolloServerURL
})

const authLink = setContext((_, { headers }) => {
  const token = authService.getUserData()
  console.log('token', token)
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
    }
  }
})

/**
 * websocket is for subscription and the subscription functionality isn't currently in use
 */
// const wsLink = new WebSocketLink({
//   // uri: `ws://localhost:4000`,
//   options: {
//     reconnect: true,
//     connectionParams: {
//       authToken: authService.getUserData(),
//     }
//   }
// })

// const link = split(
//   ({ query }) => {
//     const { kind, operation } = getMainDefinition(query)
//     return kind === 'OperationDefinition' && operation === 'subscription'
//   },
//   wsLink,
//   authLink.concat(httpLink)
// )

/**
 * to remove heuristic matching error
 */
const fragmentMatcher = new IntrospectionFragmentMatcher({
  introspectionQueryResultData
});

const client = new ApolloClient({
  // link,
  link : authLink.concat(httpLink),
  cache: new InMemoryCache({ fragmentMatcher }),
  connectToDevTools: true,
})

export default function ApolloWrapper(props) {
  return (
    <ApolloProvider client={client}>
      {props.children}
    </ApolloProvider>)
}