wip: added a TanStackQueryProvider #283

zalexa19 · 2026-01-30T21:59:36Z

This is still wip

Copilot

Pull request overview

This PR migrates the project from react-query v3 to @tanstack/react-query v5, addressing breaking API changes and introducing a centralized query provider with global error handling.

Changes:

Replaced react-query with @tanstack/react-query v5 and updated all import statements
Created a new TanStackQueryProvider component with global error handling for 401 responses
Updated all useQuery and useMutation hooks to use the new v5 object-based configuration syntax

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
client/src/routes/root.tsx	Replaced QueryClientProvider setup with new TanStackQueryProvider component
client/src/pages/SearchPage.tsx	Updated to use new useSearchTrainee hook from data layer
client/src/hooks/useTraineeSearchData.tsx	Commented out old implementation (should be deleted)
client/src/hooks/useTraineeInfoData.tsx	Migrated useQuery and useMutation to v5 object syntax
client/src/hooks/useDashboardData.tsx	Migrated useQuery to v5 object syntax with inline data extraction
client/src/hooks/useCohortsData.tsx	Migrated useQuery to v5 object syntax with inline data extraction
client/src/hooks/interactions/interaction-queries.ts	Migrated all hooks to v5 syntax and improved error handling
client/src/hooks/education/test-queries.ts	Migrated all hooks to v5 object syntax
client/src/hooks/education/strike-queries.ts	Migrated useQuery to v5 object syntax
client/src/data/trainee/queries.ts	New file with useSearchTrainee hook implementation
client/src/data/tanstack/TanStackQueryProvider.tsx	New centralized provider with global error handling
client/src/components/education/TestsComponent.tsx	Updated import to use @tanstack/react-query
client/src/components/education/StrikesComponent.tsx	Updated import to use @tanstack/react-query
client/src/components/TraineeProfile.tsx	Updated import to use @tanstack/react-query
client/package.json	Added @tanstack/react-query packages and removed react-query
client/package-lock.json	Updated dependencies for the migration

Files not reviewed (1)

client/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-30T22:03:32Z

client/src/data/trainee/queries.ts

+
+export const useSearchTrainee = (search: string) => {
+  return useQuery({
+    queryKey: [queryKey],


The queryKey for the search results is missing the 'search' parameter. This means all searches will use the same cache key, causing incorrect data to be returned. The queryKey should include the search parameter to ensure different searches have different cache entries.

Suggested change

queryKey: [queryKey],

queryKey: [queryKey, search],

Copilot · 2026-01-30T22:03:32Z

client/src/data/trainee/queries.ts

+    queryKey: [queryKey],
+    queryFn: async () => {
+      const response = await axios.get(`/api/search?q=${search}&limit=20`);
+      console.log(response);


Console.log statement should be removed. Debug logging should not be present in production code.

Suggested change

console.log(response);

Copilot · 2026-01-30T22:03:32Z

client/src/hooks/useCohortsData.tsx

+      const resonse = await axios.get<Cohort[]>(`/api/cohorts`);
+      return resonse.data;


Typo: 'resonse' should be 'response'.

Suggested change

const resonse = await axios.get<Cohort[]>(`/api/cohorts`);

return resonse.data;

const response = await axios.get<Cohort[]>(`/api/cohorts`);

return response.data;

Copilot · 2026-01-30T22:03:33Z

client/src/hooks/useTraineeSearchData.tsx

+// /**
+//  * A React Query hook that fetches trainee search results form api.
+//  *
+//  * @param {string} search search keyword
+//  */
+// export const useTraineeSearchData = (search: string) => {
+//   return useQuery(
+//     {
+//       queryKey: ['search-results', search],
+//     }
+//     ['search-results', search],
+//     () => {
+//       return axios.get(`/api/search?q=${search}&limit=20`);
+//     },
+//     {
+//       enabled: search.length > 1, // Query runs only if search string has more than 1 character
+//       select: (response) => {
+//         const trainees: SearchResult[] = response.data.hits.data.map((trainee: SearchResult) => trainee);
+//         return trainees;
+//       },
+//     }
+//   );
+// };


This entire file contains only commented-out code. Since the functionality has been moved to client/src/data/trainee/queries.ts, this file should be deleted rather than left with commented code. Keeping dead code increases maintenance burden and can cause confusion.

Copilot · 2026-01-30T22:03:33Z

client/src/components/education/StrikesComponent.tsx

 import { StrikeDetailsModal } from './StrikeDetailsModal';
 import { StrikesList } from './StrikesList';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';


The invalidateQueries API has changed in TanStack Query v5. Instead of passing an array directly, you should pass an object with a queryKey property. This should be: queryClient.invalidateQueries({ queryKey: ['strikes', traineeId] })

Copilot · 2026-01-30T22:03:34Z

client/src/hooks/interactions/interaction-queries.ts

-    }
-  );
+    onSuccess: () => {
+      queryClient.invalidateQueries(['interactions', traineeId]);


The invalidateQueries API has changed in TanStack Query v5. Instead of passing an array directly, you should pass an object with a queryKey property. This should be: queryClient.invalidateQueries({ queryKey: ['interactions', traineeId] })

Copilot · 2026-01-30T22:03:34Z

client/src/hooks/interactions/interaction-queries.ts

-    }
-  );
+    onSuccess: () => {
+      queryClient.invalidateQueries(['interactions', traineeId]);


The invalidateQueries API has changed in TanStack Query v5. Instead of passing an array directly, you should pass an object with a queryKey property. This should be: queryClient.invalidateQueries({ queryKey: ['interactions', traineeId] })

Copilot · 2026-01-30T22:03:35Z

client/src/hooks/education/test-queries.ts

-      refetchOnWindowFocus: false,
-    }
-  );
+


Remove the extra blank line. The query options should be consistently formatted without blank lines between properties.

Suggested change

Copilot · 2026-01-30T22:03:35Z

client/src/hooks/useTraineeSearchData.tsx

-import { useQuery } from 'react-query';
-import axios from 'axios';
 import { SearchResult } from '../models';
+import axios from 'axios';


Unused import axios.

Suggested change

import axios from 'axios';

Copilot · 2026-01-30T22:03:35Z

client/src/hooks/useTraineeSearchData.tsx

-import axios from 'axios';
 import { SearchResult } from '../models';
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';


Unused import useQuery.

Suggested change

import { useQuery } from '@tanstack/react-query';

zalexa19 added 2 commits January 30, 2026 22:23

upgraded react-query

4bb6f89

wip: added a TanStackQueryProvider

4983327

Copilot AI review requested due to automatic review settings January 30, 2026 21:59

zalexa19 requested review from Aya-Alabrash, sima-milli and stasel as code owners January 30, 2026 21:59

HackYourFutures had a problem deploying to dojo-frontend-issue-92--76tkab January 30, 2026 21:59 Failure

Copilot started reviewing on behalf of zalexa19 January 30, 2026 21:59 View session

Copilot AI reviewed Jan 30, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wip: added a TanStackQueryProvider #283

wip: added a TanStackQueryProvider #283

Uh oh!

zalexa19 commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Copilot AI Jan 30, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const resonse = await axios.get<Cohort[]>(`/api/cohorts`);
		return resonse.data;

wip: added a TanStackQueryProvider #283

Are you sure you want to change the base?

wip: added a TanStackQueryProvider #283

Uh oh!

Conversation

zalexa19 commented Jan 30, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 30, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants