Skip to content

Commit 7040a19

Browse files
aminnausinaminnausin
committed
feat: move record api requests to tanstack
1 parent 88e7774 commit 7040a19

4 files changed

Lines changed: 128 additions & 32 deletions

File tree

‎resources/js/service/records/api.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/*
2+
ACTIONS for record data ?
3+
4+
Have get, add, and delete actions
5+
Run and commit to database (store) -> ?? What does that mean?
6+
*/
7+
import type { RecordStoreRequest } from '@/types/requests';
8+
import type { RecordResource } from '@/types/resources';
9+
10+
import { API } from '../api';
11+
12+
export default {
13+
createRecord(data: RecordStoreRequest) {
14+
return API.post<{ data: RecordResource }>('/records', data);
15+
},
16+
getRecords(params?: { limit?: number; page?: number }) {
17+
const queryParams = new URLSearchParams();
18+
if (params?.limit) queryParams.set('limit', params.limit.toString());
19+
if (params?.page) queryParams.set('page', params.page.toString());
20+
21+
const queryString = queryParams.toString();
22+
return API.get<{ data: RecordResource[] }>(`/records${queryString ? `?${queryString}` : ''}`);
23+
},
24+
25+
deleteRecord(id: number) {
26+
return API.delete(`/records/${id}`);
27+
},
28+
};

‎resources/js/service/records/useRecords.ts‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
// Eventually convert the records state in contentStore to a tanstack query composable
2+
import type { RecordStoreRequest } from '@/types/requests';
3+
import type { RecordResource } from '@/types/resources';
4+
5+
import { useMutation, useQuery } from '@tanstack/vue-query';
6+
import { useAuthStore } from '@/stores/AuthStore';
7+
import { queryClient } from '@/service/vue-query';
8+
import { storeToRefs } from 'pinia';
9+
import { computed } from 'vue';
10+
import api from './api';
11+
12+
export function useRecordsLimited(limit = 10) {
13+
const { userData } = storeToRefs(useAuthStore());
14+
15+
const query = useQuery<RecordResource[]>({
16+
queryKey: ['records', 'limited'],
17+
queryFn: async () => {
18+
const full = queryClient.getQueryData<RecordResource[]>(['records', 'full']);
19+
if (full) {
20+
return full.slice(0, limit);
21+
}
22+
23+
const res = await api.getRecords({ limit });
24+
return res.data.data;
25+
},
26+
staleTime: Infinity,
27+
placeholderData: [],
28+
enabled: computed(() => !!userData.value),
29+
});
30+
31+
return {
32+
stateRecords: query.data,
33+
getRecords: () => queryClient.invalidateQueries({ queryKey: ['records', 'limited'] }),
34+
...query,
35+
};
36+
}
37+
38+
export function useRecords() {
39+
const query = useQuery<RecordResource[]>({
40+
queryKey: ['records', 'full'],
41+
queryFn: async () => (await api.getRecords()).data.data ?? [],
42+
staleTime: 5 * 60 * 1000, // 5 minutes
43+
placeholderData: [],
44+
});
45+
46+
return {
47+
stateRecords: query.data.value,
48+
...query,
49+
};
50+
}
51+
52+
export function useRecord() {
53+
const { userData } = storeToRefs(useAuthStore());
54+
55+
const createRecord = useMutation({
56+
mutationFn: async (data: RecordStoreRequest) => {
57+
if (!userData.value) return;
58+
return api.createRecord(data);
59+
},
60+
onSuccess: (res) => {
61+
if (!res) return;
62+
63+
const newRecord = res.data.data;
64+
65+
// dont prepend to full history if not loaded yet to prevent query blocking
66+
queryClient.setQueryData<RecordResource[]>(['records', 'full'], (old) => (old ? [newRecord, ...old] : old));
67+
68+
queryClient.setQueryData<RecordResource[]>(['records', 'limited'], (old) => {
69+
if (!old) return [newRecord];
70+
return [newRecord, ...old].slice(0, 10);
71+
});
72+
},
73+
});
74+
75+
const deleteRecord = useMutation({
76+
mutationFn: api.deleteRecord,
77+
onSuccess: (_, deletedId) => {
78+
queryClient.setQueryData<RecordResource[]>(['records', 'full'], (old) => old?.filter((record) => record.id !== deletedId) ?? []);
79+
queryClient.setQueryData<RecordResource[]>(['records', 'limited'], (old) => old?.filter((record) => record.id !== deletedId) ?? []);
80+
},
81+
});
82+
83+
return {
84+
createRecord,
85+
deleteRecord,
86+
};
87+
}

‎resources/js/service/recordsService.ts‎

Lines changed: 0 additions & 22 deletions
This file was deleted.

‎resources/js/stores/ContentStore.js‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { sortObjectNew } from '@/service/sort/baseSort';
77
import { useAuthStore } from '@/stores/AuthStore';
88
import { toast } from '@/service/toaster/toastService';
99

10-
import recordsService from '@/service/recordsService';
10+
import recordsService from '@/service/records/api';
1111
import mediaAPI from '@/service/mediaAPI.ts';
1212

1313
export const useContentStore = defineStore('Content', () => {
@@ -141,22 +141,25 @@ export const useContentStore = defineStore('Content', () => {
141141
if (!userData.value) return;
142142

143143
if (fullRecordsLoaded.value) {
144-
Promise.resolve(stateRecords.value);
145-
return;
144+
return stateRecords.value;
146145
}
147146

148147
if (!limit) fullRecordsLoaded.value = true;
149148

150-
const { data, error } = await recordsService.getRecords(limit);
149+
try {
150+
const response = await recordsService.getRecords({ limit });
151+
console.log(response);
152+
153+
stateRecords.value = response.data?.data ?? [];
154+
return stateRecords.value;
155+
} catch (error) {
156+
const message = error?.response?.data?.message || error?.message || 'Unknown error occurred';
157+
console.error(message);
158+
159+
stateRecords.value = []; // always overwrite because if limit is set and results cached, no request is made. Otherwise its a full request. => idk what this meant
151160

152-
if (error) {
153-
const message = error?.message || data?.message || 'Unknown error occurred';
154-
console.log(message);
155161
throw new Error(message);
156162
}
157-
stateRecords.value = data?.data ?? []; // always overwrite because if limit is set and results cached, no request is made. Otherwise its a full request.
158-
159-
return Promise.resolve(stateRecords.value);
160163
}
161164

162165
async function getCategory(URL_CATEGORY, URL_FOLDER) {

0 commit comments

Comments
 (0)