fix(web): include start/end in webhook notifications query key

web/lib/api/hooks.test.tsx

@@ -1,8 +1,16 @@
 import { describe, expect, it } from 'vitest'
 import { renderHook, waitFor } from '@testing-library/react'
+import { http, HttpResponse } from 'msw'
 import { TestProviders } from '@/test/render'
-import { mockDevices, mockSubscription, mockUser } from '@/test/fixtures'
-import { useCurrentUser, useDevices, useSubscription } from './hooks'
+import { API_BASE_URL, mockDevices, mockSubscription, mockUser } from '@/test/fixtures'
+import { server } from '@/test/msw/server'
+import { ApiEndpoints } from '@/config/api'
+import {
+  useCurrentUser,
+  useDevices,
+  useSubscription,
+  useWebhookNotifications,
+} from './hooks'
 
 // Verifies the typed hooks talk to the mocked API and unwrap the various
 // response envelopes correctly. No real backend is contacted (MSW).
@@ -27,4 +35,42 @@ describe('data hooks', () => {
     expect(result.current.data).toHaveLength(mockDevices.length)
     expect(result.current.data?.[0]._id).toBe(mockDevices[0]._id)
   })
+
+  // Regression for #256: start/end were query params but not query-key
+  // members, so changing the date filter reused a cached response.
+  it('useWebhookNotifications refetches when the date range changes', async () => {
+    const startsSeen: string[] = []
+    server.use(
+      http.get(
+        `${API_BASE_URL}${ApiEndpoints.gateway.getWebhookNotifications().split('?')[0]}`,
+        ({ request }) => {
+          const start = new URL(request.url).searchParams.get('start') ?? ''
+          startsSeen.push(start)
+          return HttpResponse.json({
+            data: { data: [], meta: { totalPages: 1, total: 0 } },
+          })
+        }
+      )
+    )
+
+    const { result, rerender } = renderHook(
+      ({ start }) => useWebhookNotifications({ start, page: 1, limit: 10 }),
+      {
+        wrapper,
+        initialProps: { start: '2026-08-01T00:00:00.000Z' },
+      }
+    )
+
+    await waitFor(() => expect(result.current.isSuccess).toBe(true))
+    expect(startsSeen).toEqual(['2026-08-01T00:00:00.000Z'])
+
+    rerender({ start: '2026-07-01T00:00:00.000Z' })
+
+    await waitFor(() =>
+      expect(startsSeen).toEqual([
+        '2026-08-01T00:00:00.000Z',
+        '2026-07-01T00:00:00.000Z',
+      ])
+    )
+  })
 })

web/lib/api/hooks.ts

@@ -343,15 +343,16 @@ export function useWebhookNotifications(filters: WebhookNotificationFilters) {
     limit = 10,
   } = filters
   return useQuery({
-    queryKey: [
-      'webhook-notification',
+    queryKey: queryKeys.webhookNotifications({
       eventType,
-      page,
-      limit,
+      status,
       deviceId,
       webhookSubscriptionId,
-      status,
-    ],
+      start,
+      end,
+      page,
+      limit,
+    }),
     queryFn: () =>
       httpBrowserClient
         .get(

web/lib/api/query-keys.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { queryKeys } from './query-keys'
+
+describe('queryKeys.webhookNotifications', () => {
+  it('includes start and end so date filter changes produce a new cache entry', () => {
+    const base = {
+      eventType: '',
+      status: '',
+      deviceId: '',
+      webhookSubscriptionId: '',
+      page: 1,
+      limit: 10,
+    }
+
+    const withoutDates = queryKeys.webhookNotifications(base)
+    const withStart = queryKeys.webhookNotifications({
+      ...base,
+      start: '2026-08-01T00:00:00.000Z',
+    })
+    const withRange = queryKeys.webhookNotifications({
+      ...base,
+      start: '2026-08-01T00:00:00.000Z',
+      end: '2026-08-02T00:00:00.000Z',
+    })
+    const differentStart = queryKeys.webhookNotifications({
+      ...base,
+      start: '2026-07-01T00:00:00.000Z',
+      end: '2026-08-02T00:00:00.000Z',
+    })
+
+    expect(withoutDates).not.toEqual(withStart)
+    expect(withStart).not.toEqual(withRange)
+    expect(withRange).not.toEqual(differentStart)
+
+    // Guard against dropping date params from the key shape again.
+    expect(withRange).toEqual([
+      'webhook-notification',
+      '',
+      1,
+      10,
+      '',
+      '',
+      '',
+      '2026-08-01T00:00:00.000Z',
+      '2026-08-02T00:00:00.000Z',
+    ])
+  })
+})

web/lib/api/query-keys.ts

@@ -22,4 +22,27 @@ export const queryKeys = {
     filters
       ? (['messages', deviceId, filters] as const)
       : (['messages', deviceId] as const),
+  // start/end must be part of the key: they are sent on the request URL, and
+  // react-query only refetches when the key changes (see issue #256).
+  webhookNotifications: (filters: {
+    eventType?: string
+    status?: string
+    deviceId?: string
+    webhookSubscriptionId?: string
+    start?: string
+    end?: string
+    page?: number
+    limit?: number
+  }) =>
+    [
+      'webhook-notification',
+      filters.eventType ?? '',
+      filters.page ?? 1,
+      filters.limit ?? 10,
+      filters.deviceId ?? '',
+      filters.webhookSubscriptionId ?? '',
+      filters.status ?? '',
+      filters.start ?? '',
+      filters.end ?? '',
+    ] as const,
 }