Skip to content

Instantly share code, notes, and snippets.

@alexleventer
Created July 17, 2020 02:17
Show Gist options
  • Save alexleventer/f939c808be517e9e6ef6a7a2aedf07fb to your computer and use it in GitHub Desktop.
Save alexleventer/f939c808be517e9e6ef6a7a2aedf07fb to your computer and use it in GitHub Desktop.
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment