Skip to content
Permalink
Browse files

Add GraphQL example.

  • Loading branch information
ghengeveld committed Nov 10, 2019
1 parent e796dff commit 6bf521176b84d80a2d4811971972fa3bd2f07c25
@@ -0,0 +1 @@
SKIP_PREFLIGHT_CHECK=true
@@ -0,0 +1,7 @@
# GraphQL with useAsync

This demonstrates how to use the `useAsync` hook with GraphQL.

<a href="https://react-async.async-library.now.sh/examples/with-graphql">
<img src="https://img.shields.io/badge/live-demo-blue.svg" alt="live demo">
</a>
@@ -0,0 +1,43 @@
{
"name": "with-graphql-example",
"version": "9.0.0",
"private": true,
"homepage": "https://react-async.async-library.now.sh/examples/with-graphql",
"scripts": {
"postinstall": "relative-deps",
"prestart": "relative-deps",
"prebuild": "relative-deps",
"pretest": "relative-deps",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"now-build": "SKIP_PREFLIGHT_CHECK=true react-scripts build"
},
"dependencies": {
"graphql-request": "1.8.2",
"react": "16.11.0",
"react-async": "^9.0.0",
"react-async-devtools": "^9.0.0",
"react-dom": "16.11.0",
"react-scripts": "3.2.0"
},
"devDependencies": {
"relative-deps": "0.2.0"
},
"relativeDependencies": {
"react-async": "../../packages/react-async/pkg",
"react-async-devtools": "../../packages/react-async-devtools/pkg"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"engines": {
"node": ">=8"
}
}
Binary file not shown.
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<title>React App</title>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root"></div>
</body>
</html>
@@ -0,0 +1,19 @@
body {
margin: 20px;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.movie {
margin-bottom: 40px;
line-height: 1.5em;
}
.movie dt {
font-weight: bold;
}
.movie dd {
margin-left: 10px;
}
@@ -0,0 +1,62 @@
import React from "react"
import { useAsync, IfPending, IfFulfilled, IfRejected } from "react-async"
import ReactDOM from "react-dom"
import DevTools from "react-async-devtools"
import { request } from "graphql-request"
import "./index.css"

const query = /* GraphQL */ `
query getMovie($slug: String!) {
Movie(slug: $slug) {
title
releaseDate
actors {
id
name
}
}
}
`

const loadMovie = async variables => {
const { Movie } = await request("https://api.graph.cool/simple/v1/movies", query, variables)
return Movie
}

const MovieDetails = ({ data }) => (
<div className="movie">
<h1>{data.title}</h1>
<dl>
<dt>Released</dt>
<dd>{data.releaseDate.substr(0, 10)}</dd>
<dt>Featuring</dt>
{data.actors.map(actor => (
<dd key={actor.id}>{actor.name}</dd>
))}
</dl>
</div>
)

const Movie = ({ slug }) => {
const state = useAsync({ promiseFn: loadMovie, debugLabel: slug, slug })
return (
<>
<IfPending state={state}>
<p>Loading...</p>
</IfPending>
<IfFulfilled state={state}>{data => <MovieDetails data={data} />}</IfFulfilled>
<IfRejected state={state}>{error => <p>{error.message}</p>}</IfRejected>
</>
)
}

export const App = () => (
<>
<DevTools />
<Movie slug="inception" />
<Movie slug="dark-knight" />
<Movie slug="batman-begins" />
</>
)

if (process.env.NODE_ENV !== "test") ReactDOM.render(<App />, document.getElementById("root"))
@@ -0,0 +1,9 @@
import React from "react"
import ReactDOM from "react-dom"
import { App } from "./"

it("renders without crashing", () => {
const div = document.createElement("div")
ReactDOM.render(<App />, div)
ReactDOM.unmountComponentAtNode(div)
})
@@ -28,6 +28,11 @@
"use": "@now/static-build",
"config": { "distDir": "build" }
},
{
"src": "examples/with-graphql/package.json",
"use": "@now/static-build",
"config": { "distDir": "build" }
},
{
"src": "examples/with-typescript/package.json",
"use": "@now/static-build",

0 comments on commit 6bf5211

Please sign in to comment.
You can’t perform that action at this time.