Cache TRPC query for logs & implement logs pagination

.changeset/honest-sheep-happen.md

@@ -0,0 +1,6 @@
+---
+"app-avatax": patch
+---
+
+Implement client logs cache. Right now app will cache request for 1 day and revalidate the cache every 60 seconds.
+Added forward / backward pagination to client logs. After this change end user can browse logs that exceeds current pagination limit (first 100).

apps/avatax/next.config.js

@@ -4,8 +4,42 @@
 import withBundleAnalyzerConfig from "@next/bundle-analyzer";
 import { withSentryConfig } from "@sentry/nextjs";
 
+// cache request for 1 day (in seconds) + revalidate once 60 seconds
+const cacheValue = "private,s-maxage=60,stale-while-revalidate=86400";
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  async headers() {
+    return [
+      {
+        source: "/api/trpc/clientLogs.getByCheckoutOrOrderId",
+        // Keys based on https://vercel.com/docs/edge-network/headers/cache-control-headers
+        headers: [
+          {
+            key: "CDN-Cache-Control",
+            value: cacheValue,
+          },
+          {
+            key: "Cache-Control",
+            value: cacheValue,
+          },
+        ],
+      },
+      {
+        source: "/api/trpc/clientLogs.getByDate",
+        headers: [
+          {
+            key: "CDN-Cache-Control",
+            value: cacheValue,
+          },
+          {
+            key: "Cache-Control",
+            value: cacheValue,
+          },
+        ],
+      },
+    ];
+  },
   reactStrictMode: true,
   transpilePackages: [
     "@saleor/apps-otel",

apps/avatax/package.json

@@ -89,6 +89,7 @@
     "@graphql-codegen/typescript-urql": "4.0.0",
     "@graphql-typed-document-node/core": "3.2.0",
     "@next/bundle-analyzer": "14.1.4",
+    "@testing-library/react": "^14.0.0",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/react": "18.2.5",
     "@types/react-dom": "18.2.5",

apps/avatax/src/modules/client-logs/client-logs.router.ts

@@ -10,7 +10,7 @@ import {
   createLogsDocumentClient,
   createLogsDynamoClient,
 } from "@/modules/client-logs/dynamo-client";
-import { LogsRepositoryDynamodb } from "@/modules/client-logs/logs-repository";
+import { LastEvaluatedKey, LogsRepositoryDynamodb } from "@/modules/client-logs/logs-repository";
 import { protectedClientProcedure } from "@/modules/trpc/protected-client-procedure";
 import { router } from "@/modules/trpc/trpc-server";
 
@@ -86,45 +86,65 @@ export const clientLogsRouter = router({
       z.object({
         startDate: z.string().datetime(),
         endDate: z.string().datetime(),
+        lastEvaluatedKey: z.record(z.unknown()).optional(),
       }),
     )
-    .query(async ({ input, ctx }): Promise<ClientLogValue[]> => {
-      const logsResult = await ctx.logsRepository.getLogsByDate({
-        startDate: new Date(input.startDate),
-        endDate: new Date(input.endDate),
-        appId: ctx.appId,
-        saleorApiUrl: ctx.saleorApiUrl,
-      });
-
-      if (logsResult.isErr()) {
-        throw new TRPCError({
-          code: "INTERNAL_SERVER_ERROR",
-          message: "Failed to fetch logs",
+    .query(
+      async ({
+        input,
+        ctx,
+      }): Promise<{ clientLogs: ClientLogValue[]; lastEvaluatedKey: LastEvaluatedKey }> => {
+        const logsResult = await ctx.logsRepository.getLogsByDate({
+          startDate: new Date(input.startDate),
+          endDate: new Date(input.endDate),
+          appId: ctx.appId,
+          saleorApiUrl: ctx.saleorApiUrl,
+          lastEvaluatedKey: input.lastEvaluatedKey,
         });
-      }
 
-      return logsResult.value.map((l) => l.getValue());
-    }),
+        if (logsResult.isErr()) {
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: "Failed to fetch logs",
+          });
+        }
+
+        return {
+          clientLogs: logsResult.value.clientLogs.map((l) => l.getValue()),
+          lastEvaluatedKey: logsResult.value.lastEvaluatedKey,
+        };
+      },
+    ),
   getByCheckoutOrOrderId: procedureWithFlag
     .input(
       z.object({
         checkoutOrOrderId: z.string(),
+        lastEvaluatedKey: z.record(z.unknown()).optional(),
       }),
     )
-    .query(async ({ input, ctx }): Promise<ClientLogValue[]> => {
-      const logsResult = await ctx.logsRepository.getLogsByCheckoutOrOrderId({
-        checkoutOrOrderId: input.checkoutOrOrderId,
-        appId: ctx.appId,
-        saleorApiUrl: ctx.saleorApiUrl,
-      });
-
-      if (logsResult.isErr()) {
-        throw new TRPCError({
-          code: "INTERNAL_SERVER_ERROR",
-          message: "Failed to fetch logs",
+    .query(
+      async ({
+        input,
+        ctx,
+      }): Promise<{ clientLogs: ClientLogValue[]; lastEvaluatedKey: LastEvaluatedKey }> => {
+        const logsResult = await ctx.logsRepository.getLogsByCheckoutOrOrderId({
+          checkoutOrOrderId: input.checkoutOrOrderId,
+          appId: ctx.appId,
+          saleorApiUrl: ctx.saleorApiUrl,
+          lastEvaluatedKey: input.lastEvaluatedKey,
         });
-      }
 
-      return logsResult.value.map((l) => l.getValue());
-    }),
+        if (logsResult.isErr()) {
+          throw new TRPCError({
+            code: "INTERNAL_SERVER_ERROR",
+            message: "Failed to fetch logs",
+          });
+        }
+
+        return {
+          clientLogs: logsResult.value.clientLogs.map((l) => l.getValue()),
+          lastEvaluatedKey: logsResult.value.lastEvaluatedKey,
+        };
+      },
+    ),
 });

apps/avatax/src/modules/client-logs/logs-repository.test.ts

@@ -1,7 +1,7 @@
 import { BatchWriteCommand, DynamoDBDocumentClient, QueryCommand } from "@aws-sdk/lib-dynamodb";
 import { mockClient } from "aws-sdk-client-mock";
 import { type SavedItem } from "dynamodb-toolbox";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it } from "vitest";
 
 import { ClientLog, ClientLogStoreRequest } from "@/modules/client-logs/client-log";
 
@@ -203,13 +203,14 @@ describe("LogsRepositoryDynamodb", () => {
         startDate: new Date("2023-01-01T00:00:00Z"),
         endDate: new Date("2023-01-02T00:00:00Z"),
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isOk()).toBe(true);
 
-      expect(result._unsafeUnwrap()).toHaveLength(1);
+      expect(result._unsafeUnwrap().clientLogs).toHaveLength(1);
 
-      expect(result._unsafeUnwrap()[0]).toBeInstanceOf(ClientLog);
+      expect(result._unsafeUnwrap().clientLogs[0]).toBeInstanceOf(ClientLog);
     });
 
     it("should return an empty array when no items are found in the database", async () => {
@@ -230,11 +231,12 @@ describe("LogsRepositoryDynamodb", () => {
         startDate: new Date("2023-01-01T00:00:00Z"),
         endDate: new Date("2023-01-02T00:00:00Z"),
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isOk()).toBe(true);
 
-      expect(result._unsafeUnwrap()).toEqual([]);
+      expect(result._unsafeUnwrap()).toStrictEqual({ clientLogs: [], lastEvaluatedKey: undefined });
     });
 
     it("should return an error when data cannot be mapped to ClientLog", async () => {
@@ -289,6 +291,7 @@ describe("LogsRepositoryDynamodb", () => {
         startDate: new Date("2023-01-01T00:00:00Z"),
         endDate: new Date("2023-01-02T00:00:00Z"),
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isErr()).toBe(true);
@@ -323,6 +326,7 @@ describe("LogsRepositoryDynamodb", () => {
         startDate: new Date("2023-01-01T00:00:00Z"),
         endDate: new Date("2023-01-02T00:00:00Z"),
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isErr()).toBe(true);
@@ -344,6 +348,7 @@ describe("LogsRepositoryDynamodb", () => {
         startDate: new Date("2023-01-01T00:00:00Z"),
         endDate: new Date("2023-01-02T00:00:00Z"),
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isErr()).toBe(true);
@@ -387,13 +392,14 @@ describe("LogsRepositoryDynamodb", () => {
         saleorApiUrl,
         checkoutOrOrderId: "test-order-id",
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isOk()).toBe(true);
 
-      expect(result._unsafeUnwrap()).toHaveLength(1);
+      expect(result._unsafeUnwrap().clientLogs).toHaveLength(1);
 
-      expect(result._unsafeUnwrap()[0]).toBeInstanceOf(ClientLog);
+      expect(result._unsafeUnwrap().clientLogs[0]).toBeInstanceOf(ClientLog);
     });
 
     it("should return an empty array when no items are found in the database", async () => {
@@ -413,11 +419,12 @@ describe("LogsRepositoryDynamodb", () => {
         saleorApiUrl,
         checkoutOrOrderId: "test-order-id",
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isOk()).toBe(true);
 
-      expect(result._unsafeUnwrap()).toEqual([]);
+      expect(result._unsafeUnwrap()).toStrictEqual({ clientLogs: [], lastEvaluatedKey: undefined });
     });
 
     it("should return an error when data cannot be mapped to ClientLog", async () => {
@@ -473,6 +480,7 @@ describe("LogsRepositoryDynamodb", () => {
         saleorApiUrl,
         checkoutOrOrderId: "test-order-id",
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isErr()).toBe(true);
@@ -506,6 +514,7 @@ describe("LogsRepositoryDynamodb", () => {
         saleorApiUrl,
         checkoutOrOrderId: "test-order-id",
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isErr()).toBe(true);
@@ -526,6 +535,7 @@ describe("LogsRepositoryDynamodb", () => {
         saleorApiUrl,
         checkoutOrOrderId: "test-order-id",
         appId,
+        lastEvaluatedKey: undefined,
       });
 
       expect(result.isErr()).toBe(true);
@@ -560,9 +570,13 @@ describe("LogsRepositoryMemory", () => {
         // endDate = startDate + 1h
         endDate: new Date(new Date().getTime() + 60 * 60 * 1000),
         appId,
+        lastEvaluatedKey: undefined,
       });
 
-      expect(result._unsafeUnwrap()).toEqual([testLog]);
+      expect(result._unsafeUnwrap()).toStrictEqual({
+        clientLogs: [testLog],
+        lastEvaluatedKey: undefined,
+      });
     });
   });
 
@@ -611,9 +625,13 @@ describe("LogsRepositoryMemory", () => {
         saleorApiUrl,
         appId,
         checkoutOrOrderId: "test-order-id",
+        lastEvaluatedKey: undefined,
       });
 
-      expect(result._unsafeUnwrap()).toEqual([testLog]);
+      expect(result._unsafeUnwrap()).toStrictEqual({
+        clientLogs: [testLog],
+        lastEvaluatedKey: undefined,
+      });
     });
   });
 });