NextJS data fetching
Unanswered
Donskoy posted this in #help-forum
DonskoyOP
I must refresh the data
This is my
Data is not being updated
This is my component
NEXTJS 13.4 APP ROUTER
This is my
app/data/page.tsx
Data is not being updated
import { NextPage } from "next";
import { IEisItem, IProduct } from "../../interface";
import DataPage from "../../components/DataPage";
const fetchData = async () => {
const res = await fetch('http://localhost:3001/api/eis/products', {
method: 'GET',
cache: 'no-store',
})
return res.json()
}
const Data: NextPage = async () => {
const data: Array<IProduct> = await fetchData()
const transformedData: Array<IEisItem> = ...
return (
<DataPage transformedData={transformedData} />
)
}
export default Data
This is my component
app/components/DataPage.tsx
"use client"
import { useState } from "react"
import { IEisItem } from "../../interface"
import DataTable from "./table"
import axios from "axios"
import { toast } from 'react-toastify'
import { revalidatePath, revalidateTag } from "next/cache"
import { useRouter } from 'next/navigation'
type props = {
transformedData: Array<IEisItem>
}
const DataPage: React.FC<props> = ({ transformedData }) => {
..
const handleScan = () => {
setScanning(true)
const scanPromise = axios.get('http://localhost:3001/api/eis/scan').then(() => {
setScanning(false)
// revalidateTag('products')
revalidatePath('/data')
}).catch((err) => console.log(err))
}
return (
<section className="relative">
<div className="w-full flex justify-between items-center mb-3">
<h1>Products</h1>
</div>
<div className="w-full h-full overflow-hidden pb-[3rem]">
<DataTable products={transformedData} />
</div>
</section>
)
}
export default DataPage
NEXTJS 13.4 APP ROUTER