fix: stop replacing the shell's query client site-wide

App providers wrap the whole site, so gradebook's QueryClientProvider
imposed its settings on every other app sharing the site. Its query
options now live on gradebook's own hooks.

Fixes #634

Co-Authored-By: Claude <noreply@anthropic.com>

Author: arbrandes

README.rst

@@ -176,16 +176,12 @@ Directory Structure
 
   * ``app.ts``
 
-    * The ``App`` object consumed by ``site.config.*.tsx`` — wires ``appId``, ``routes``, and ``providers`` for frontend-base to register.
+    * The ``App`` object consumed by ``site.config.*.tsx`` - wires ``appId``, ``routes``, and ``slots`` for frontend-base to register.
 
   * ``routes.tsx``
 
     * React Router route definitions for the app.
 
-  * ``providers.tsx``
-
-    * App-scoped context providers registered with frontend-base.
-
   * ``slots``
 
     * Slots this app exposes for host sites to plug into.

src/app.ts

@@ -1,13 +1,11 @@
 import { App } from '@openedx/frontend-base';
 import { appId } from './constants';
 import routes from './routes';
-import providers from './providers';
 import slots from './slots';
 
 const app: App = {
   appId,
   routes,
-  providers,
   slots,
 };
 

src/components/BulkManagementHistoryView/data/apiHook.ts

@@ -1,6 +1,5 @@
-import { useQuery } from '@tanstack/react-query';
-
 import { useAssignmentTypes, useCourseIdWithGate } from '@src/data/apiHook';
+import { useGradebookQuery } from '@src/data/query';
 
 import { getBulkOperationHistory } from './api';
 import { bulkOperationHistoryQueryKeys } from './queryKeys';
@@ -18,7 +17,7 @@ const EMPTY_ARRAY: never[] = [];
 export const useBulkOperationHistory = (
   courseId: string,
   { enabled = true }: { enabled?: boolean } = {},
-) => useQuery({
+) => useGradebookQuery({
   queryKey: bulkOperationHistoryQueryKeys.byCourse(courseId),
   queryFn: () => getBulkOperationHistory(courseId),
   enabled: !!courseId && enabled,

src/components/GradebookFilters/data/apiHook.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useGradebookQuery } from '@src/data/query';
 
 import { getCohorts, getTracks } from './api';
 import { cohortsQueryKeys, tracksQueryKeys } from './queryKeys';
@@ -11,7 +11,7 @@ import { cohortsQueryKeys, tracksQueryKeys } from './queryKeys';
 export const useCohorts = (
   courseId: string,
   { enabled = true }: { enabled?: boolean } = {},
-) => useQuery({
+) => useGradebookQuery({
   queryKey: cohortsQueryKeys.byCourse(courseId),
   queryFn: () => getCohorts(courseId),
   enabled: !!courseId && enabled,
@@ -25,7 +25,7 @@ export const useCohorts = (
 export const useTracks = (
   courseId: string,
   { enabled = true }: { enabled?: boolean } = {},
-) => useQuery({
+) => useGradebookQuery({
   queryKey: tracksQueryKeys.byCourse(courseId),
   queryFn: () => getTracks(courseId),
   enabled: !!courseId && enabled,

src/components/GradesView/data/apiHook.ts

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import lms from '@src/data/services/lms';
 import { sortAlphaAsc } from '@src/data/formatUtils';
 import { filtersSnapshot } from '@src/data/filtersSnapshot';
 import { useGradebookUi } from '@src/data/gradebookUiContext';
 import { useCourseIdWithGate } from '@src/data/apiHook';
 import { useCourseId } from '@src/data/courseIdContext';
+import { useGradebookQuery } from '@src/data/query';
 import {
   trackGradesDisplayed,
   trackGradeOverrideSucceeded,
@@ -19,7 +20,7 @@ import {
 import { bulkOperationHistoryQueryKeys } from '@src/components/BulkManagementHistoryView/data/queryKeys';
 
 import { getGradeOverrideHistory, getGrades, getGradesPage } from './api';
-import { gradeOverrideHistoryQueryKeys, gradesQueryKeys } from './queryKeys';
+import { gradeMutationKeys, gradeOverrideHistoryQueryKeys, gradesQueryKeys } from './queryKeys';
 import { buildGradesFetchParams } from './utils';
 
 /**
@@ -45,7 +46,7 @@ export const useGrades = (
   courseId: string,
   gradesPageEndpoint: string | null,
   { enabled = true }: { enabled?: boolean } = {},
-) => useQuery({
+) => useGradebookQuery({
   queryKey: [...gradesQueryKeys.byCourse(courseId), gradesPageEndpoint ?? 'base'],
   queryFn: async () => {
     const data = gradesPageEndpoint
@@ -143,7 +144,7 @@ export const useGradesData = (): GradesData => {
  * is not worth retrying.
  */
 export const useGradeOverrideHistory = (subsectionId?: string, userId?: string | number) => (
-  useQuery({
+  useGradebookQuery({
     queryKey: gradeOverrideHistoryQueryKeys.byCell(subsectionId ?? null, userId ?? null),
     queryFn: () => getGradeOverrideHistory(subsectionId as string, userId as string | number),
     enabled: !!subsectionId && userId !== undefined && userId !== null,
@@ -187,6 +188,7 @@ export const useUpdateGrades = () => {
   const courseId = useCourseId();
   const { setShowSuccess, setGradesPageEndpoint, modalState } = useGradebookUi();
   const mutation = useMutation({
+    mutationKey: gradeMutationKeys.updateGrades,
     mutationFn: (updateData: GradeOverrideUpdate[]) => lms.api.updateGradebookData(courseId, updateData),
     onSuccess: ({ data }, updateData) => {
       trackGradeOverrideSucceeded(courseId, data);
@@ -238,6 +240,7 @@ export const useSubmitImportGradesButtonData = () => {
     setCsvUploadErrors,
   } = useGradebookUi();
   const mutation = useMutation<unknown, CsvUploadError, FormData>({
+    mutationKey: gradeMutationKeys.uploadGradeCsv,
     mutationFn: (formData) => lms.api.uploadGradeCsv(courseId, formData),
     onMutate: () => {
       resetCsvUpload();

src/components/GradesView/data/hooks.js

@@ -7,6 +7,7 @@ import { useFilters } from '@src/data/filtersContext';
 import { useGradebookUi } from '@src/data/gradebookUiContext';
 import { useCanViewGradebook } from '@src/data/apiHook';
 import { useCourseId } from '@src/data/courseIdContext';
+import { BASE_KEY } from '@src/data/queryKeys';
 import {
   useSelectedCohortEntry,
   useSelectedTrackEntry,
@@ -87,12 +88,13 @@ export const useSelectedAssignmentLabel = () => useSelectedAssignmentData()?.lab
 /**
  * useShouldShowSpinner()
  * The busy indicator: the roles gate combined with the grades query fetching or
- * any in-flight mutation (grade override save / CSV upload).
+ * one of the gradebook's own mutations in flight (grade override save / CSV
+ * upload).
  */
 export const useShouldShowSpinner = () => {
   const canViewGradebook = useCanViewGradebook();
   const { isFetching } = useGradesData();
-  const mutatingCount = useIsMutating();
+  const mutatingCount = useIsMutating({ mutationKey: BASE_KEY });
   return canViewGradebook && (isFetching || mutatingCount > 0);
 };
 

src/components/GradesView/data/hooks.test.ts

@@ -6,6 +6,7 @@ import { useFilters } from '@src/data/filtersContext';
 import { useGradebookUi } from '@src/data/gradebookUiContext';
 import { useCanViewGradebook } from '@src/data/apiHook';
 import { useCourseId } from '@src/data/courseIdContext';
+import { BASE_KEY } from '@src/data/queryKeys';
 import {
   useSelectedCohortEntry, useSelectedTrackEntry,
 } from '@src/components/GradebookFilters/data/hooks';
@@ -217,6 +218,11 @@ describe('GradesView/data hooks', () => {
       const { result } = renderHook(useShouldShowSpinner);
       expect(result.current).toBe(true);
     });
+
+    it('only counts the gradebook\'s own mutations', () => {
+      renderHook(useShouldShowSpinner);
+      expect(useIsMutatingMock).toHaveBeenCalledWith({ mutationKey: BASE_KEY });
+    });
   });
 
   describe('read-model hooks', () => {

src/components/GradesView/data/queryKeys.ts

@@ -9,6 +9,11 @@ export const gradesQueryKeys = {
   byCourse: (courseId: string) => [...BASE_KEY, courseId, 'grades'] as const,
 };
 
+export const gradeMutationKeys = {
+  updateGrades: [...BASE_KEY, 'updateGrades'] as const,
+  uploadGradeCsv: [...BASE_KEY, 'uploadGradeCsv'] as const,
+};
+
 /** Grade-override history for one learner on one subsection (edit modal). */
 export const gradeOverrideHistoryQueryKeys = {
   all: [...BASE_KEY, 'gradeOverrideHistory'] as const,

src/data/apiHook.test.ts

@@ -77,7 +77,8 @@ describe('root apiHook', () => {
     });
 
     it('returns false when the roles query errors out', async () => {
-      canViewMock.mockRejectedValue(new Error('boom'));
+      // 4xx-shaped so the shared retry rule (`query.ts`) doesn't retry it.
+      canViewMock.mockRejectedValue({ response: { status: 403 } });
       const { result } = renderQueryHook(useCanViewGradebook);
       await waitFor(() => expect(result.current).toBe(false));
     });

src/data/apiHook.ts

@@ -1,7 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
-
 import { getAssignmentTypes, getCanUserViewGradebook } from './api';
 import { useCourseId } from './courseIdContext';
+import { useGradebookQuery } from './query';
 import { assignmentTypesQueryKeys, rolesQueryKeys } from './queryKeys';
 
 /**
@@ -12,7 +11,7 @@ import { assignmentTypesQueryKeys, rolesQueryKeys } from './queryKeys';
  */
 export const useCanUserViewGradebook = () => {
   const courseId = useCourseId();
-  return useQuery({
+  return useGradebookQuery({
     queryKey: rolesQueryKeys.byCourse(courseId),
     queryFn: () => getCanUserViewGradebook(courseId),
     enabled: !!courseId,
@@ -28,7 +27,7 @@ export const useCanUserViewGradebook = () => {
 export const useAssignmentTypes = (
   courseId: string,
   { enabled = true }: { enabled?: boolean } = {},
-) => useQuery({
+) => useGradebookQuery({
   queryKey: assignmentTypesQueryKeys.byCourse(courseId),
   queryFn: () => getAssignmentTypes(courseId),
   enabled: !!courseId && enabled,