Saturday, 2 September 2023

Nextjs router push taking a few seconds to update after redirect

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