Status Report Updates Not Refreshing in Server Components

[aggmoulik]

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation

Description

#1676

Problem

When creating, updating, or deleting status report updates from client components, the data wouldn't refresh on pages that fetch data server-side (like the Overview page). This was because queryClient.invalidateQueries() only works for client-side React Query fetches, not for Next.js Server Components that use fetchQuery.

Solution

Added router.refresh() calls to all status report update mutations. This triggers Next.js to re-fetch server components while keeping the existing invalidateQueries() for client-side data.

Changes

• data-table.tsx: Added router.refresh() to the createStatusReportUpdate mutation
• data-table-row-actions.tsx: Added router.refresh() to both updateStatusReportUpdate and deleteStatusReportUpdate mutations

How It Works Now

• ✅ Client-side fetched data (Status Reports page with useQuery): invalidateQueries() triggers refetch
• ✅ Server-side fetched data (Overview page with fetchQuery): router.refresh() triggers re-render

Both the dedicated Status Reports page and the Overview dashboard now properly update when status report updates are modified.

Testing

1. Navigate to Overview page (/overview)
2. Create/edit/delete a status report update
3. Verify the table updates without requiring a manual page refresh
4. Navigate to Status Reports page (/status-pages/[id]/status-reports)
5. Verify updates still work correctly there as well

A picture tells a thousand words (if any)

Before this PR

{Please add a screenshot here}

After this PR

{Please add a screenshot here}

Related Issue (optional)

[vercel]

@aggmoulik is attempting to deploy a commit to the OpenStatus Team on Vercel.

A member of the Team first needs to authorize it.

[mxkaske]

Hey @aggmoulik!

The idea is goo, but no need to router.refresh() to refetch all the queries.

The issue of Status Report Updates not being refreshed happens only on the /overview page and not on a specific status page because we:

• refetch trpc.statusReport.list
• invalidateQuery trpc.page.list

Due to the very specific Date.now() being used in the trpc method to fetch the status reports on the overview page, it will be impossible to invalidate the query. We will need to rewrite the startedAt prop.

See the overview/page.tsx

  const incidents = await queryClient.fetchQuery(
    trpc.incident.list.queryOptions({
      order: "desc",
      startedAt: {
        gte: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), // 7 days ago
      },
    }),
  );

By default, the order is "desc" so we can get rid of that value already. And we can replace the "startedAt" with "period" (e.g. with "7d" enum) to add the startedAt logic (gte: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000)) in the procedure itself.

That way, we can replace

router.refresh()

with

queryClient.invalidateQueries({
  queryKey: trpc.pageReport.list.queryKey({ period: "7" }),
});