FIX: updated queryKey for PreviewTable to match /transactions and /bl…

…ocks so that query cache is correctly primed

src/app/page.tsx

@@ -47,24 +47,24 @@ 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.";
 
   Promise.all([
     queryClient.prefetchQuery({
       queryFn: () => getTransactions({ endpoint: transactionEndpoint, pageIndex: 0 }),
-      queryKey: [transactionsQuery],
+      queryKey: [transactionsQuery, 0],
       staleTime: 0,
       meta: {
         errorMessage,
       },
     }),
     queryClient.prefetchQuery({
       queryFn: () => getBlocks({ endpoint: blocksEndpoint, pageIndex: 0 }),
-      queryKey: [blocksQuery],
+      queryKey: [blocksQuery, 0],
       staleTime: 0,
       meta: {
         errorMessage,

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,