Skip to content

Commit 080d1f2

Browse files
ososunaososuna
committed
use clients
1 parent 7f67a93 commit 080d1f2

File tree

8 files changed

+145
-4
lines changed

8 files changed

+145
-4
lines changed

‎02-pinia-app/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_API_URL=http://localhost:3001

‎02-pinia-app/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@
1212
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
1313
},
1414
"dependencies": {
15+
"@tanstack/vue-query": "^4.20.5",
16+
"axios": "^1.2.1",
1517
"pinia": "^2.0.28",
1618
"vue": "^3.2.45",
1719
"vue-router": "^4.1.6"

‎02-pinia-app/src/api/clientsApi.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import axios from 'axios';
2+
3+
const clientsApi = axios.create({
4+
baseURL: import.meta.env.VITE_API_URL + '/clients',
5+
});
6+
7+
export default clientsApi;

‎02-pinia-app/src/clients/components/ClientListComponent.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import useClients from '@/clients/composables/useClients';
3+
const { clients, isLoading } = useClients();
4+
</script>
5+
6+
<template>
7+
<ul>
8+
<li>
9+
<RouterLink :to="{name: 'client-id', params: { id: 1 }}">
10+
Client 1
11+
</RouterLink>
12+
</li>
13+
</ul>
14+
</template>
15+
16+
17+
<style scoped>
18+
19+
</style>

‎02-pinia-app/src/clients/composables/useClients.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { useQuery } from '@tanstack/vue-query';
2+
import clientsApi from '@/api/clientsApi';
3+
import type { Client } from '@/clients/interfaces/client';
4+
5+
const getClients = async(): Promise<Client[]> => {
6+
const { data } = await clientsApi.get<Client[]>('?_page=1');
7+
return data;
8+
}
9+
10+
const useClients = () => {
11+
12+
const { isLoading, data } = useQuery(
13+
['clients?page=', 1],
14+
() => getClients(),
15+
);
16+
17+
return {
18+
isLoading
19+
}
20+
21+
}
22+
23+
export default useClients;

‎02-pinia-app/src/clients/pages/ListPage.vue‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<script setup lang="ts">
2+
import ClientListComponent from '../components/ClientListComponent.vue';
23
34
</script>
45

56
<template>
67
<h2>Clients List</h2>
8+
<!-- Client List -->
9+
<ClientListComponent />
10+
<!-- Pagination numbers -->
11+
<!-- Loading modal -->
712
</template>
813

914

1015
<style scoped>
1116
12-
</style>
17+
</style>

‎02-pinia-app/src/main.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,22 @@ import router from './router';
55

66
import './assets/main.css';
77

8+
import { VueQueryPlugin } from '@tanstack/vue-query';
9+
810
const pinia = createPinia();
911
const app = createApp(App);
1012

1113
app.use(pinia);
1214
app.use(router);
1315

16+
VueQueryPlugin.install(app, {
17+
queryClientConfig: {
18+
defaultOptions: {
19+
queries: {
20+
cacheTime: 1000 * 60, // 1 minute
21+
}
22+
}
23+
}
24+
});
25+
1426
app.mount('#app');

‎02-pinia-app/yarn.lock‎

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,28 @@
177177
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz#8be36a1f66f3265389e90b5f9c9962146758f728"
178178
integrity sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==
179179

180+
"@tanstack/match-sorter-utils@^8.1.1":
181+
version "8.7.2"
182+
resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.7.2.tgz#6308c250308e103ab476928cc4ee26cf328716f5"
183+
integrity sha512-bptNeoexeDB947fWoCPwUchPSx5FA9gwzU0bkXz0du5pT8Ud2+1ob+xOgHj6EF3VN0kdXtLhwjPyhY7/dJglkg==
184+
dependencies:
185+
remove-accents "0.4.2"
186+
187+
"@tanstack/query-core@4.20.4":
188+
version "4.20.4"
189+
resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.20.4.tgz#1f7975a2db26a8bc2f382bad8a44cd422c846b17"
190+
integrity sha512-lhLtGVNJDsJ/DyZXrLzekDEywQqRVykgBqTmkv0La32a/RleILXy6JMLBb7UmS3QCatg/F/0N9/5b0i5j6IKcA==
191+
192+
"@tanstack/vue-query@^4.20.5":
193+
version "4.20.5"
194+
resolved "https://registry.yarnpkg.com/@tanstack/vue-query/-/vue-query-4.20.5.tgz#23d998768d62701b8399b75cfb5fb69113c60b69"
195+
integrity sha512-F+ybKBN6GAlSRYAYQmFVBZm6ASi7I7OYozobXvObGLxPuE33bxgp2UEnAlQmHFrzhH7okWM2gPDbCPASkcqk3A==
196+
dependencies:
197+
"@tanstack/match-sorter-utils" "^8.1.1"
198+
"@tanstack/query-core" "4.20.4"
199+
"@vue/devtools-api" "^6.4.2"
200+
vue-demi "^0.13.11"
201+
180202
"@types/json-schema@^7.0.9":
181203
version "7.0.11"
182204
resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
@@ -367,7 +389,7 @@
367389
"@vue/compiler-dom" "3.2.45"
368390
"@vue/shared" "3.2.45"
369391

370-
"@vue/devtools-api@^6.4.5":
392+
"@vue/devtools-api@^6.4.2", "@vue/devtools-api@^6.4.5":
371393
version "6.4.5"
372394
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.5.tgz#d54e844c1adbb1e677c81c665ecef1a2b4bb8380"
373395
integrity sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ==
@@ -496,6 +518,20 @@ array-union@^2.1.0:
496518
resolved "https://registry.yarnpkg.com/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
497519
integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
498520

521+
asynckit@^0.4.0:
522+
version "0.4.0"
523+
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
524+
integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
525+
526+
axios@^1.2.1:
527+
version "1.2.1"
528+
resolved "https://registry.yarnpkg.com/axios/-/axios-1.2.1.tgz#44cf04a3c9f0c2252ebd85975361c026cb9f864a"
529+
integrity sha512-I88cFiGu9ryt/tfVEi4kX2SITsvDddTajXTOFmt2uK1ZVA8LytjtdeyefdQWEf5PU8w+4SSJDoYnggflB5tW4A==
530+
dependencies:
531+
follow-redirects "^1.15.0"
532+
form-data "^4.0.0"
533+
proxy-from-env "^1.1.0"
534+
499535
balanced-match@^1.0.0:
500536
version "1.0.2"
501537
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@@ -626,6 +662,13 @@ color-name@~1.1.4:
626662
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
627663
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
628664

665+
combined-stream@^1.0.8:
666+
version "1.0.8"
667+
resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
668+
integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
669+
dependencies:
670+
delayed-stream "~1.0.0"
671+
629672
compressible@~2.0.16:
630673
version "2.0.18"
631674
resolved "https://registry.yarnpkg.com/compressible/-/compressible-2.0.18.tgz#af53cca6b070d4c3c0750fbd77286a6d7cc46fba"
@@ -755,6 +798,11 @@ define-properties@^1.1.3, define-properties@^1.1.4:
755798
has-property-descriptors "^1.0.0"
756799
object-keys "^1.1.1"
757800

801+
delayed-stream@~1.0.0:
802+
version "1.0.0"
803+
resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
804+
integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
805+
758806
depd@2.0.0, depd@~2.0.0:
759807
version "2.0.0"
760808
resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
@@ -1162,6 +1210,20 @@ flatted@^3.1.0:
11621210
resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
11631211
integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
11641212

1213+
follow-redirects@^1.15.0:
1214+
version "1.15.2"
1215+
resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
1216+
integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
1217+
1218+
form-data@^4.0.0:
1219+
version "4.0.0"
1220+
resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
1221+
integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
1222+
dependencies:
1223+
asynckit "^0.4.0"
1224+
combined-stream "^1.0.8"
1225+
mime-types "^2.1.12"
1226+
11651227
forwarded@0.2.0:
11661228
version "0.2.0"
11671229
resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -1706,7 +1768,7 @@ mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
17061768
resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
17071769
integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
17081770

1709-
mime-types@~2.1.24, mime-types@~2.1.34:
1771+
mime-types@^2.1.12, mime-types@~2.1.24, mime-types@~2.1.34:
17101772
version "2.1.35"
17111773
resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
17121774
integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
@@ -2036,6 +2098,11 @@ proxy-addr@~2.0.7:
20362098
forwarded "0.2.0"
20372099
ipaddr.js "1.9.1"
20382100

2101+
proxy-from-env@^1.1.0:
2102+
version "1.1.0"
2103+
resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
2104+
integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
2105+
20392106
punycode@^2.1.0:
20402107
version "2.1.1"
20412108
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
@@ -2091,6 +2158,11 @@ regexpp@^3.2.0:
20912158
resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
20922159
integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
20932160

2161+
remove-accents@0.4.2:
2162+
version "0.4.2"
2163+
resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
2164+
integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
2165+
20942166
require-directory@^2.1.1:
20952167
version "2.1.1"
20962168
resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -2495,7 +2567,7 @@ vite@^4.0.0:
24952567
optionalDependencies:
24962568
fsevents "~2.3.2"
24972569

2498-
vue-demi@*:
2570+
vue-demi@*, vue-demi@^0.13.11:
24992571
version "0.13.11"
25002572
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
25012573
integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==

0 commit comments

Comments
 (0)