Skip to content

Commit fe4b811

Browse files
harshithpabbatiharshithpabbati
authored
feat: Add Parcel Example for GraphiQL (#1511)
1 parent 4ea10ad commit fe4b811

File tree

5 files changed

+121
-0
lines changed

5 files changed

+121
-0
lines changed

‎examples/graphiql-parcel/README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
## GraphiQL Parcel Example
2+
3+
This example demonstrates how to transpile your own custom ES6 GraphiQL implementation with parcel bundler.
4+
5+
### Setup
6+
7+
1. `yarn` and `yarn build` at the root of this repository, if you have not already.
8+
2. `yarn start` from this folder to start parcel dev mode.
9+
3. `yarn build` to find production ready files.

‎examples/graphiql-parcel/package.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "graphiql-parcel-example",
3+
"version": "1.0.0",
4+
"license": "MIT",
5+
"description": "GraphiQL Parcel Example",
6+
"main": "index.js",
7+
"private": true,
8+
"scripts": {
9+
"start": "parcel src/index.html -p 8080",
10+
"build": "parcel build src/index.html --public-url /"
11+
},
12+
"browserslist": {
13+
"production": [
14+
">0.2%",
15+
"not dead",
16+
"not op_mini all"
17+
],
18+
"development": [
19+
"last 1 chrome version",
20+
"last 1 firefox version",
21+
"last 1 safari version"
22+
]
23+
},
24+
"dependencies": {
25+
"@types/react": "^16.9.34",
26+
"@types/react-dom": "^16.9.6",
27+
"graphiql": "file:../../packages/graphiql",
28+
"graphql": "15.0.0",
29+
"react": "^16.13.1",
30+
"react-dom": "^16.13.1",
31+
"typescript": "^3.4.4"
32+
},
33+
"devDependencies": {
34+
"parcel-bundler": "^1.12.4"
35+
}
36+
}

‎examples/graphiql-parcel/src/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<html lang="en">
2+
<head>
3+
<style>
4+
body {
5+
padding: 0;
6+
margin: 0;
7+
min-height: 100vh;
8+
}
9+
#root {
10+
height: 100vh;
11+
}
12+
</style>
13+
<meta charset="UTF-8" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
16+
<title>Parcel React Example</title>
17+
18+
<link rel="stylesheet" href="https://unpkg.com/graphiql/graphiql.min.css" />
19+
</head>
20+
21+
<body>
22+
<div id="root"></div>
23+
<script src="./index.tsx"></script>
24+
</body>
25+
</html>

‎examples/graphiql-parcel/src/index.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import GraphiQL from 'graphiql';
4+
5+
const App = () => (
6+
<GraphiQL
7+
style={{ height: '100vh' }}
8+
fetcher={async graphQLParams => {
9+
const data = await fetch(
10+
'https://swapi-graphql.netlify.app/.netlify/functions/index',
11+
{
12+
method: 'POST',
13+
headers: {
14+
Accept: 'application/json',
15+
'Content-Type': 'application/json',
16+
},
17+
body: JSON.stringify(graphQLParams),
18+
credentials: 'same-origin',
19+
},
20+
);
21+
return data.json().catch(() => data.text());
22+
}}
23+
/>
24+
);
25+
26+
ReactDOM.render(<App />, document.getElementById('root'));
27+
28+
// Hot Module Replacement
29+
if (module.hot) {
30+
module.hot.accept();
31+
}

‎examples/graphiql-parcel/tsconfig.json‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
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+
"sourceMap": true,
13+
"moduleResolution": "node",
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"noEmit": true,
17+
"jsx": "react"
18+
},
19+
"include": ["src"]
20+
}

0 commit comments

Comments
 (0)