Skip to content

Commit b17cff1

Browse files
DamianOsipiukDamianOsipiuk
committed
feat: add working example
1 parent b47e4cf commit b17cff1

File tree

11 files changed

+142
-0
lines changed

11 files changed

+142
-0
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@
44

55
Vue bindings for [react-query](https://github.com/tannerlinsley/react-query)
66

7+
# Examples
8+
- [Basic](https://github.com/DamianOsipiuk/vue-react-query/tree/main/examples/basic)
9+
710
# Usage
811

912
1. Installation

‎examples/basic/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/basic/README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Basic example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run dev` or `yarn dev`

‎examples/basic/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+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue-react-query example</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎examples/basic/package.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"name": "basic-example",
3+
"version": "0.0.0",
4+
"scripts": {
5+
"dev": "vite",
6+
"build": "vite build",
7+
"serve": "vite preview"
8+
},
9+
"dependencies": {
10+
"vue": "^3.0.5",
11+
"vue-react-query": "^0.1.5"
12+
},
13+
"devDependencies": {
14+
"@vitejs/plugin-vue": "^1.1.5",
15+
"@vue/compiler-sfc": "^3.0.5",
16+
"typescript": "^4.1.3",
17+
"vite": "^2.0.5"
18+
}
19+
}

‎examples/basic/public/favicon.ico‎

4.19 KB
Binary file not shown.

‎examples/basic/src/App.vue‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script lang="ts">
2+
import { defineComponent } from "vue";
3+
import { useQuery } from "vue-react-query";
4+
5+
interface Todo {
6+
userId: number;
7+
id: number;
8+
title: string;
9+
completed: boolean;
10+
}
11+
12+
const todoFetcher = async (): Promise<Todo[]> =>
13+
await fetch("https://jsonplaceholder.typicode.com/todos").then((response) =>
14+
response.json()
15+
);
16+
17+
export default defineComponent({
18+
name: "App",
19+
setup() {
20+
const { isLoading, isError, isFetching, data, error, refetch } = useQuery(
21+
"todos",
22+
todoFetcher,
23+
{
24+
retry: 0,
25+
}
26+
);
27+
28+
return { isLoading, isError, isFetching, data, error, refetch };
29+
},
30+
});
31+
</script>
32+
33+
<template>
34+
<h1>vue-react-query example</h1>
35+
<p>Turn on <b>Slow 3G</b> or <b>Offline</b> in dev-tools and hit Refetch</p>
36+
<button @click="refetch" :disabled="isFetching">
37+
{{ isFetching ? "Refetching..." : "Refetch" }}
38+
</button>
39+
<h2>TODO list</h2>
40+
<div v-if="isLoading">Loading...</div>
41+
<div v-else-if="isError">An error has occurred: {{ error }}</div>
42+
<div v-else-if="data">
43+
<ul>
44+
<li v-for="item in data" :key="item.id">
45+
{{ item.completed ? "🗹" : "☐" }} {{ item.title }}
46+
</li>
47+
</ul>
48+
<button @click="refetch" :disabled="isFetching">
49+
{{ isFetching ? "Refetching..." : "Refetch" }}
50+
</button>
51+
</div>
52+
<div v-else>Nothing to see here...</div>
53+
</template>
54+
55+
<style>
56+
ul {
57+
list-style: none;
58+
}
59+
</style>

‎examples/basic/src/main.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { QueryClient, VUE_REACT_QUERY_CLIENT } from "vue-react-query";
2+
import { createApp } from "vue";
3+
import App from "./App.vue";
4+
5+
const app = createApp(App);
6+
const queryClient = new QueryClient();
7+
8+
app.provide(VUE_REACT_QUERY_CLIENT, queryClient);
9+
10+
app.mount("#app");

‎examples/basic/src/shims-vue.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module "*.vue" {
2+
import { DefineComponent } from "vue";
3+
const component: DefineComponent<{}, {}, any>;
4+
export default component;
5+
}

‎examples/basic/tsconfig.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
"compilerOptions": {
3+
"target": "esnext",
4+
"module": "esnext",
5+
"moduleResolution": "node",
6+
"strict": true,
7+
"jsx": "preserve",
8+
"sourceMap": true,
9+
"resolveJsonModule": true,
10+
"esModuleInterop": true,
11+
"lib": ["esnext", "dom"],
12+
"types": ["vite/client"]
13+
},
14+
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
15+
}

0 commit comments

Comments
 (0)