(SP:2) [Frontend] Fix duplicated Q&A items after content updates (#330)

* fix(qa): prevent duplicate questions and improve cache invalidation

* fix(qa): keep pagination totals consistent after deduplication

Author: ViktorSvertoka

frontend/app/api/questions/[category]/route.ts

@@ -27,6 +27,47 @@ type QaApiResponse = {
   locale: string;
 };
 
+function dedupeItems(items: QaApiResponse['items']) {
+  const seenById = new Set<string>();
+  const seenByText = new Set<string>();
+  const unique: QaApiResponse['items'] = [];
+
+  for (const item of items) {
+    if (seenById.has(item.id)) {
+      continue;
+    }
+
+    const textKey = `${item.locale}:${item.question.trim().toLowerCase()}`;
+    if (seenByText.has(textKey)) {
+      continue;
+    }
+
+    seenById.add(item.id);
+    seenByText.add(textKey);
+    unique.push(item);
+  }
+
+  return unique;
+}
+
+function normalizeResponse(data: QaApiResponse, limit: number): QaApiResponse {
+  const uniqueItems = dedupeItems(data.items);
+  if (uniqueItems.length === data.items.length) {
+    return data;
+  }
+
+  const removed = data.items.length - uniqueItems.length;
+  const total = Math.max(0, data.total - removed);
+  const totalPages = Math.ceil(total / limit);
+
+  return {
+    ...data,
+    items: uniqueItems,
+    total,
+    totalPages,
+  };
+}
+
 export async function GET(
   req: Request,
   ctx: { params: Promise<{ category: string }> }
@@ -59,9 +100,15 @@ export async function GET(
     const cached = await getQaCache<QaApiResponse>(cacheKey);
 
     if (cached) {
-      const response = NextResponse.json(cached);
+      const normalizedCached = normalizeResponse(cached, limit);
+      const response = NextResponse.json(normalizedCached);
       response.headers.set('Cache-Control', 'no-store');
       response.headers.set('x-qa-cache', 'HIT');
+
+      if (normalizedCached.items.length !== cached.items.length) {
+        await setQaCache(cacheKey, normalizedCached);
+      }
+
       return response;
     }
 
@@ -124,23 +171,21 @@ export async function GET(
       .limit(limit)
       .offset(offset);
 
-    const response = NextResponse.json({
+    const payload = normalizeResponse(
+      {
       items,
       total,
       page,
       totalPages,
       locale,
-    });
+      },
+      limit
+    );
+    const response = NextResponse.json(payload);
     response.headers.set('Cache-Control', 'no-store');
     response.headers.set('x-qa-cache', 'MISS');
 
-    await setQaCache(cacheKey, {
-      items,
-      total,
-      page,
-      totalPages,
-      locale,
-    });
+    await setQaCache(cacheKey, payload);
 
     return response;
   } catch (error) {

frontend/db/seed-questions.ts

@@ -3,6 +3,7 @@ import 'dotenv/config';
 import { and, eq } from 'drizzle-orm';
 
 import rawData from '../parse/questions.json';
+import { invalidateAllQaCache } from '../lib/cache/qa';
 import { db } from './index';
 import { categories, questions, questionTranslations } from './schema';
 
@@ -138,6 +139,13 @@ async function seedQuestions() {
     }
   }
 
+  try {
+    const deleted = await invalidateAllQaCache();
+    console.log(`[seed] Cleared Q&A cache keys: ${deleted}`);
+  } catch (error) {
+    console.warn('[seed] Failed to clear Q&A cache:', error);
+  }
+
   console.log('Questions seeded!');
 }
 

frontend/lib/cache/qa.ts

@@ -1,5 +1,8 @@
 import { getRedisClient } from '@/lib/redis';
 
+const QA_CACHE_VERSION = 'v2';
+const QA_CACHE_TTL_SECONDS = 60 * 30;
+
 type QaCacheKeyInput = {
   category: string;
   locale: string;
@@ -19,7 +22,7 @@ export function buildQaCacheKey({
   const normalizedLocale = locale.toLowerCase();
   const searchKey = search?.trim() ? search.trim().toLowerCase() : 'all';
 
-  return `qa:category:${normalizedCategory}:locale:${normalizedLocale}:page:${page}:limit:${limit}:search:${searchKey}`;
+  return `qa:${QA_CACHE_VERSION}:category:${normalizedCategory}:locale:${normalizedLocale}:page:${page}:limit:${limit}:search:${searchKey}`;
 }
 
 export async function getQaCache<T>(key: string) {
@@ -46,7 +49,7 @@ export async function setQaCache<T>(key: string, value: T) {
   const redis = getRedisClient();
   if (!redis) return;
 
-  await redis.set(key, value);
+  await redis.set(key, value, { ex: QA_CACHE_TTL_SECONDS });
 }
 
 export async function invalidateQaCacheByCategory(category: string) {
@@ -82,7 +85,7 @@ export async function invalidateAllQaCache() {
 
   do {
     const [nextCursor, keys] = await redis.scan(cursor, {
-      match: 'qa:*',
+      match: `qa:*`,
       count: 200,
     });
     cursor = Number(nextCursor);

frontend/lib/tests/q&a/questions-route.test.ts

@@ -6,8 +6,15 @@ vi.mock('@/db', () => ({
   },
 }));
 
+vi.mock('@/lib/cache/qa', () => ({
+  buildQaCacheKey: vi.fn(() => 'qa:test:key'),
+  getQaCache: vi.fn(async () => null),
+  setQaCache: vi.fn(async () => undefined),
+}));
+
 import { GET } from '@/app/api/questions/[category]/route';
 import { db } from '@/db';
+import { setQaCache } from '@/lib/cache/qa';
 
 type Builder = {
   from: ReturnType<typeof vi.fn>;
@@ -113,4 +120,61 @@ describe('GET /api/questions/[category]', () => {
     expect(data.totalPages).toBe(0);
     consoleSpy.mockRestore();
   });
+
+  it('deduplicates repeated question texts in response payload', async () => {
+    const selectMock = db.select as ReturnType<typeof vi.fn>;
+    const setQaCacheMock = setQaCache as ReturnType<typeof vi.fn>;
+
+    selectMock
+      .mockReturnValueOnce(makeBuilder('limit', [{ id: 'cat-1' }]))
+      .mockReturnValueOnce(makeBuilder('where', [{ count: 3 }]))
+      .mockReturnValueOnce(
+        makeBuilder('offset', [
+          {
+            id: 'q1',
+            categoryId: 'cat-1',
+            sortOrder: 1,
+            difficulty: null,
+            question: 'What is JavaScript?',
+            answerBlocks: [],
+            locale: 'en',
+          },
+          {
+            id: 'q2',
+            categoryId: 'cat-1',
+            sortOrder: 1,
+            difficulty: null,
+            question: 'What is JavaScript?',
+            answerBlocks: [],
+            locale: 'en',
+          },
+          {
+            id: 'q3',
+            categoryId: 'cat-1',
+            sortOrder: 2,
+            difficulty: null,
+            question: 'What is closure?',
+            answerBlocks: [],
+            locale: 'en',
+          },
+        ])
+      );
+
+    const req = new Request(
+      'http://localhost/api/questions/javascript?page=1&limit=10&locale=en'
+    );
+    const res = await GET(req, {
+      params: Promise.resolve({ category: 'javascript' }),
+    });
+    const data = await res.json();
+
+    expect(res.status).toBe(200);
+    expect(data.items).toHaveLength(2);
+    expect(data.items.map((item: { question: string }) => item.question)).toEqual(
+      ['What is JavaScript?', 'What is closure?']
+    );
+    expect(data.total).toBe(2);
+    expect(data.totalPages).toBe(1);
+    expect(setQaCacheMock).toHaveBeenCalledOnce();
+  });
 });