Skip to content

Commit d9e4d5d

Browse files
author
Matt Seccafien
committed
Add graphql server example
1 parent e1a4543 commit d9e4d5d

9 files changed

Lines changed: 165 additions & 0 deletions

File tree

‎examples/graphql-server/README.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Hydrogen App
2+
3+
Hydrogen is a React framework and SDK that you can use to build fast and dynamic Shopify custom storefronts.
4+
5+
[Check out the docs](https://shopify.dev/custom-storefronts/hydrogen)
6+
7+
## Getting started
8+
9+
**Requirements:**
10+
11+
- Node.js version 16.5.0 or higher
12+
- Yarn
13+
14+
```bash
15+
yarn
16+
yarn dev
17+
```
18+
19+
Remember to update `shopify.config.js` with your shop's domain and Storefront API token!
20+
21+
## Building for production
22+
23+
```bash
24+
yarn build
25+
```
26+
27+
## Previewing a production build
28+
29+
To run a local preview of your Hydrogen app in an environment similar to Oxygen, build your Hydrogen app and then run `yarn preview`:
30+
31+
```bash
32+
yarn build
33+
yarn preview
34+
```

‎examples/graphql-server/hydrogen.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import {defineConfig} from '@shopify/hydrogen/config';
2+
3+
export default defineConfig({
4+
routes: import.meta.globEager('./src/routes/**/*.server.[jt](s|sx)'),
5+
shopify: {
6+
storeDomain: 'hydrogen-preview.myshopify.com',
7+
storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
8+
storefrontApiVersion: '2022-07',
9+
},
10+
});

‎examples/graphql-server/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="preconnect" href="https://cdn.shopify.com" />
6+
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Hydrogen App</title>
9+
<link rel="stylesheet" href="/src/index.css" />
10+
</head>
11+
<body>
12+
<div id="root"></div>
13+
<script type="module" src="/@shopify/hydrogen/entry-client"></script>
14+
</body>
15+
</html>

‎examples/graphql-server/package.json‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "example-graphql-server",
3+
"description": "An example creating a graphql server using Hydrogen",
4+
"version": "0.0.0",
5+
"license": "MIT",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env LOCAL_DEV=true shopify hydrogen dev",
9+
"build": "shopify hydrogen build",
10+
"preview": "shopify hydrogen preview"
11+
},
12+
"devDependencies": {
13+
"@shopify/cli": "1.0.9",
14+
"@shopify/cli-hydrogen": "2.0.0",
15+
"cross-env": "^7.0.3",
16+
"vite": "^2.9.0"
17+
},
18+
"dependencies": {
19+
"@shopify/hydrogen": "^0.18.0",
20+
"graphql": "^14.6.0",
21+
"react": "0.0.0-experimental-2bf7c02f0-20220314",
22+
"react-dom": "0.0.0-experimental-2bf7c02f0-20220314",
23+
"urql": "^2.2.0"
24+
}
25+
}

‎examples/graphql-server/src/App.server.jsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import renderHydrogen from '@shopify/hydrogen/entry-server';
2+
import {Router, FileRoutes, ShopifyProvider} from '@shopify/hydrogen';
3+
import {Suspense} from 'react';
4+
5+
function App({routes}) {
6+
return (
7+
<Suspense fallback={null}>
8+
<ShopifyProvider>
9+
<Router>
10+
<FileRoutes routes={routes} />
11+
</Router>
12+
</ShopifyProvider>
13+
</Suspense>
14+
);
15+
}
16+
17+
export default renderHydrogen(App);

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

Whitespace-only changes.

‎examples/graphql-server/src/routes/api/graphql.server.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import {graphql, buildSchema} from 'graphql';
2+
3+
var schema = buildSchema(`
4+
type Query {
5+
hello: String
6+
}
7+
`);
8+
9+
var rootValue = {
10+
hello: () => {
11+
return 'Hello world!';
12+
},
13+
};
14+
15+
export async function api(request) {
16+
const body = await request.json();
17+
const source = body.query;
18+
19+
let response;
20+
21+
try {
22+
response = await graphql({
23+
schema,
24+
source,
25+
rootValue,
26+
});
27+
} catch (error) {
28+
console.log(error);
29+
}
30+
31+
const headers = {
32+
'Access-Control-Allow-Credentials': true,
33+
'Access-Control-Allow-Headers':
34+
'Origin, X-Requested-With, Content-Type, Accept',
35+
};
36+
37+
return new Response(JSON.stringify(response), {
38+
headers,
39+
});
40+
}

‎examples/graphql-server/src/routes/index.server.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import {useQuery} from '@shopify/hydrogen';
2+
3+
export default function Page() {
4+
const {
5+
data: {data},
6+
} = useQuery(['home', 'hello-world'], async () => {
7+
const response = await fetch('http://localhost:3000/api/graphql', {
8+
method: 'POST',
9+
body: JSON.stringify({query: `{hello}`}),
10+
});
11+
12+
return await response.json();
13+
});
14+
15+
console.log(data);
16+
17+
return <p>{data.hello}</p>;
18+
}

‎examples/graphql-server/vite.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import {defineConfig} from 'vite';
2+
import hydrogen from '@shopify/hydrogen/plugin';
3+
4+
export default defineConfig({
5+
plugins: [hydrogen()],
6+
});

0 commit comments

Comments
 (0)