Skip to content

Commit 4ea10ad

Browse files
daemon1024daemon1024
authored
docs: Add graphiql create-react-app example. (#1510)
1 parent 5274440 commit 4ea10ad

File tree

8 files changed

+135
-0
lines changed

8 files changed

+135
-0
lines changed

‎examples/graphiql-create-react-app/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
## GraphiQL `create-react-app` Example
2+
3+
This example demonstrates how to transpile your own custom ES6 and typescript GraphiQL implementation bootstrapped with `create-react-app`, no config needed.
4+
5+
### Setup
6+
7+
1. Run `yarn` at root of the repository to install the dependencies.
8+
2. `yarn start` from this folder to start `react-script` dev server.
9+
3. `yarn build` from this folder to build production ready transpiled files using `react-script`. Find the output in `build` folder.

‎examples/graphiql-create-react-app/package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "example-graphiql-create-react-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@types/react": "^16.9.34",
7+
"@types/react-dom": "^16.9.6",
8+
"graphiql": "file:../../packages/graphiql",
9+
"graphql": "^15.0.0",
10+
"react": "^16.13.1",
11+
"react-dom": "^16.13.1",
12+
"react-scripts": "3.4.1"
13+
},
14+
"scripts": {
15+
"start": "react-scripts start",
16+
"build": "react-scripts build"
17+
},
18+
"eslintConfig": {
19+
"extends": "react-app"
20+
},
21+
"browserslist": {
22+
"production": [
23+
">0.2%",
24+
"not dead",
25+
"not op_mini all"
26+
],
27+
"development": [
28+
"last 1 chrome version",
29+
"last 1 firefox version",
30+
"last 1 safari version"
31+
]
32+
},
33+
"devDependencies": {
34+
"eslint-config-react-app": "^5.2.1"
35+
}
36+
}

‎examples/graphiql-create-react-app/public/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta
6+
name="viewport"
7+
content="width=device-width, initial-scale=1, shrink-to-fit=no"
8+
/>
9+
<meta name="theme-color" content="#000000" />
10+
<meta
11+
name="description"
12+
content="Graphiql example created using create-react-app"
13+
/>
14+
15+
<title>GraphiQL create-react-app Example</title>
16+
</head>
17+
<body>
18+
<noscript>You need to enable JavaScript to run this app.</noscript>
19+
<div id="root"></div>
20+
<!--
21+
This HTML file is a template.
22+
If you open it directly in the browser, you will see an empty page.
23+
24+
You can add webfonts, meta tags, or analytics to this file.
25+
The build step will place the bundled scripts into the <body> tag.
26+
27+
To begin the development, run `npm start` or `yarn start`.
28+
To create a production bundle, use `npm run build` or `yarn build`.
29+
-->
30+
</body>
31+
</html>

‎examples/graphiql-create-react-app/src/App.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import GraphiQL from 'graphiql';
3+
import 'graphiql/graphiql.min.css';
4+
5+
const App = () => (
6+
<GraphiQL
7+
fetcher={async graphQLParams => {
8+
const data = await fetch(
9+
'https://swapi-graphql.netlify.app/.netlify/functions/index',
10+
{
11+
method: 'POST',
12+
headers: {
13+
Accept: 'application/json',
14+
'Content-Type': 'application/json',
15+
},
16+
body: JSON.stringify(graphQLParams),
17+
credentials: 'same-origin',
18+
},
19+
);
20+
return data.json().catch(() => data.text());
21+
}}
22+
/>
23+
);
24+
25+
export default App;

‎examples/graphiql-create-react-app/src/index.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body {
2+
padding: 0;
3+
margin: 0;
4+
min-height: 100vh;
5+
}
6+
#root {
7+
height: 100vh;
8+
}

‎examples/graphiql-create-react-app/src/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import App from './App';
4+
import './index.css';
5+
6+
ReactDOM.render(<App />, document.getElementById('root'));

‎examples/graphiql-create-react-app/src/react-app-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="react-scripts" />

‎examples/graphiql-create-react-app/tsconfig.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": ["dom", "dom.iterable", "esnext"],
5+
"allowJs": true,
6+
"skipLibCheck": true,
7+
"esModuleInterop": true,
8+
"allowSyntheticDefaultImports": true,
9+
"strict": true,
10+
"forceConsistentCasingInFileNames": true,
11+
"module": "esnext",
12+
"moduleResolution": "node",
13+
"resolveJsonModule": true,
14+
"isolatedModules": true,
15+
"noEmit": true,
16+
"jsx": "react"
17+
},
18+
"include": ["src"]
19+
}

0 commit comments

Comments
 (0)