Skip to content

Instantly share code, notes, and snippets.

@jsoneaday
Created October 2, 2020 15:44
Show Gist options
  • Save jsoneaday/f096e102d6d1e7f7c4b2aebeb0635f60 to your computer and use it in GitHub Desktop.
Save jsoneaday/f096e102d6d1e7f7c4b2aebeb0635f60 to your computer and use it in GitHub Desktop.
Shows call to GraphQL server being done without use of any GraphQL client
import React, { useEffect, useState } from "react";
import "./App.css";
const GetCars = `
{
getCars {
id
name
passengerCount
}
}
`;
function App() {
const [cars, setCars] = useState<JSX.Element>(<ul></ul>);
useEffect(() => {
fetch("http://localhost:8000/graphql", {
headers: {
"Content-Type": "application/json",
},
method: "POST",
body: JSON.stringify({
operationName: null,
query: GetCars,
variables: {},
}),
}).then(async (result) => {
const json = await result.json();
const list = json.data.getCars.map((car: any) => {
return (
<li key={car.id}>
name: {car.name}&nbsp; passengers: {car.passengerCount}
</li>
);
});
setCars(<ul>{list}</ul>);
});
});
return (
<div className="App">
<strong>Cars</strong>
{cars}
</div>
);
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment