defuj/apkt-eis
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add useQueryStore to handle GraphQL queries

Browse Source
This commit is contained in:
Dede Fuji Abdul 2024-01-08 10:25:21 +07:00
parent 1573672c84
commit 8228520851
4 changed files with 140 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

134
package-lock.json generated
View File

@ -8,7 +8,7 @@
"name": "eis",
"version": "0.0.1",
"dependencies": {
"@apollo/client": "^3.8.7",
"@apollo/client": "^3.8.8",
"@headlessui/tailwindcss": "^0.2.0",
"@headlessui/vue": "^1.7.16",
"@heroicons/vue": "^2.0.18",
@ -16,6 +16,7 @@
"@phosphor-icons/vue": "^2.1.6",
"@types/qs": "^6.9.9",
"@types/uuid": "^9.0.2",
"@vue/apollo-option": "^4.0.0-beta.12",
"devextreme": "23.1.5",
"devextreme-vue": "23.1.5",
"dotenv": "^16.3.1",
@ -98,17 +99,16 @@
}
},
"node_modules/@apollo/client": {
"version": "3.8.7",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.8.7.tgz",
"integrity": "sha512-DnQtFkQrCyxHTSa9gR84YRLmU/al6HeXcLZazVe+VxKBmx/Hj4rV8xWtzfWYX5ijartsqDR7SJgV037MATEecA==",
"version": "3.8.8",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.8.8.tgz",
"integrity": "sha512-omjd9ryGDkadZrKW6l5ktUAdS4SNaFOccYQ4ZST0HLW83y8kQaSZOCTNlpkoBUK8cv6qP8+AxOKwLm2ho8qQ+Q==",
"dependencies": {
"@graphql-typed-document-node/core": "^3.1.1",
"@wry/context": "^0.7.3",
"@wry/equality": "^0.5.6",
"@wry/trie": "^0.4.3",
"@wry/trie": "^0.5.0",
"graphql-tag": "^2.12.6",
"hoist-non-react-statics": "^3.3.2",
"optimism": "^0.17.5",
"optimism": "^0.18.0",
"prop-types": "^15.7.2",
"response-iterator": "^0.2.6",
"symbol-observable": "^4.0.0",
@ -2013,6 +2013,18 @@
"@volar/language-core": "1.10.3"
}
},
"node_modules/@vue/apollo-option": {
"version": "4.0.0-beta.12",
"resolved": "https://registry.npmjs.org/@vue/apollo-option/-/apollo-option-4.0.0-beta.12.tgz",
"integrity": "sha512-QgfLG1mRsLxRUpiwuOXJgvWt1UziiHu62zQaC3TnPWNmblTvWiEIl/FrqaJ3BbVC/kEu8dvLdvqic0zC/VA3Ww==",
"dependencies": {
"throttle-debounce": "^5.0.0"
},
"peerDependencies": {
"@apollo/client": "^3.2.1",
"vue": "^3.1.0"
}
},
"node_modules/@vue/babel-helper-vue-transform-on": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz",
@ -2350,6 +2362,22 @@
}
}
},
"node_modules/@wry/caches": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz",
"integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==",
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/@wry/caches/node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/@wry/context": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
@ -2383,9 +2411,9 @@
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
},
"node_modules/@wry/trie": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
"integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
"integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==",
"dependencies": {
"tslib": "^2.3.0"
},
@ -6988,15 +7016,27 @@
}
},
"node_modules/optimism": {
"version": "0.17.5",
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.17.5.tgz",
"integrity": "sha512-TEcp8ZwK1RczmvMnvktxHSF2tKgMWjJ71xEFGX5ApLh67VsMSTy1ZUlipJw8W+KaqgOmQ+4pqwkeivY89j+4Vw==",
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.0.tgz",
"integrity": "sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==",
"dependencies": {
"@wry/caches": "^1.0.0",
"@wry/context": "^0.7.0",
"@wry/trie": "^0.4.3",
"tslib": "^2.3.0"
}
},
"node_modules/optimism/node_modules/@wry/trie": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
"integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
"dependencies": {
"tslib": "^2.3.0"
},
"engines": {
"node": ">=8"
}
},
"node_modules/optimism/node_modules/tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@ -8732,6 +8772,14 @@
"node": ">=0.8"
}
},
"node_modules/throttle-debounce": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==",
"engines": {
"node": ">=12.22"
}
},
"node_modules/tinybench": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",
@ -9933,17 +9981,16 @@
}
},
"@apollo/client": {
"version": "3.8.7",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.8.7.tgz",
"integrity": "sha512-DnQtFkQrCyxHTSa9gR84YRLmU/al6HeXcLZazVe+VxKBmx/Hj4rV8xWtzfWYX5ijartsqDR7SJgV037MATEecA==",
"version": "3.8.8",
"resolved": "https://registry.npmjs.org/@apollo/client/-/client-3.8.8.tgz",
"integrity": "sha512-omjd9ryGDkadZrKW6l5ktUAdS4SNaFOccYQ4ZST0HLW83y8kQaSZOCTNlpkoBUK8cv6qP8+AxOKwLm2ho8qQ+Q==",
"requires": {
"@graphql-typed-document-node/core": "^3.1.1",
"@wry/context": "^0.7.3",
"@wry/equality": "^0.5.6",
"@wry/trie": "^0.4.3",
"@wry/trie": "^0.5.0",
"graphql-tag": "^2.12.6",
"hoist-non-react-statics": "^3.3.2",
"optimism": "^0.17.5",
"optimism": "^0.18.0",
"prop-types": "^15.7.2",
"response-iterator": "^0.2.6",
"symbol-observable": "^4.0.0",
@ -11263,6 +11310,14 @@
"@volar/language-core": "1.10.3"
}
},
"@vue/apollo-option": {
"version": "4.0.0-beta.12",
"resolved": "https://registry.npmjs.org/@vue/apollo-option/-/apollo-option-4.0.0-beta.12.tgz",
"integrity": "sha512-QgfLG1mRsLxRUpiwuOXJgvWt1UziiHu62zQaC3TnPWNmblTvWiEIl/FrqaJ3BbVC/kEu8dvLdvqic0zC/VA3Ww==",
"requires": {
"throttle-debounce": "^5.0.0"
}
},
"@vue/babel-helper-vue-transform-on": {
"version": "1.1.5",
"resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.1.5.tgz",
@ -11513,6 +11568,21 @@
}
}
},
"@wry/caches": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@wry/caches/-/caches-1.0.1.tgz",
"integrity": "sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==",
"requires": {
"tslib": "^2.3.0"
},
"dependencies": {
"tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
"integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
}
}
},
"@wry/context": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@wry/context/-/context-0.7.4.tgz",
@ -11544,9 +11614,9 @@
}
},
"@wry/trie": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
"integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
"version": "0.5.0",
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.5.0.tgz",
"integrity": "sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==",
"requires": {
"tslib": "^2.3.0"
},
@ -15029,15 +15099,24 @@
"integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q=="
},
"optimism": {
"version": "0.17.5",
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.17.5.tgz",
"integrity": "sha512-TEcp8ZwK1RczmvMnvktxHSF2tKgMWjJ71xEFGX5ApLh67VsMSTy1ZUlipJw8W+KaqgOmQ+4pqwkeivY89j+4Vw==",
"version": "0.18.0",
"resolved": "https://registry.npmjs.org/optimism/-/optimism-0.18.0.tgz",
"integrity": "sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==",
"requires": {
"@wry/caches": "^1.0.0",
"@wry/context": "^0.7.0",
"@wry/trie": "^0.4.3",
"tslib": "^2.3.0"
},
"dependencies": {
"@wry/trie": {
"version": "0.4.3",
"resolved": "https://registry.npmjs.org/@wry/trie/-/trie-0.4.3.tgz",
"integrity": "sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==",
"requires": {
"tslib": "^2.3.0"
}
},
"tslib": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
@ -16316,6 +16395,11 @@
"thenify": ">= 3.1.0 < 4"
}
},
"throttle-debounce": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
"integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
},
"tinybench": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.5.1.tgz",

3
package.json
View File

@ -15,7 +15,7 @@
"prepare": "tw-patch install"
},
"dependencies": {
"@apollo/client": "^3.8.7",
"@apollo/client": "^3.8.8",
"@headlessui/tailwindcss": "^0.2.0",
"@headlessui/vue": "^1.7.16",
"@heroicons/vue": "^2.0.18",
@ -23,6 +23,7 @@
"@phosphor-icons/vue": "^2.1.6",
"@types/qs": "^6.9.9",
"@types/uuid": "^9.0.2",
"@vue/apollo-option": "^4.0.0-beta.12",
"devextreme": "23.1.5",
"devextreme-vue": "23.1.5",
"dotenv": "^16.3.1",

7
src/main.ts
View File

@ -3,11 +3,18 @@ import '@lottiefiles/lottie-player'
import '@/assets/css/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createApolloProvider } from '@vue/apollo-option'
import { apolloClient } from './utils/graphql'
import App from './App.vue'
import router from './router'
const app = createApp(App)
const apolloProvider = createApolloProvider({
defaultClient: apolloClient,
});
app.use(createPinia())
app.use(apolloProvider)
app.use(router)
app.mount('#app')

21
src/stores/queries.ts Normal file
View File

@ -0,0 +1,21 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import gql from 'graphql-tag'
import { useQuery } from '@apollo/client'
export const useQueryStore = defineStore('query', () => {
const getUser = useQuery(gql`
query getUsers {
users {
id
firstname
lastname
email
}
}
`)
return {
getUser,
}
})