ref(project-detail): Use relative period params for previous period queries (#113100)

Some of the cards on the Project Details pages cause re-fetch cascades:

<img width="799" height="230" alt="Screenshot 2026-04-15 at 4 05 13 PM"
src="https://github.com/user-attachments/assets/3fc21cca-5bb5-4f3b-8180-46ae61078d2b"
/>

<img width="485" height="153" alt="Screenshot 2026-04-15 at 4 06 08 PM"
src="https://github.com/user-attachments/assets/ae787bce-6823-47a2-b1b6-b454a15adde6"
/>

The loop is:

1. Render the component
2. Take the current period (e.g., 14d) and calculate the previous period
to the second (e.g., 2026-03-17T16:15:00 - 2026-04-01T16:15:00)
3. Fetch the data from the previous period using the previous period's
timestamps
4. Data arrives, re-render component
5. Calculate new previous period (e.g., 2026-03-17T16:15:15 -
2026-04-01T16:15:15)

Loop forever. There are a few possible solutions here, including
memoizing the component. Instead, I thought it would be simpler to use
the same approach that some of the other card are using, which is the
`statsPeriodStart` and `statsPeriodEnd` query parameters. Instead of a
timestamp, they specify the start and end as strings, so e.g., `28d` to
`14d` to fetch the previous period. This creates a stable query key for
Tan Stack Query, and stops the refetch. We also could have, for example,
dropped down to a bigger precision (instead of using seconds), but this
seems the tidiest to me.

This is an alternative to
#113087

I'm not sure why those other cards didn't use `statsPeriodStart`, maybe
it wasn't available at the time, or the engineer didn't know about it?

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: gggritso

static/app/views/projectDetail/projectScoreCards/projectAnrScoreCard.spec.tsx

@@ -46,7 +46,7 @@ describe('ProjectDetail > ProjectAnr', () => {
 
     endpointMockPreviousPeriod = MockApiClient.addMockResponse({
       url: `/organizations/${organization.slug}/sessions/`,
-      match: [MockApiClient.matchQuery({start: '2017-10-03T02:41:20.000'})], // setup mocks a constant current date, so this works
+      match: [MockApiClient.matchQuery({statsPeriodStart: '14d'})],
       body: {
         groups: [
           {
@@ -96,15 +96,15 @@ describe('ProjectDetail > ProjectAnr', () => {
       `/organizations/${organization.slug}/sessions/`,
       expect.objectContaining({
         query: {
-          end: '2017-10-10T02:41:20.000',
           environment: [],
           field: ['anr_rate()'],
           includeSeries: '0',
           includeTotals: '1',
           interval: '1h',
           project: [1],
           query: 'release:abc',
-          start: '2017-10-03T02:41:20.000',
+          statsPeriodStart: '14d',
+          statsPeriodEnd: '7d',
         },
       })
     );

static/app/views/projectDetail/projectScoreCards/projectAnrScoreCard.tsx

@@ -8,7 +8,7 @@ import {doSessionsRequest} from 'sentry/actionCreators/sessions';
 import {shouldFetchPreviousPeriod} from 'sentry/components/charts/utils';
 import {URL_PARAM} from 'sentry/components/pageFilters/constants';
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
-import {parseStatsPeriod} from 'sentry/components/timeRangeSelector/utils';
+import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization, SessionApiResponse} from 'sentry/types/organization';
@@ -45,6 +45,11 @@ export function ProjectAnrScoreCard({
   const {environments, projects, datetime} = selection;
   const {start, end, period} = datetime;
 
+  const doubledPeriod = getPeriod(
+    {period, start: undefined, end: undefined},
+    {shouldDoublePeriod: true}
+  ).statsPeriod;
+
   const api = useApi();
 
   const [sessionsData, setSessionsData] = useState<SessionApiResponse | null>(null);
@@ -96,20 +101,10 @@ export function ProjectAnrScoreCard({
         includeSeries: false,
       };
 
-      const {start: previousStart} = parseStatsPeriod(
-        getPeriod({period, start: undefined, end: undefined}, {shouldDoublePeriod: true})
-          .statsPeriod!
-      );
-
-      const {start: previousEnd} = parseStatsPeriod(
-        getPeriod({period, start: undefined, end: undefined}, {shouldDoublePeriod: false})
-          .statsPeriod!
-      );
-
       doSessionsRequest(api, {
         ...requestData,
-        start: previousStart,
-        end: previousEnd,
+        statsPeriodStart: doubledPeriod,
+        statsPeriodEnd: period ?? DEFAULT_STATS_PERIOD,
       }).then(([response]) => {
         if (unmounted) {
           return;
@@ -123,7 +118,17 @@ export function ProjectAnrScoreCard({
     return () => {
       unmounted = true;
     };
-  }, [start, end, period, api, organization.slug, environments, projects, query]);
+  }, [
+    start,
+    end,
+    period,
+    doubledPeriod,
+    api,
+    organization.slug,
+    environments,
+    projects,
+    query,
+  ]);
 
   const value = sessionsData?.groups?.[0]?.totals['anr_rate()'] ?? null;
   const previousValue = previousSessionData?.groups?.[0]?.totals['anr_rate()'] ?? null;

static/app/views/projectDetail/projectScoreCards/projectApdexScoreCard.spec.tsx

@@ -35,6 +35,7 @@ describe('ProjectDetail > ProjectApdex', () => {
         ],
       },
       status: 200,
+      match: [MockApiClient.matchQuery({statsPeriodStart: '28d'})],
     });
 
     currentDataEndpointMock = MockApiClient.addMockResponse({
@@ -86,8 +87,8 @@ describe('ProjectDetail > ProjectApdex', () => {
           field: ['apdex()'],
           project: ['1'],
           query: 'event.type:transaction count():>0',
-          start: '2017-09-19T02:41:20',
-          end: '2017-10-03T02:41:20',
+          statsPeriodStart: '28d',
+          statsPeriodEnd: '14d',
         },
       })
     );

static/app/views/projectDetail/projectScoreCards/projectApdexScoreCard.tsx

@@ -3,7 +3,7 @@ import {Container} from '@sentry/scraps/layout';
 
 import {shouldFetchPreviousPeriod} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
-import {parseStatsPeriod} from 'sentry/components/timeRangeSelector/utils';
+import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
@@ -35,18 +35,13 @@ const useApdex = (props: Props) => {
     isProjectStabilized &&
     hasTransactions
   );
-  const {projects, environments: environments, datetime} = selection;
+  const {projects, environments, datetime} = selection;
   const {period} = datetime;
 
-  const {start: previousStart} = parseStatsPeriod(
-    getPeriod({period, start: undefined, end: undefined}, {shouldDoublePeriod: true})
-      .statsPeriod!
-  );
-
-  const {start: previousEnd} = parseStatsPeriod(
-    getPeriod({period, start: undefined, end: undefined}, {shouldDoublePeriod: false})
-      .statsPeriod!
-  );
+  const doubledPeriod = getPeriod(
+    {period, start: undefined, end: undefined},
+    {shouldDoublePeriod: true}
+  ).statsPeriod;
 
   const commonQuery = {
     environment: environments,
@@ -84,8 +79,8 @@ const useApdex = (props: Props) => {
       {
         query: {
           ...commonQuery,
-          start: previousStart,
-          end: previousEnd,
+          statsPeriodStart: doubledPeriod,
+          statsPeriodEnd: period ?? DEFAULT_STATS_PERIOD,
         },
       },
     ],

static/app/views/projectDetail/projectScoreCards/projectVelocityScoreCard.spec.tsx

@@ -29,6 +29,7 @@ describe('ProjectDetail > ProjectVelocity', () => {
         version: `0.0.${index + 100}`,
       })),
       status: 200,
+      match: [MockApiClient.matchQuery({statsPeriodStart: '28d'})],
     });
 
     const currentDataEndpointMock = MockApiClient.addMockResponse({
@@ -73,8 +74,8 @@ describe('ProjectDetail > ProjectVelocity', () => {
         query: {
           environment: [],
           project: 1,
-          start: '2017-09-19T02:41:20',
-          end: '2017-10-03T02:41:20',
+          statsPeriodStart: '28d',
+          statsPeriodEnd: '14d',
         },
       })
     );

static/app/views/projectDetail/projectScoreCards/projectVelocityScoreCard.tsx

@@ -3,7 +3,7 @@ import {Container} from '@sentry/scraps/layout';
 
 import {shouldFetchPreviousPeriod} from 'sentry/components/charts/utils';
 import {normalizeDateTimeParams} from 'sentry/components/pageFilters/parse';
-import {parseStatsPeriod} from 'sentry/components/timeRangeSelector/utils';
+import {DEFAULT_STATS_PERIOD} from 'sentry/constants';
 import {t} from 'sentry/locale';
 import type {PageFilters} from 'sentry/types/core';
 import type {Organization} from 'sentry/types/organization';
@@ -28,15 +28,10 @@ const useReleaseCount = (props: Props) => {
   const {projects, environments, datetime} = selection;
   const {period} = datetime;
 
-  const {start: previousStart} = parseStatsPeriod(
-    getPeriod({period, start: undefined, end: undefined}, {shouldDoublePeriod: true})
-      .statsPeriod!
-  );
-
-  const {start: previousEnd} = parseStatsPeriod(
-    getPeriod({period, start: undefined, end: undefined}, {shouldDoublePeriod: false})
-      .statsPeriod!
-  );
+  const doubledPeriod = getPeriod(
+    {period, start: undefined, end: undefined},
+    {shouldDoublePeriod: true}
+  ).statsPeriod;
 
   const commonQuery = {
     environment: environments,
@@ -73,8 +68,8 @@ const useReleaseCount = (props: Props) => {
       {
         query: {
           ...commonQuery,
-          start: previousStart,
-          end: previousEnd,
+          statsPeriodStart: doubledPeriod,
+          statsPeriodEnd: period ?? DEFAULT_STATS_PERIOD,
         },
       },
     ],