client vs server render issues

nextjs/src/hooks/canvas/canvasHooks.ts

@@ -1,5 +1,6 @@
 import { canvasService } from "@/services/canvas/canvasService";
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { QueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { canvasCourseModuleKeys } from "./canvasModuleHooks";
 
 export const canvasKeys = {
   allTerms: ["all canvas terms"] as const,
@@ -34,4 +35,4 @@ export const useCanvasTermsQuery = (queryDate: Date) => {
       return currentTerms;
     },
   });
-};
+};

nextjs/src/hooks/canvas/canvasModuleHooks.ts

@@ -0,0 +1,34 @@
+import { canvasModuleService } from "@/services/canvas/canvasModuleService";
+import {
+  useMutation,
+  useQueryClient,
+  useSuspenseQuery,
+} from "@tanstack/react-query";
+import { useLocalCourseSettingsQuery } from "../localCourse/localCoursesHooks";
+
+export const canvasCourseModuleKeys = {
+  modules: (canvasId: number) => ["canvas", canvasId, "module list"] as const,
+};
+
+export const useCanvasModulesQuery = () => {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  return useSuspenseQuery({
+    queryKey: canvasCourseModuleKeys.modules(settings.canvasId),
+    queryFn: async () =>
+      await canvasModuleService.getCourseModules(settings.canvasId),
+  });
+};
+
+export const useAddCanvasModuleMutation = () => {
+  const { data: settings } = useLocalCourseSettingsQuery();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (moduleName: string) =>
+      await canvasModuleService.createModule(settings.canvasId, moduleName),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: canvasCourseModuleKeys.modules(settings.canvasId),
+      });
+    },
+  });
+};