Page MenuHomePhabricator

Implement Advanced Caching and Data Management with React Query
Closed, ResolvedPublic

Description

Domain: Coding

Difficulty: Difficult

Description:
Currently, the application uses basic fetch() calls scattered throughout components. Refactor data fetching to:

  • Create custom React Query hooks (useActorSearch, useProductionSearch, etc.)
  • Implement proper error handling and retry logic
  • Add automatic caching with configurable staleTime
  • Support infinite queries for pagination
  • Handle loading and error states consistently
  • Add request deduplication
  • Implement background refetching for real-time data

Expected Outcome:

  • Custom hooks for all API calls
  • Centralized data fetching logic
  • Better performance through caching
  • Consistent error handling
  • Easier component testing
  • Reduced code duplication

Setup Steps:

  1. Create src/hooks/api/ directory
  2. Create hook file: useActorSearch.ts.
  3. Create hook file: useProductionSearch.ts.
  4. Create hook file: useSharedCastings.ts.
  5. Implement using @tanstack/react-query (already in dependencies)
  6. Update component pages to use new hooks
  7. Configure QueryClient with optimal settings
  8. Test caching behavior and error states

Links/References:

  • Dependency: @tanstack/react-query (v5.71.1) - already installed
  • Existing client: src/hooks/client-providers.tsx.
  • Documentation: React Query Docs

Details

Related Changes in Gerrit:

Event Timeline

@Collins, Good morning, I just want to bring a few observations while I was going through some tickets, not actually implementing. On this ticket,
One of the ticket requirements ("Support infinite queries") conflicts with the current backend reality.
The current backend endpoint (/actors/co-actors) returns the full list of collaborators in one request; it doesn't currently support page or offset parameters.
For the backend, looking at your findCoActors function. It executes a SPARQL query that has no inputs for limit or offset.

const findCoActorsQuery = `
      SELECT DISTINCT 
          ?actorY 
          ?actorYLabel 
          ?actorYDescription
          ?image
          (COUNT(DISTINCT ?work) AS ?sharedWorks) 
      WHERE {
          VALUES ?actorX { wd:${actorId} }
          
          ?work wdt:P161 ?actorX.
          ?work wdt:P161 ?actorY.
          
          FILTER(?actorY != ?actorX)
          
          OPTIONAL { ?actorY wdt:P18 ?image. }
          
          SERVICE wikibase:label { 
              bd:serviceParam wikibase:language '[AUTO_LANGUAGE],en'. 
              ?actorY rdfs:label ?actorYLabel .
              ?actorY schema:description ?actorYDescription .
          }
      }
      GROUP BY ?actorY ?actorYLabel ?actorYDescription ?image
      HAVING (COUNT(DISTINCT ?work) > 1)
      ORDER BY DESC(?sharedWorks)
  `;

There are two ways to go about this

  • Implementing client-side pagination that loads 20 at a time after getting all co-actors.
  • Or should I update the Backend Service to accept pagination parameters so we can do true server-side infinite loading?

If we go for option 2, I can fix it because I worked on the Sparql builder(Which has not been pushed due to the GitLab issue ), making this ticket to get completed with fixes from both backend and frontend

Change #1217826 had a related patch set uploaded (by Essa237; author: Essa237):

[labs/tools/WdTmCollab@main] This PR resolves https://phabricator.wikimedia.org/T412364 Here, hanges: - optimised caching settings (staleTime: 5 mins). - Created typed custom hooks in `src/hooks/api/`: - `useActorSearch` - `useActors` - `useCoActors` (supports server-side pagination params) ` - Refactored `ActorsPage` to use `useCoActors` hook, maintaining the 9-card grid layout with correct pagination logic. - Refactored `ActorDetailPage` to eliminate manual useEffect fetching. - Refactored `ProductionsPage` and `SharedActorsFromMovies` (Compare page) to use production-related hooks.

https://gerrit.wikimedia.org/r/1217826

Essa237 moved this task from In progress to Review on the WdTmCollab board.

Change #1217826 had a related patch set uploaded (by Essa237; author: Essa237):

[labs/tools/WdTmCollab@main] This PR resolves https://phabricator.wikimedia.org/T412364 Here, changes: - optimised caching settings (staleTime: 5 mins). - Created typed custom hooks in `src/hooks/api/`: - `useActorSearch` - `useActors` - `useCoActors` (supports server-side pagination params) ` - Refactored `ActorsPage` to use `useCoActors` hook, maintaining the 9-card grid layout with correct pagination logic. - Refactored `ActorDetailPage` to eliminate manual useEffect fetching. - Refactored `ProductionsPage` and `SharedActorsFromMovies` (Compare page) to use production-related hooks.

https://gerrit.wikimedia.org/r/1217826

Change #1217826 merged by jenkins-bot:

[labs/tools/WdTmCollab@main] Optimise caching on the app

https://gerrit.wikimedia.org/r/1217826