fix(cache): make cache keys for review more distinctive

src/pages/api/title/[titleId]/reviews/[paginationKey].ts

@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 import type { TitleReviewsCursored } from 'src/interfaces/shared/titleReviews';
 import { cursoredReviews } from 'src/utils/fetchers/titleReviews';
 import getOrSetApiCache from 'src/utils/getOrSetApiCache';
-import { titleReviewsCursoredKey } from 'src/utils/constants/keys';
+import { titleReviewsKey } from 'src/utils/constants/keys';
 import { AppError, cleanQueryStr } from 'src/utils/helpers';
 import { keys as titleReviewsQueryKeys } from 'src/utils/constants/titleReviewsFilters';
 
@@ -19,7 +19,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     const queryObj = req.query as Record<string, string>;
     const queryStr = cleanQueryStr(queryObj, titleReviewsQueryKeys);
     const data = await getOrSetApiCache(
-      titleReviewsCursoredKey(titleId, paginationKey),
+      titleReviewsKey(titleId, queryStr, paginationKey),
       cursoredReviews,
       titleId,
       paginationKey,

src/pages/api/title/[titleId]/reviews/index.ts

@@ -15,7 +15,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse<
     const titleId = req.query.titleId as string;
     const queryObj = req.query as Record<string, string>;
     const queryStr = cleanQueryStr(queryObj, keys);
-    const data = await getOrSetApiCache(titleReviewsKey(titleId), reviews, titleId, queryStr);
+    const data = await getOrSetApiCache(
+      titleReviewsKey(titleId, queryStr, null),
+      reviews,
+      titleId,
+      queryStr
+    );
     res.status(200).json({ status: true, data });
   } catch (error: any) {
     const { message = 'Not found', statusCode = 404 } = error;

src/pages/title/[titleId]/reviews/[paginationKey]/index.tsx

@@ -2,14 +2,14 @@ import { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import Meta from 'src/components/meta/Meta';
 import Layout from 'src/components/layout';
 import ErrorInfo from 'src/components/error/ErrorInfo';
-import { BasicCard, Filters, Pagination, Reviews, TitleCard } from 'src/components/titleReviews';
+import { BasicCard, Filters, Pagination, Reviews } from 'src/components/titleReviews';
 import { AppError } from 'src/interfaces/shared/error';
 import getOrSetApiCache from 'src/utils/getOrSetApiCache';
-import titleReviews, { cursoredReviews } from 'src/utils/fetchers/titleReviews';
+import { cursoredReviews } from 'src/utils/fetchers/titleReviews';
-import { cleanQueryStr, getProxiedIMDbImgUrl } from 'src/utils/helpers';
+import { cleanQueryStr } from 'src/utils/helpers';
-import { titleKey, titleReviewsKey } from 'src/utils/constants/keys';
+import { titleReviewsKey } from 'src/utils/constants/keys';
 import styles from 'src/styles/modules/pages/titleReviews/titleReviews.module.scss';
-import TitleReviews, { TitleReviewsCursored } from 'src/interfaces/shared/titleReviews';
+import { TitleReviewsCursored } from 'src/interfaces/shared/titleReviews';
 import { keys as titleReviewsQueryKeys } from 'src/utils/constants/titleReviewsFilters';
 
 type Props = InferGetServerSidePropsType<typeof getServerSideProps>;
@@ -51,7 +51,7 @@ export const getServerSideProps: GetServerSideProps<Data, Params> = async ctx =>
 
   try {
     const data = await getOrSetApiCache(
-      titleKey(titleId),
+      titleReviewsKey(titleId, queryStr, paginationKey),
       cursoredReviews,
       titleId,
       paginationKey,

src/pages/title/[titleId]/reviews/index.tsx

@@ -5,9 +5,9 @@ import ErrorInfo from 'src/components/error/ErrorInfo';
 import { Filters, Pagination, Reviews, TitleCard } from 'src/components/titleReviews';
 import { AppError } from 'src/interfaces/shared/error';
 import getOrSetApiCache from 'src/utils/getOrSetApiCache';
-import titleReviews, { cursoredReviews } from 'src/utils/fetchers/titleReviews';
+import titleReviews from 'src/utils/fetchers/titleReviews';
 import { cleanQueryStr, getProxiedIMDbImgUrl } from 'src/utils/helpers';
-import { titleKey, titleReviewsKey } from 'src/utils/constants/keys';
+import { titleReviewsKey } from 'src/utils/constants/keys';
 import styles from 'src/styles/modules/pages/titleReviews/titleReviews.module.scss';
 import TitleReviews from 'src/interfaces/shared/titleReviews';
 import { keys as titleReviewFiltersQueryKeys } from 'src/utils/constants/titleReviewsFilters';
@@ -31,7 +31,7 @@ const ReviewsPage = ({ data, error, originalPath }: Props) => {
         if (!res.ok) throw new Error('something went wrong');
         return res.json();
       })
-      .then(newData =>
+      .then((newData: { data: NonNullable<Props['data']> }) =>
         setAllData(prev => ({
           list: prev.list.concat(newData.data.list),
           cursor: newData.data.cursor ?? null,
@@ -73,7 +73,7 @@ export const getServerSideProps: GetServerSideProps<Data, Params> = async ctx =>
   const queryStr = cleanQueryStr(queryParams, titleReviewFiltersQueryKeys);
   try {
     const data = await getOrSetApiCache(
-      titleReviewsKey(titleId, queryStr),
+      titleReviewsKey(titleId, queryStr, null),
       titleReviews,
       titleId,
       queryStr

src/utils/constants/keys.ts

@@ -1,7 +1,6 @@
 export const titleKey = (titleId: string) => `title:${titleId}`;
-export const titleReviewsKey = (titleId: string, query = '') => `title:${titleId}|${query}`;
+export const titleReviewsKey = (titleId: string, queryStr: string, paginationKey: string | null) =>
-export const titleReviewsCursoredKey = (titleId: string, paginationKey: string) =>
+  `title/reviews:${titleId}?${queryStr}&paginationKey=${paginationKey}`;
-  `title:${titleId}|${paginationKey}`;
 export const nameKey = (nameId: string) => `name:${nameId}`;
 export const listKey = (listId: string, pageNum = '1') => `list:${listId}?page=${pageNum}`;
 export const findKey = (query: string) => `find:${query}`;