From 2c33fc60dcbc1c79fc43dcaf4172338ce21f9aee Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Mon, 5 Aug 2024 16:05:21 -0500
Subject: [PATCH] FIX: updated queryKey for PreviewTable to match /transactions
 and /blocks so that query cache is correctly primed

---
 src/app/page.tsx                      | 8 ++++----
 src/components/PreviewTable/index.tsx | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e2e1a8b..8ae5710 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -47,8 +47,8 @@ const LandingCard: FC<CardProps> = ({ heading, children, className, buttonText,
 export default function Home() {
   const queryClient = getQueryClient();
 
-  const blocksQuery = "previewBlocks";
-  const transactionsQuery = "previewTransactions";
+  const blocksQuery = "BlocksTable";
+  const transactionsQuery = "TransactionsTable";
   const blocksEndpoint = "api/blocks";
   const transactionEndpoint = "api/transactions";
   const errorMessage = "Problems were encountered while trying to query explorer data for the main page, please try again.";
@@ -56,7 +56,7 @@ export default function Home() {
   Promise.all([
     queryClient.prefetchQuery({
       queryFn: () => getTransactions({ endpoint: transactionEndpoint, pageIndex: 0 }),
-      queryKey: [transactionsQuery],
+      queryKey: [transactionsQuery, 0],
       staleTime: 0,
       meta: {
         errorMessage,
@@ -64,7 +64,7 @@ export default function Home() {
     }),
     queryClient.prefetchQuery({
       queryFn: () => getBlocks({ endpoint: blocksEndpoint, pageIndex: 0 }),
-      queryKey: [blocksQuery],
+      queryKey: [blocksQuery, 0],
       staleTime: 0,
       meta: {
         errorMessage,
diff --git a/src/components/PreviewTable/index.tsx b/src/components/PreviewTable/index.tsx
index bbe06fd..11da1f9 100644
--- a/src/components/PreviewTable/index.tsx
+++ b/src/components/PreviewTable/index.tsx
@@ -15,7 +15,7 @@ export interface QueryOptions {
 
 interface PreviewTableProps {
   className?: string,
-  queryName: "previewBlocks" | "previewTransactions",
+  queryName: "BlocksTable" | "TransactionsTable",
   pageIndex: number,
   endpoint: string,
   errorMessage: string,
@@ -33,7 +33,7 @@ export function PreviewTable ({
   errorMessage,
 } : PreviewTableProps) {
 
-  const getFn  = queryName === "previewBlocks" ? getBlocks : getTransactions;
+  const getFn  = queryName === "BlocksTable" ? getBlocks : getTransactions;
 
   const { data } : {
     data : {
@@ -51,7 +51,7 @@ export function PreviewTable ({
       }[];
     }
   } = useSuspenseQuery({
-    queryKey: [queryName],
+    queryKey: [queryName, pageIndex],
     queryFn: () => getFn({ endpoint, pageIndex }),
     // refresh preview data every 15 seconds
     refetchInterval: 15 * 1000,
@@ -63,7 +63,7 @@ export function PreviewTable ({
   const { results } = data ?? { pages: 0, results: []};
 
   // Checks only necessary for safely enforcing type. See todo comment above.
-  if (queryName === "previewBlocks") {
+  if (queryName === "BlocksTable") {
     const tableData = results as {
       height: bigint,
       created_at: string,