Chapter 8 - use dynamic rendering and simulate timeout

This commit is contained in:
2023-12-30 14:56:43 +01:00
parent 48c24de676
commit 62b58918d0

View File

@@ -9,21 +9,23 @@ import {
Revenue, Revenue,
} from './definitions'; } from './definitions';
import { formatCurrency } from './utils'; import { formatCurrency } from './utils';
import {unstable_noStore as noStore} from "next/cache";
export async function fetchRevenue() { export async function fetchRevenue() {
// Add noStore() here prevent the response from being cached. // Add noStore() here prevent the response from being cached.
// This is equivalent to in fetch(..., {cache: 'no-store'}). // This is equivalent to in fetch(..., {cache: 'no-store'}).
noStore()
try { try {
// Artificially delay a response for demo purposes. // Artificially delay a response for demo purposes.
// Don't do this in production :) // Don't do this in production :)
// console.log('Fetching revenue data...'); console.log('Fetching revenue data...');
// await new Promise((resolve) => setTimeout(resolve, 3000)); await new Promise((resolve) => setTimeout(resolve, 3000));
const data = await sql<Revenue>`SELECT * FROM revenue`; const data = await sql<Revenue>`SELECT * FROM revenue`;
// console.log('Data fetch completed after 3 seconds.'); console.log('Data fetch completed after 3 seconds.');
return data.rows; return data.rows;
} catch (error) { } catch (error) {
@@ -33,6 +35,7 @@ export async function fetchRevenue() {
} }
export async function fetchLatestInvoices() { export async function fetchLatestInvoices() {
noStore();
try { try {
const data = await sql<LatestInvoiceRaw>` const data = await sql<LatestInvoiceRaw>`
SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id SELECT invoices.amount, customers.name, customers.image_url, customers.email, invoices.id
@@ -53,6 +56,7 @@ export async function fetchLatestInvoices() {
} }
export async function fetchCardData() { export async function fetchCardData() {
noStore();
try { try {
// You can probably combine these into a single SQL query // You can probably combine these into a single SQL query
// However, we are intentionally splitting them to demonstrate // However, we are intentionally splitting them to demonstrate
@@ -92,6 +96,7 @@ export async function fetchFilteredInvoices(
query: string, query: string,
currentPage: number, currentPage: number,
) { ) {
noStore();
const offset = (currentPage - 1) * ITEMS_PER_PAGE; const offset = (currentPage - 1) * ITEMS_PER_PAGE;
try { try {
@@ -124,6 +129,7 @@ export async function fetchFilteredInvoices(
} }
export async function fetchInvoicesPages(query: string) { export async function fetchInvoicesPages(query: string) {
noStore();
try { try {
const count = await sql`SELECT COUNT(*) const count = await sql`SELECT COUNT(*)
FROM invoices FROM invoices
@@ -145,6 +151,7 @@ export async function fetchInvoicesPages(query: string) {
} }
export async function fetchInvoiceById(id: string) { export async function fetchInvoiceById(id: string) {
noStore();
try { try {
const data = await sql<InvoiceForm>` const data = await sql<InvoiceForm>`
SELECT SELECT
@@ -170,6 +177,7 @@ export async function fetchInvoiceById(id: string) {
} }
export async function fetchCustomers() { export async function fetchCustomers() {
noStore();
try { try {
const data = await sql<CustomerField>` const data = await sql<CustomerField>`
SELECT SELECT
@@ -188,6 +196,7 @@ export async function fetchCustomers() {
} }
export async function fetchFilteredCustomers(query: string) { export async function fetchFilteredCustomers(query: string) {
noStore();
try { try {
const data = await sql<CustomersTableType>` const data = await sql<CustomersTableType>`
SELECT SELECT