On a dynamic page [...slug].tsx at the root level (for multitenancy) i use getStaticProps + React query v5
With React Query i make request (prefetch for cache)
1) In _app.tsx:
/** queryClient */
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
refetchOnWindowFocus: false,
retry: false,
staleTime: Infinity
}
}
})
)
2) In revalidate i put 1800 or delete this field:
return {
props: {
dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))),
fullPathArray
},
revalidate: 1800
}
On my dynamic page, i do some post request, that changes data on this page, and if evrth is ok, i do:
- invalidate query of React query
- revalidate page
if (response.status === 201) {
queryClient.invalidateQueries({ queryKey: [QUERY_KEY_FETCH_PRODUCT] })
queryClient.invalidateQueries({ queryKey: [QUERY_KEY_FETCH_PAGE_DATA] })
const res = await revalidatePage(router.asPath.split('?')[0])
if (res?.revalidated) {
router.reload()
}
}
3) In revalidate:
export default async function handler (req: NextApiRequest, res:NextApiResponse): Promise<void> {
if (req.method !== 'POST') {
return res.status(405).json({ message: 'Method Not Allowed' })
}
try {
// check for a secret token to secure the route
if (req.body.secret !== process.env.REVALIDATE_TOKEN) {
return res.status(401).json({ message: 'Invalid token' })
}
console.log('req.query', req.body.url)
// revalidate the path (change '/qr-codes' to your specific page path)
await res.revalidate(req.body.url)
return res.json({ revalidated: true })
} catch (err) {
// if there was an error, return it
return res.status(500).send('Error revalidating from handler')
}
}
So, nothing helps and when the page is reloaded, i still have old page with old data(