I have a form in my nextJS app which uses react-hook-form
to save some data to the DB via an API, then it redirects the user back to the listing page ... The problem i am seeing is when the user is redirected back to the listing page, it takes about 3 seconds to actually refresh and see the new entry ... I have a pageloader which shows a spinner while fetching the data on the listing page, but it doesnt seem to work when creating a new entry.
On my form im saving and redirecting using the following;
const onSubmit = handleSubmit(async (data) => {
setLoading(true)
try {
await axios.post('/api/jobs', data)
router.push('/jobs')
} catch (error) {
setShowErrors(error.response.data.errors)
} finally {
setLoading(false)
}
})
and in the jobs listing page i am getting the data using the following;
const { data: jobsdata, error } = useSWR('/api/jobs', () =>
axios.get('/api/jobs')
.then(response => response.data.data)
)
if (! jobsdata) {
return (<PageLoader />)
}
Is there a way to refresh the data before being shown on the jobs listing page so that the 3+ second delay doesnt happen and the data is there when the user is redirected?
from Nextjs router push taking a few seconds to update after redirect
No comments:
Post a Comment