Skip to content

Commit 92c1e4b

Browse files
GabrielCastilhoVGabrielCastilhoV
authored
feat(examples): Added react query example (#249)
* feat(examples): added react query examples * docs: update readme
1 parent 88465d1 commit 92c1e4b

File tree

14 files changed

+1198
-0
lines changed

14 files changed

+1198
-0
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ frameworks.
6363
| [Next.js Image with Custom Loader] ([Demo][demo21], [Video][video21]) | How to use a [custom loader] function with [Next.js Image Component] and GraphCMS assets |
6464
| [Nuxt.js] ([Demo][demo22], [Video][video22]) | A simple Nuxt.js starter using `create-nuxt-app` CLI with Tailwind and Axios added |
6565
| [React.js] ([Demo][demo23], [Video][video23]) | This example demonstrates how to query from GraphCMS with graphql-request in React.js |
66+
| [React.js with React Query] | This example demonstrates how to query from GraphCMS with React Query in React.js |
6667
| [Vue.js] ([Demo][demo24], [Video][video24]) | A vanilla Vue.js starter using `vue create` CLI with Vue Router |
6768
| [SvelteKit] ([Demo][demo26], [Video][video26]) | A Svelte example using SvelteKit and `graphql-request` to fetch data |
6869
| [SvelteKit with URQL] ([Demo][demo27]) | A SvelteKit example URQL to fetch data |
@@ -194,6 +195,7 @@ We've crafted a few example [UI extensions](https://graphcms.com/docs/ui-extensi
194195
[video22]: https://youtu.be/kTdsFYonNQ4
195196
[demo22]: https://graphcms-with-nuxtjs.now.sh/
196197
[react.js]: with-reactjs
198+
[react.js with react query]: with-react-query
197199
[video23]: https://youtu.be/QXgtDR9VIWc
198200
[demo23]: https://graphcms-with-reactjs.now.sh/
199201
[vue.js]: with-vuejs

‎with-react-query/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎with-react-query/README.md‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# GraphCMS ⨯ React Query
2+
3+
[Join our Slack](https://slack.graphcms.com)
4+
5+
This example demonstrates how to query from GraphCMS with `React Query` in React.js.
6+
7+
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/GraphCMS/graphcms-examples/tree/master/with-react-query) [![Clone project](https://graphcms.com/button)](https://app.graphcms.com/clone/0ff23f7a41ce4da69a366ab299cc24d8)
8+
9+
## How to Use
10+
11+
### Download Manually
12+
13+
```bash
14+
npx degit graphcms/graphcms-examples/with-react-query with-react-query
15+
```
16+
17+
Install & Run:
18+
19+
```bash
20+
cd with-react-query
21+
npm install
22+
npm run dev
23+
# or
24+
cd with-react-query
25+
yarn
26+
yarn dev
27+
```
28+
29+
### Run on Codesandbox
30+
31+
[![Develop with Codesandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/GraphCMS/graphcms-examples/tree/master/with-react-query)

‎with-react-query/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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.0" />
6+
<title>Example with react query</title>
7+
</head>
8+
<body>
9+
<div id="root"></div>
10+
<script type="module" src="/src/main.tsx"></script>
11+
</body>
12+
</html>

‎with-react-query/package.json‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "graphcms-react-query",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "tsc && vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"graphql": "^16.4.0",
12+
"graphql-request": "^4.2.0",
13+
"react": "^18.0.0",
14+
"react-dom": "^18.0.0",
15+
"react-query": "^3.38.1"
16+
},
17+
"devDependencies": {
18+
"@types/react": "^18.0.0",
19+
"@types/react-dom": "^18.0.0",
20+
"@vitejs/plugin-react": "^1.3.0",
21+
"typescript": "^4.6.3",
22+
"vite": "^2.9.7"
23+
}
24+
}

‎with-react-query/src/App.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { useGetProducts } from "./useRequest";
2+
3+
function App() {
4+
const { data, status } = useGetProducts();
5+
6+
return (
7+
<div className="App">
8+
<h1>List All Products</h1>
9+
10+
{status === "loading" ? (
11+
<p>Loading...</p>
12+
) : (
13+
data?.map((product) => (
14+
<div key={product.id} className="product">
15+
<h2>{product.name}</h2>
16+
<p>{product.description}</p>
17+
<span>$ {product.price}</span>
18+
</div>
19+
))
20+
)}
21+
</div>
22+
);
23+
}
24+
25+
export default App;

‎with-react-query/src/index.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
body {
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
4+
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
5+
sans-serif;
6+
-webkit-font-smoothing: antialiased;
7+
-moz-osx-font-smoothing: grayscale;
8+
}
9+
10+
code {
11+
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
12+
monospace;
13+
}
14+
15+
.App {
16+
max-width: 1024px;
17+
margin: 0 auto;
18+
}
19+
20+
.product {
21+
margin-bottom: 1rem;
22+
border: 2px solid #cccc;
23+
padding: 1rem;
24+
}

‎with-react-query/src/main.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import App from "./App";
4+
import "./index.css";
5+
6+
import { QueryClient, QueryClientProvider } from "react-query";
7+
8+
const queryClient = new QueryClient();
9+
10+
ReactDOM.createRoot(document.getElementById("root")!).render(
11+
<React.StrictMode>
12+
<QueryClientProvider client={queryClient}>
13+
<App />
14+
</QueryClientProvider>
15+
</React.StrictMode>
16+
);

‎with-react-query/src/useRequest.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { useQuery } from "react-query";
2+
import { GraphQLClient, gql } from "graphql-request";
3+
4+
const API_URL =
5+
"https://api-eu-central-1.graphcms.com/v2/ck8sn5tnf01gc01z89dbc7s0o/master";
6+
7+
const graphQLClient = new GraphQLClient(API_URL);
8+
9+
type Product = {
10+
id: string;
11+
name: string;
12+
description: string;
13+
price: string;
14+
};
15+
16+
export function useGetProducts() {
17+
return useQuery<Product[]>("get-products", async () => {
18+
const { products } = await graphQLClient.request(gql`
19+
query {
20+
products {
21+
id
22+
name
23+
description
24+
price
25+
}
26+
}
27+
`);
28+
return products;
29+
});
30+
}

‎with-react-query/src/vite-env.d.ts‎

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

0 commit comments

Comments
 (0)