Skip to content

Instantly share code, notes, and snippets.

@yolabingo

yolabingo/gist:afaf95b6ec24d1ecc2bc4efdb9c8adc5

Created October 18, 2022 02:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yolabingo/afaf95b6ec24d1ecc2bc4efdb9c8adc5 to your computer and use it in GitHub Desktop.
Save yolabingo/afaf95b6ec24d1ecc2bc4efdb9c8adc5 to your computer and use it in GitHub Desktop.
Download ZIP
quick and dirty react graphql
Raw
gistfile1.txt
'use strict';
var query = `query PageRender { page(url: "/index") { url friendlyName } }`;
const e = React.createElement;
class EmptyElement extends React.Component {
constructor(props) {
super(props);
}
render() {
fetch('https://demo.dotcms.com/api/v1/graphql', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
body: JSON.stringify({ query })
})
.then(r => r.json())
.then(data => console.log('data returned:', data));
}
}
const domContainer = document.querySelector('#graphql');
const root = ReactDOM.createRoot(domContainer);
root.render(e(EmptyElement));
*************************************
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React graphql</title>
<meta property="og:title" content="A Basic HTML5 Template">
</head>
<body>
<div id="graphql"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="/js/graphql.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment