JSFiddle - React, Tailwind, and code Playground

by Zatcepin

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/[email protected]"></script>

<!-- App -->
<div id="app">
    <div id="result">Loading...</div>
</div>

CSS

#result {
  text-align: center;
  color: #777;
  margin: 1rem;
  font-size: 20px;
}

JavaScript

const client = new Apollo.lib.ApolloClient({
  networkInterface: Apollo.lib.createNetworkInterface({
    uri: 'https://api.santiment.net/graphql',
    transportBatching: true,
  }),
  connectToDevTools: true,
})

const QUERY = Apollo.gql`
 query watchlist {
 	watchlist(id: 272) {
    id
    name
  }
 }
`

client.query({ query: QUERY }).then(result => {
  resultEl = document.querySelector('#result')
	resultEl.innerHTML = `${result.data.watchlist.name} id: ${result.data.watchlist.id}` 
})