fix: page query response time reduction and server load improvements

[stalgiag]

Overview

This PR is focused on improving load speed and responsiveness, with particular attention to the Test Queue page. These changes aim to reduce initial page load times, eliminate duplicate network requests, and improve perceived responsiveness through caching and progressive data fetching strategies.

Changes

1. Split the monolithic query into two separate queries:

• TEST_QUEUE_PAGE_QUERY: Lightweight initial query fetching only essential fields
• TEST_QUEUE_EXPANDED_ROW_QUERY: Detailed data fetched on-demand when rows are expanded
• Removed unnecessary data from the initial payload:
  • Nested test results and scenario results
  • Tester details not needed for initial render

2. Lean on apollo cache more

• Set Apollo Client default fetch policy to cache-first
• Added nextFetchPolicy: 'cache-first' to all queries to prevent automatic refetching
• Added proper cache key fields configuration for all entities
• Improved cache normalization with explicit keyFields configuration

3. Reduce size of large JS bundle

• Implemented React.lazy() for route-level code splitting
• Added webpack code splitting configuration:
  • Vendor bundles (third-party libraries)
  • Apollo bundles (GraphQL client)
  • React Bootstrap bundles (UI components)
  • Common chunks (shared code)
  • Runtime chunk for better caching
• Added webpackPrefetch hints to preload critical chunks

4. Address N+1 query issues on some routes

• Implemented DataLoader batching for:
  • TestPlanReport by ID
  • TestPlanRun by ID
  • CollectionJob by TestPlanRun ID
  • User ATs resolver
• Created batch loaders in GraphQL context to aggregate queries

5. Remove unused fields on queries

• Removed draftTestPlanRuns from DataManagement query (large nested data)
• Added totalScenarioCount resolver for efficient scenario counting
• Simplified TestQueue fragments to fetch only required fields
• Removed test result data from initial queries

6. Ensure that tab component content doesn't all fetch on page load

• Tab component now only fetches data when tab is actively selected

Notes

1. There is some cruft introduced in the TestQueue.test.js test due to my bad mocking skills. The only thing this does is introduce some annoying logs into our test runs. I will try to clean up the mock before this makes it to merging
2. I recommend testing this with a larger DB dump.

Review

I highly recommend that this be manually tested thoroughly. Ideally it could make it onto a deployed environment prior to merge (sandbox?) so that we can evaluate performance changes in that setting. Also, the webpack changes have not been thoroughly tested with build/deploy.

[stalgiag]

testPlans is huge. Even a 30s staleWhileRevalidate() helps a bunch

[ChrisC]

@stalgiag I just pulled this down locally and confirmed that all of the main pages are still loading. Everything does seem snappier and I think I'm seeing similar lighthouse scores as you reported (~60 on the test queue). The plan in the PR description makes sense to me.

Would leaning more on the apollo cache interfere with updates to the test queue in any way? (I'm thinking when testers get re-assigned, stats get updated, items getting added/removed to the queue, etc)

[stalgiag]

Yeah that is a place where this could definitely introduce issues. I've been manually testing and fixing any issues that I see with the cache not busting. I don't currently see any issues but ofc there are limits to my testing