As part of my Todo-App development project, I am utilizing technologies such as Next.JS, Prisma, Typescript, and PostgreSQL. The data retrieval process involves the API folder interacting with the database through Prisma. CRUD operations on the Task table are performed by calling the endpoint http:3000/api/tasks. The rendering of tasks is handled by a component named To-dos, which fetches the tasks using a useEffect.
While everything seems to be functioning correctly, I have encountered an issue where changes in the data due to CRUD operations do not reflect on the Client-Side without a manual page reload. Is there a way to resolve this issue?
Todos.tsx :
// Implementation of Todos component
export default function Todos({ attribute, value, title, limit, addBtn }: arguments) {
const [data, setData] = useState<Item[]>([]);
// Fetching data
useEffect(() => {
const fetchData = async () => {
const response: any = await obtainTasks({ attribute, value, limit });
setData(response.response);
};
fetchData();
}, []);
// Component rendering logic goes here...
}
I have experimented with using Polling intervals for fetching data every 5 seconds, but it proves to be costly. My primary goal is to have the data updated seamlessly without necessitating a full page reload.