Merge pull request #142 from traPtitech/refactor/queryclient-architecture

Refactor/queryclient architecture

Author: mumumu6

src/api/queries/keys.ts

@@ -1,10 +1,10 @@
-export const meKeys = {
+const meKeys = {
   all: ['me'] as const,
   questionGroupAnswers: (questionGroupId: number) =>
     ['me', 'question-groups', questionGroupId, 'answers'] as const,
 }
 
-export const campKeys = {
+const campKeys = {
   all: ['camps'] as const,
 
   lists: () => ['camps', 'list'] as const,
@@ -20,8 +20,7 @@ export const campKeys = {
   dashboard: (id: number) => ['camps', 'detail', id, 'dashboard'] as const,
 }
 
-// Icon-related keys
-export const iconKeys = {
+const iconKeys = {
   all: ['icons'] as const,
   user: (id: string) => ['icons', 'user', id] as const,
 }

src/components/generic/UserIcon.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, useAttrs } from 'vue'
 import { useQuery } from '@tanstack/vue-query'
-import { iconKeys } from '@/api/queries/keys'
+import { qk } from '@/api/queries/keys'
 import { useUserStore } from '@/store'
 
 const props = defineProps<{ id?: string; size: number; idTooltip?: boolean }>()
@@ -28,7 +28,7 @@ const {
   isFetching,
   isError,
 } = useQuery<string, Error>({
-  queryKey: iconKeys.user(userId),
+  queryKey: qk.icons.user(userId),
   staleTime: 24 * 60 * 60_000, // 24h
   gcTime: 24 * 60 * 60_000, // 24h
   retry: 0,

src/components/information/QuestionGroupPanel.vue

@@ -5,14 +5,15 @@ import { ref, computed, onMounted, reactive, toRaw } from 'vue'
 import { useCampStore } from '@/store'
 import QuestionGroupEditor from '@/components/information/QuestionGroupEditor.vue'
 import QuestionGroupViewer from '@/components/information/QuestionGroupViewer.vue'
-import { useMutation } from '@tanstack/vue-query'
-import { queryClient } from '@/lib/queryClient'
+import { useMutation, useQueryClient } from '@tanstack/vue-query'
 import { qk } from '@/api/queries/keys'
 
 type QuestionGroup = components['schemas']['QuestionGroupResponse']
 type Question = components['schemas']['QuestionResponse']
 type Camp = components['schemas']['CampResponse']
 
+const queryClient = useQueryClient()
+
 const props = defineProps<{
   questionGroup: QuestionGroup
   camp: Camp

src/store.ts

@@ -2,14 +2,15 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type { components } from '@/api/schema'
 import { apiClient } from '@/api/apiClient'
-import { queryClient } from '@/lib/queryClient'
+import { useQueryClient } from '@tanstack/vue-query'
 import { qk } from '@/api/queries/keys'
 
 type User = components['schemas']['UserResponse']
 type Camp = components['schemas']['CampResponse']
 
 export const useUserStore = defineStore('user', () => {
   const user = ref<User>()
+  const queryClient = useQueryClient()
 
   const initUser = async () => {
     const data = await queryClient.ensureQueryData({
@@ -39,6 +40,7 @@ export const useUserStore = defineStore('user', () => {
 })
 
 export const useCampStore = defineStore('camp', () => {
+  const queryClient = useQueryClient()
   const latestCamp = ref<Camp>()
   const allCamps = ref<Camp[]>([])
   const hasRegisteredLatest = ref(false) // 最新の合宿に参加登録済みかどうか
@@ -122,7 +124,7 @@ export const useCampStore = defineStore('camp', () => {
     hasRegisteredLatest.value = false
     // 参加取り消し後は参加者リストを即時更新
     const participantsKey = qk.camps.participants(campId)
-    
+
     await queryClient.fetchQuery({
       queryKey: participantsKey,
       queryFn: async () => {