Skip to content

Commit 6bf5211

Browse files
ghengeveldghengeveld
committed
Add GraphQL example.
1 parent e796dff commit 6bf5211

File tree

9 files changed

+159
-0
lines changed

9 files changed

+159
-0
lines changed

‎examples/with-graphql/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
SKIP_PREFLIGHT_CHECK=true

‎examples/with-graphql/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# GraphQL with useAsync
2+
3+
This demonstrates how to use the `useAsync` hook with GraphQL.
4+
5+
<a href="https://react-async.async-library.now.sh/examples/with-graphql">
6+
<img src="https://img.shields.io/badge/live-demo-blue.svg" alt="live demo">
7+
</a>

‎examples/with-graphql/package.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "with-graphql-example",
3+
"version": "9.0.0",
4+
"private": true,
5+
"homepage": "https://react-async.async-library.now.sh/examples/with-graphql",
6+
"scripts": {
7+
"postinstall": "relative-deps",
8+
"prestart": "relative-deps",
9+
"prebuild": "relative-deps",
10+
"pretest": "relative-deps",
11+
"start": "react-scripts start",
12+
"build": "react-scripts build",
13+
"test": "react-scripts test",
14+
"now-build": "SKIP_PREFLIGHT_CHECK=true react-scripts build"
15+
},
16+
"dependencies": {
17+
"graphql-request": "1.8.2",
18+
"react": "16.11.0",
19+
"react-async": "^9.0.0",
20+
"react-async-devtools": "^9.0.0",
21+
"react-dom": "16.11.0",
22+
"react-scripts": "3.2.0"
23+
},
24+
"devDependencies": {
25+
"relative-deps": "0.2.0"
26+
},
27+
"relativeDependencies": {
28+
"react-async": "../../packages/react-async/pkg",
29+
"react-async-devtools": "../../packages/react-async-devtools/pkg"
30+
},
31+
"eslintConfig": {
32+
"extends": "react-app"
33+
},
34+
"browserslist": [
35+
">0.2%",
36+
"not dead",
37+
"not ie <= 11",
38+
"not op_mini all"
39+
],
40+
"engines": {
41+
"node": ">=8"
42+
}
43+
}

‎examples/with-graphql/public/favicon.ico

3.78 KB
Binary file not shown.

‎examples/with-graphql/public/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6+
<meta name="theme-color" content="#000000" />
7+
<title>React App</title>
8+
</head>
9+
<body>
10+
<noscript> You need to enable JavaScript to run this app. </noscript>
11+
<div id="root"></div>
12+
</body>
13+
</html>

‎examples/with-graphql/src/index.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
body {
2+
margin: 20px;
3+
padding: 0;
4+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
5+
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
.movie {
11+
margin-bottom: 40px;
12+
line-height: 1.5em;
13+
}
14+
.movie dt {
15+
font-weight: bold;
16+
}
17+
.movie dd {
18+
margin-left: 10px;
19+
}

‎examples/with-graphql/src/index.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from "react"
2+
import { useAsync, IfPending, IfFulfilled, IfRejected } from "react-async"
3+
import ReactDOM from "react-dom"
4+
import DevTools from "react-async-devtools"
5+
import { request } from "graphql-request"
6+
import "./index.css"
7+
8+
const query = /* GraphQL */ `
9+
query getMovie($slug: String!) {
10+
Movie(slug: $slug) {
11+
title
12+
releaseDate
13+
actors {
14+
id
15+
name
16+
}
17+
}
18+
}
19+
`
20+
21+
const loadMovie = async variables => {
22+
const { Movie } = await request("https://api.graph.cool/simple/v1/movies", query, variables)
23+
return Movie
24+
}
25+
26+
const MovieDetails = ({ data }) => (
27+
<div className="movie">
28+
<h1>{data.title}</h1>
29+
<dl>
30+
<dt>Released</dt>
31+
<dd>{data.releaseDate.substr(0, 10)}</dd>
32+
<dt>Featuring</dt>
33+
{data.actors.map(actor => (
34+
<dd key={actor.id}>{actor.name}</dd>
35+
))}
36+
</dl>
37+
</div>
38+
)
39+
40+
const Movie = ({ slug }) => {
41+
const state = useAsync({ promiseFn: loadMovie, debugLabel: slug, slug })
42+
return (
43+
<>
44+
<IfPending state={state}>
45+
<p>Loading...</p>
46+
</IfPending>
47+
<IfFulfilled state={state}>{data => <MovieDetails data={data} />}</IfFulfilled>
48+
<IfRejected state={state}>{error => <p>{error.message}</p>}</IfRejected>
49+
</>
50+
)
51+
}
52+
53+
export const App = () => (
54+
<>
55+
<DevTools />
56+
<Movie slug="inception" />
57+
<Movie slug="dark-knight" />
58+
<Movie slug="batman-begins" />
59+
</>
60+
)
61+
62+
if (process.env.NODE_ENV !== "test") ReactDOM.render(<App />, document.getElementById("root"))

‎examples/with-graphql/src/index.test.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from "react"
2+
import ReactDOM from "react-dom"
3+
import { App } from "./"
4+
5+
it("renders without crashing", () => {
6+
const div = document.createElement("div")
7+
ReactDOM.render(<App />, div)
8+
ReactDOM.unmountComponentAtNode(div)
9+
})

‎now.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@
2828
"use": "@now/static-build",
2929
"config": { "distDir": "build" }
3030
},
31+
{
32+
"src": "examples/with-graphql/package.json",
33+
"use": "@now/static-build",
34+
"config": { "distDir": "build" }
35+
},
3136
{
3237
"src": "examples/with-typescript/package.json",
3338
"use": "@now/static-build",

0 commit comments

Comments
 (0)