Test.tsx

import React from 'react';
import { ApolloClient, createHttpLink, InMemoryCache, gql } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import { ApolloProvider, useQuery } from '@apollo/react-hooks';
import { generateAstraToken, generateUUId } from './utils';
import './App.css';
import { DB_ID, DB_REGION, HASURA_DB_ID, HASURA_TOKEN } from './constants';

const CHARACTERS = gql`
  {
    characters {
      name
      actorName
    }   
  }
`;

function Characters():any {
  const { loading, error, data }:any = useQuery(CHARACTERS);
  if (loading) return <p>Loading...</p>;

  if (error) {
    return <p>Error :(</p>;
  }

  return data.characters.map(({ name, actorName }:any) => (
      <div key={name}>
        <p>
          {name}: {actorName}
        </p>
      </div>
  ));
}

// const uri = `https://${DB_ID}-${DB_REGION}.apps.astra.datastax.com/api/graphql`;
const uri = `https://${HASURA_DB_ID}.hasura.app/v1/graphql`;

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

const authLink = setContext(async (_, { headers }) => {
  // const token = await generateAstraToken();
  return {
    headers: {
      ...headers,
      'hasura-collaborator-token': `IDToken ${HASURA_TOKEN}`,
      // 'X-Cassandra-Token': token,
      // 'x-cassandra-request-id': generateUUId(),
    }
  }
});

const client:any = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

const App = () => {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <Characters />
      </div>
    </ApolloProvider>
  );
}

export default App;