tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

fix/refactor: cache keys gefixt, useMutation argumenten rerefactord

Browse source
This commit is contained in:
Adriaan Jacquet 2025-04-13 14:37:29 +02:00
parent 75f1ff013b
commit 7bee08537a
4 changed files with 104 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

77
frontend/src/queries/assignments.ts
View file

@ -3,9 +3,11 @@ import type { QuestionsResponse } from "@/controllers/questions";
import type { SubmissionsResponse } from "@/controllers/submissions"; import type { SubmissionsResponse } from "@/controllers/submissions";
import { useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query"; import { useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query";
import { computed, toValue, type MaybeRefOrGetter } from "vue"; import { computed, toValue, type MaybeRefOrGetter } from "vue";
import { groupsQueryKey } from "./groups"; import { groupsQueryKey, invalidateAllGroupKeys } from "./groups";
import type { GroupsResponse } from "@/controllers/groups"; import type { GroupsResponse } from "@/controllers/groups";
import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment"; import type { AssignmentDTO } from "@dwengo-1/common/interfaces/assignment";
import type { QueryClient } from "@tanstack/react-query";
import { invalidateAllSubmissionKeys } from "./submissions";
function assignmentsQueryKey(classid: string, full: boolean) { function assignmentsQueryKey(classid: string, full: boolean) {
return [ "assignments", classid, full ]; return [ "assignments", classid, full ];
@ -20,6 +22,21 @@ function assignmentQuestionsQueryKey(classid: string, assignmentNumber: number,
return [ "assignment-questions", classid, assignmentNumber, full ]; return [ "assignment-questions", classid, assignmentNumber, full ];
} }
export async function invalidateAllAssignmentKeys(queryClient: QueryClient, classid?: string, assignmentNumber?: number) {
const keys = [
"assignment",
"assignment-submissions",
"assignment-questions",
];
for (let key of keys) {
const queryKey = [key, classid, assignmentNumber].filter(arg => arg !== undefined);
await queryClient.invalidateQueries({ queryKey: queryKey });
}
await queryClient.invalidateQueries({ queryKey: [ "assignments", classid ].filter(arg => arg !== undefined) });
}
function checkEnabled( function checkEnabled(
classid: string | undefined, classid: string | undefined,
assignmentNumber: number | undefined, assignmentNumber: number | undefined,
@ -62,64 +79,44 @@ export function useAssignmentQuery(
}); });
} }
export function useCreateAssignmentMutation( export function useCreateAssignmentMutation(): UseMutationReturnType<AssignmentResponse, Error, {cid: string, data: AssignmentDTO}, unknown> {
classid: MaybeRefOrGetter<string | undefined>,
): UseMutationReturnType<AssignmentResponse, Error, AssignmentDTO, unknown> {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { cid } = toValues(classid, 1, 1, true);
return useMutation({ return useMutation({
mutationFn: async (data) => new AssignmentController(cid!).createAssignment(data), mutationFn: async ({ cid, data }) => new AssignmentController(cid).createAssignment(data),
onSuccess: async () => { onSuccess: async (_) => {
await queryClient.invalidateQueries({ queryKey: assignmentsQueryKey(cid!, true) }); await queryClient.invalidateQueries({ queryKey: [ "assignments" ] });
await queryClient.invalidateQueries({ queryKey: assignmentsQueryKey(cid!, false) });
}, },
}); });
} }
export function useDeleteAssignmentMutation( export function useDeleteAssignmentMutation(): UseMutationReturnType<AssignmentResponse, Error, {cid: string, an: number}, unknown> {
classid: MaybeRefOrGetter<string | undefined>,
assignmentNumber: MaybeRefOrGetter<number | undefined>,
): UseMutationReturnType<AssignmentResponse, Error, number, unknown> {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { cid, an } = toValues(classid, assignmentNumber, 1, true);
return useMutation({ return useMutation({
mutationFn: async (id) => new AssignmentController(cid!).deleteAssignment(id), mutationFn: async ({ cid, an }) => new AssignmentController(cid).deleteAssignment(an),
onSuccess: async () => { onSuccess: async (response) => {
await queryClient.invalidateQueries({ queryKey: assignmentQueryKey(cid!, an!) }); const cid = response.assignment.within;
const an = response.assignment.id;
await queryClient.invalidateQueries({ queryKey: assignmentsQueryKey(cid!, true) }); await invalidateAllAssignmentKeys(queryClient, cid, an);
await queryClient.invalidateQueries({ queryKey: assignmentsQueryKey(cid!, false) }); await invalidateAllGroupKeys(queryClient, cid, an);
await invalidateAllSubmissionKeys(queryClient, cid, an);
await queryClient.invalidateQueries({ queryKey: assignmentSubmissionsQueryKey(cid!, an!, true) });
await queryClient.invalidateQueries({ queryKey: assignmentSubmissionsQueryKey(cid!, an!, false) });
await queryClient.invalidateQueries({ queryKey: assignmentQuestionsQueryKey(cid!, an!, false) });
await queryClient.invalidateQueries({ queryKey: assignmentQuestionsQueryKey(cid!, an!, true) });
// should probably invalidate all groups related to assignment
await queryClient.invalidateQueries({ queryKey: groupsQueryKey(cid!, an!, false) });
await queryClient.invalidateQueries({ queryKey: groupsQueryKey(cid!, an!, true) });
}, },
}); });
} }
export function useUpdateAssignmentMutation( export function useUpdateAssignmentMutation(): UseMutationReturnType<AssignmentResponse, Error, {cid: string, an: number, data: Partial<AssignmentDTO>}, unknown> {
classid: MaybeRefOrGetter<string | undefined>,
assignmentNumber: MaybeRefOrGetter<number | undefined>,
): UseMutationReturnType<AssignmentResponse, Error, Partial<AssignmentDTO>, unknown> {
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const { cid, an } = toValues(classid, assignmentNumber, 1, true);
return useMutation({ return useMutation({
mutationFn: async (data) => new AssignmentController(cid!).updateAssignment(an!, data), mutationFn: async ({ cid, an, data }) => new AssignmentController(cid).updateAssignment(an, data),
onSuccess: async () => { onSuccess: async (response) => {
await queryClient.invalidateQueries({ queryKey: groupsQueryKey(cid!, an!, true) }); const cid = response.assignment.within;
await queryClient.invalidateQueries({ queryKey: groupsQueryKey(cid!, an!, false) }); const an = response.assignment.id;
await queryClient.invalidateQueries({ queryKey: assignmentsQueryKey(cid!, true) }); await invalidateAllGroupKeys(queryClient, cid, an);
await queryClient.invalidateQueries({ queryKey: assignmentsQueryKey(cid!, false) }); await queryClient.invalidateQueries({ queryKey: [ "assignments" ] });
}, },
}); });
} }

38
frontend/src/queries/classes.ts
View file

@ -3,6 +3,9 @@ import type { StudentsResponse } from "@/controllers/students";
import type { ClassDTO } from "@dwengo-1/common/interfaces/class"; import type { ClassDTO } from "@dwengo-1/common/interfaces/class";
import { QueryClient, useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query"; import { QueryClient, useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query";
import { computed, toValue, type MaybeRefOrGetter } from "vue"; import { computed, toValue, type MaybeRefOrGetter } from "vue";
import { invalidateAllAssignmentKeys } from "./assignments";
import { invalidateAllGroupKeys } from "./groups";
import { invalidateAllSubmissionKeys } from "./submissions";
const classController = new ClassController(); const classController = new ClassController();
@ -23,19 +26,24 @@ function classTeacherInvitationsKey(classid: string, full: boolean) {
return ["class-teacher-invitations", classid, full]; return ["class-teacher-invitations", classid, full];
} }
function classAssignmentsKey(classid: string, full: boolean) { function classAssignmentsKey(classid: string, full: boolean) {
return ["class-assignments", classid]; return ["class-assignments", classid, full];
} }
/* Function to invalidate all caches with certain class id */ export async function invalidateAllClassKeys(queryClient: QueryClient, classid?: string) {
async function invalidateAll(classid: string, queryClient: QueryClient): Promise<void> { const keys = [
await queryClient.invalidateQueries({ queryKey: ["classes"] }); "class",
await queryClient.invalidateQueries({ queryKey: classQueryKey(classid) }); "class-students",
for (let v of [true, false]) { "class-teachers",
await queryClient.invalidateQueries({ queryKey: classStudentsKey(classid, v) }); "class-teacher-invitations",
await queryClient.invalidateQueries({ queryKey: classTeachersKey(classid, v) }); "class-assignments",
await queryClient.invalidateQueries({ queryKey: classAssignmentsKey(classid, v) }); ];
await queryClient.invalidateQueries({ queryKey: classTeacherInvitationsKey(classid, v) });
for (let key of keys) {
const queryKey = [key, classid].filter(arg => arg !== undefined);
await queryClient.invalidateQueries({ queryKey: queryKey });
} }
await queryClient.invalidateQueries({ queryKey: [ "classes" ] });
} }
/* Queries */ /* Queries */
@ -74,7 +82,10 @@ export function useDeleteClassMutation(): UseMutationReturnType<ClassResponse, E
return useMutation({ return useMutation({
mutationFn: async (id) => classController.deleteClass(id), mutationFn: async (id) => classController.deleteClass(id),
onSuccess: async (data) => { onSuccess: async (data) => {
await invalidateAll(data.class.id, queryClient); await invalidateAllClassKeys(queryClient, data.class.id);
await invalidateAllAssignmentKeys(queryClient, data.class.id);
await invalidateAllGroupKeys(queryClient, data.class.id);
await invalidateAllSubmissionKeys(queryClient, data.class.id);
}, },
}); });
} }
@ -85,7 +96,10 @@ export function useUpdateClassMutation(): UseMutationReturnType<ClassResponse, E
return useMutation({ return useMutation({
mutationFn: async (data) => classController.updateClass(data.id, data), mutationFn: async (data) => classController.updateClass(data.id, data),
onSuccess: async (data) => { onSuccess: async (data) => {
await invalidateAll(data.class.id, queryClient); await invalidateAllClassKeys(queryClient, data.class.id);
await invalidateAllAssignmentKeys(queryClient, data.class.id);
await invalidateAllGroupKeys(queryClient, data.class.id);
await invalidateAllSubmissionKeys(queryClient, data.class.id);
}, },
}); });
} }

22
frontend/src/queries/groups.ts
View file

@ -3,7 +3,7 @@ import { GroupController, type GroupResponse, type GroupsResponse } from "@/cont
import type { QuestionsResponse } from "@/controllers/questions"; import type { QuestionsResponse } from "@/controllers/questions";
import type { SubmissionsResponse } from "@/controllers/submissions"; import type { SubmissionsResponse } from "@/controllers/submissions";
import type { GroupDTO } from "@dwengo-1/common/interfaces/group"; import type { GroupDTO } from "@dwengo-1/common/interfaces/group";
import { useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query"; import { QueryClient, useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query";
import { computed, toValue, type MaybeRefOrGetter } from "vue"; import { computed, toValue, type MaybeRefOrGetter } from "vue";
export function groupsQueryKey(classid: string, assignmentNumber: number, full: boolean) { export function groupsQueryKey(classid: string, assignmentNumber: number, full: boolean) {
@ -19,6 +19,26 @@ function groupQuestionsQueryKey(classid: string, assignmentNumber: number, group
return [ "group-questions", classid, assignmentNumber, groupNumber, full ]; return [ "group-questions", classid, assignmentNumber, groupNumber, full ];
} }
export async function invalidateAllGroupKeys(
queryClient: QueryClient,
classid?: string,
assignmentNumber?: number,
groupNumber?: number,
) {
const keys = [
"group",
"group-submissions",
"group-questions",
];
for (let key of keys) {
const queryKey = [key, classid, assignmentNumber, groupNumber].filter(arg => arg !== undefined);
await queryClient.invalidateQueries({ queryKey: queryKey });
}
await queryClient.invalidateQueries({ queryKey: [ "groups", classid, assignmentNumber ].filter(arg => arg !== undefined) });
}
function checkEnabled( function checkEnabled(
classid: string | undefined, classid: string | undefined,
assignmentNumber: number | undefined, assignmentNumber: number | undefined,

21
frontend/src/queries/submissions.ts
View file

@ -1,6 +1,6 @@
import { SubmissionController, type SubmissionResponse, type SubmissionsResponse } from "@/controllers/submissions"; import { SubmissionController, type SubmissionResponse, type SubmissionsResponse } from "@/controllers/submissions";
import type { SubmissionDTO } from "@dwengo-1/common/interfaces/submission"; import type { SubmissionDTO } from "@dwengo-1/common/interfaces/submission";
import { useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query"; import { QueryClient, useMutation, useQuery, useQueryClient, type UseMutationReturnType, type UseQueryReturnType } from "@tanstack/vue-query";
import { computed, toValue, type MaybeRefOrGetter } from "vue"; import { computed, toValue, type MaybeRefOrGetter } from "vue";
function submissionsQueryKey(classid: string, assignmentNumber: number, groupNumber: number, full: boolean) { function submissionsQueryKey(classid: string, assignmentNumber: number, groupNumber: number, full: boolean) {
@ -10,6 +10,25 @@ function submissionQueryKey(classid: string, assignmentNumber: number, groupNumb
return [ "submission", classid, assignmentNumber, groupNumber, submissionNumber ]; return [ "submission", classid, assignmentNumber, groupNumber, submissionNumber ];
} }
export async function invalidateAllSubmissionKeys(
queryClient: QueryClient,
classid?: string,
assignmentNumber?: number,
groupNumber?: number,
submissionNumber?: number,
) {
const keys = [
"submission",
];
for (let key of keys) {
const queryKey = [key, classid, assignmentNumber, groupNumber, submissionNumber].filter(arg => arg !== undefined);
await queryClient.invalidateQueries({ queryKey: queryKey });
}
await queryClient.invalidateQueries({ queryKey: [ "submissions", classid, assignmentNumber, groupNumber ].filter(arg => arg !== undefined) });
}
function checkEnabled( function checkEnabled(
classid: string | undefined, classid: string | undefined,
assignmentNumber: number | undefined, assignmentNumber: number | undefined,