feat(risk, vendor): enhance real-time updates with SWR polling intervals (#1979)

Co-authored-by: Tofik Hasanov <annexcies@gmail.com>

Author: github-actions[bot]

apps/app/src/app/(app)/[orgId]/risk/(overview)/RisksTable.tsx

@@ -102,10 +102,11 @@ export const RisksTable = ({
     return await getRisksAction({ orgId, searchParams: currentSearchParams });
   }, [orgId, currentSearchParams]);
 
-  // Use SWR to fetch risks with polling when onboarding is active
+  // Use SWR to fetch risks with polling for real-time updates
+  // Poll faster during onboarding, slower otherwise
   const { data: risksData } = useSWR(swrKey, fetcher, {
     fallbackData: { data: initialRisks, pageCount: initialPageCount },
-    refreshInterval: isActive ? 1000 : 0, // Poll every 1 second when onboarding is active
+    refreshInterval: isActive ? 1000 : 5000, // 1s during onboarding, 5s otherwise
     revalidateOnFocus: false,
     revalidateOnReconnect: true,
     keepPreviousData: true,

apps/app/src/app/(app)/[orgId]/risk/[riskId]/components/RiskActions.tsx

@@ -21,8 +21,10 @@ import { Cog } from 'lucide-react';
 import { useAction } from 'next-safe-action/hooks';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { useSWRConfig } from 'swr';
 
 export function RiskActions({ riskId }: { riskId: string }) {
+  const { mutate: globalMutate } = useSWRConfig();
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
   // Get SWR mutate function to refresh risk data after mutations
@@ -31,8 +33,19 @@ export function RiskActions({ riskId }: { riskId: string }) {
   const regenerate = useAction(regenerateRiskMitigationAction, {
     onSuccess: () => {
       toast.success('Regeneration triggered. This may take a moment.');
-      // Trigger SWR revalidation to refresh risk data
+      // Trigger SWR revalidation for risk detail, list views, and comments
       refreshRisk();
+      globalMutate(
+        (key) => Array.isArray(key) && key[0] === 'risks',
+        undefined,
+        { revalidate: true },
+      );
+      // Invalidate comments cache for this risk
+      globalMutate(
+        (key) => typeof key === 'string' && key.includes(`/v1/comments`) && key.includes(riskId),
+        undefined,
+        { revalidate: true },
+      );
     },
     onError: () => toast.error('Failed to trigger mitigation regeneration'),
   });

apps/app/src/app/(app)/[orgId]/vendors/(overview)/components/VendorDeleteCell.tsx

@@ -12,6 +12,7 @@ import { Button } from '@comp/ui/button';
 import { Trash2 } from 'lucide-react';
 import * as React from 'react';
 import { toast } from 'sonner';
+import { useSWRConfig } from 'swr';
 import { deleteVendor } from '../actions/deleteVendor';
 import type { GetVendorsResult } from '../data/queries';
 
@@ -22,6 +23,7 @@ interface VendorDeleteCellProps {
 }
 
 export const VendorDeleteCell: React.FC<VendorDeleteCellProps> = ({ vendor }) => {
+  const { mutate } = useSWRConfig();
   const [isRemoveAlertOpen, setIsRemoveAlertOpen] = React.useState(false);
   const [isDeleting, setIsDeleting] = React.useState(false);
 
@@ -34,6 +36,12 @@ export const VendorDeleteCell: React.FC<VendorDeleteCellProps> = ({ vendor }) =>
     if (response?.data?.success) {
       toast.success(`Vendor "${vendor.name}" has been deleted.`);
       setIsRemoveAlertOpen(false);
+      // Invalidate all vendors SWR caches (any key starting with 'vendors')
+      mutate(
+        (key) => Array.isArray(key) && key[0] === 'vendors',
+        undefined,
+        { revalidate: true },
+      );
     } else {
       toast.error(String(response?.data?.error) || 'Failed to delete vendor.');
     }

apps/app/src/app/(app)/[orgId]/vendors/(overview)/components/VendorsTable.tsx

@@ -109,10 +109,11 @@ export function VendorsTable({
     return await callGetVendorsAction({ orgId, searchParams: currentSearchParams });
   }, [orgId, currentSearchParams]);
 
-  // Use SWR to fetch vendors with polling when onboarding is active
+  // Use SWR to fetch vendors with polling for real-time updates
+  // Poll faster during onboarding, slower otherwise
   const { data: vendorsData } = useSWR(swrKey, fetcher, {
     fallbackData: { data: initialVendors, pageCount: initialPageCount },
-    refreshInterval: isActive ? 1000 : 0, // Poll every 1 second when onboarding is active
+    refreshInterval: isActive ? 1000 : 5000, // 1s during onboarding, 5s otherwise
     revalidateOnFocus: false,
     revalidateOnReconnect: true,
     keepPreviousData: true,

apps/app/src/app/(app)/[orgId]/vendors/[vendorId]/components/VendorActions.tsx

@@ -22,8 +22,10 @@ import { useAction } from 'next-safe-action/hooks';
 import { useQueryState } from 'nuqs';
 import { useState } from 'react';
 import { toast } from 'sonner';
+import { useSWRConfig } from 'swr';
 
 export function VendorActions({ vendorId }: { vendorId: string }) {
+  const { mutate: globalMutate } = useSWRConfig();
   const [_, setOpen] = useQueryState('vendor-overview-sheet');
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
 
@@ -33,8 +35,19 @@ export function VendorActions({ vendorId }: { vendorId: string }) {
   const regenerate = useAction(regenerateVendorMitigationAction, {
     onSuccess: () => {
       toast.success('Regeneration triggered. This may take a moment.');
-      // Trigger SWR revalidation to refresh vendor data
+      // Trigger SWR revalidation for vendor detail, list views, and comments
       refreshVendor();
+      globalMutate(
+        (key) => Array.isArray(key) && key[0] === 'vendors',
+        undefined,
+        { revalidate: true },
+      );
+      // Invalidate comments cache for this vendor
+      globalMutate(
+        (key) => typeof key === 'string' && key.includes(`/v1/comments`) && key.includes(vendorId),
+        undefined,
+        { revalidate: true },
+      );
     },
     onError: () => toast.error('Failed to trigger mitigation regeneration'),
   });

apps/app/src/app/(app)/[orgId]/vendors/components/create-vendor-form.tsx

@@ -18,6 +18,7 @@ import { useQueryState } from 'nuqs';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { useSWRConfig } from 'swr';
 import { z } from 'zod';
 import { createVendorAction } from '../actions/create-vendor-action';
 import { searchGlobalVendorsAction } from '../actions/search-global-vendors-action';
@@ -42,6 +43,7 @@ export function CreateVendorForm({
   assignees: (Member & { user: User })[];
   organizationId: string;
 }) {
+  const { mutate } = useSWRConfig();
   const [_, setCreateVendorSheet] = useQueryState('createVendorSheet');
 
   const [searchQuery, setSearchQuery] = useState('');
@@ -53,6 +55,12 @@ export function CreateVendorForm({
     onSuccess: async () => {
       toast.success('Vendor created successfully');
       setCreateVendorSheet(null);
+      // Invalidate all vendors SWR caches (any key starting with 'vendors')
+      mutate(
+        (key) => Array.isArray(key) && key[0] === 'vendors',
+        undefined,
+        { revalidate: true },
+      );
     },
     onError: () => {
       toast.error('Failed to create vendor');

apps/app/src/components/forms/risks/create-risk-form.tsx

@@ -17,38 +17,24 @@ import { useAction } from 'next-safe-action/hooks';
 import { useQueryState } from 'nuqs';
 import { useForm } from 'react-hook-form';
 import { toast } from 'sonner';
+import { useSWRConfig } from 'swr';
 import type { z } from 'zod';
 
 export function CreateRisk({ assignees }: { assignees: (Member & { user: User })[] }) {
-  // Get the same query parameters as the table
-  const [search] = useQueryState('search');
-  const [page] = useQueryState('page', {
-    defaultValue: 1,
-    parse: Number.parseInt,
-  });
-  const [pageSize] = useQueryState('pageSize', {
-    defaultValue: 10,
-    parse: Number,
-  });
-  const [status] = useQueryState<RiskStatus | null>('status', {
-    defaultValue: null,
-    parse: (value) => value as RiskStatus | null,
-  });
-  const [department] = useQueryState<Departments | null>('department', {
-    defaultValue: null,
-    parse: (value) => value as Departments | null,
-  });
-  const [assigneeId] = useQueryState<string | null>('assigneeId', {
-    defaultValue: null,
-    parse: (value) => value,
-  });
+  const { mutate } = useSWRConfig();
 
   const [_, setCreateRiskSheet] = useQueryState('create-risk-sheet');
 
   const createRisk = useAction(createRiskAction, {
     onSuccess: async () => {
       toast.success('Risk created successfully');
       setCreateRiskSheet(null);
+      // Invalidate all risks SWR caches (any key starting with 'risks')
+      mutate(
+        (key) => Array.isArray(key) && key[0] === 'risks',
+        undefined,
+        { revalidate: true },
+      );
     },
     onError: () => {
       toast.error('Failed to create risk');

apps/app/src/hooks/use-comments-api.ts

@@ -49,8 +49,12 @@ interface UpdateCommentData {
   contextUrl?: string;
 }
 
+// Default polling interval for real-time updates (5 seconds)
+const DEFAULT_COMMENTS_POLLING_INTERVAL = 5000;
+
 /**
  * Generic hook to fetch comments for any entity using SWR
+ * Includes polling for real-time updates (e.g., when trigger.dev tasks create comments)
  */
 export function useComments(
   entityId: string | null,
@@ -60,7 +64,11 @@ export function useComments(
   const endpoint =
     entityId && entityType ? `/v1/comments?entityId=${entityId}&entityType=${entityType}` : null;
 
-  return useApiSWR<Comment[]>(endpoint, options);
+  return useApiSWR<Comment[]>(endpoint, {
+    ...options,
+    // Enable polling for real-time updates (when trigger.dev tasks create comments)
+    refreshInterval: options.refreshInterval ?? DEFAULT_COMMENTS_POLLING_INTERVAL,
+  });
 }
 
 /**