Add useQueryStore to handle GraphQL queries

src/main.ts

@@ -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')

src/stores/queries.ts

@@ -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,
+    }
+})