Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(examples): add on-demand ISR to cms-sanity (#35220)
Documents how to setup GROQ webhooks that revalidates ISR routes on-demand. It's trivial to do this for posts as you only need to lookup the `slug` based on the `id` you receive in the webhook payload. When editing authors the GROQ query demonstrates how you can do a reverse lookup (find all pages that reference the edited author) then invalidate their routes. This work is based on sanity-io/structured-content-2022#105, thanks @j0nas! 🎉 [Test **Deploy with Vercel**](https://vercel.com/new/git/external?repository-url=https://github.com/stipsan/next.js/tree/add-on-demand-ISR-to-cms-sanity/examples/cms-sanity&project-name=cms-sanity&repository-name=cms-sanity&env=NEXT_PUBLIC_SANITY_PROJECT_ID,SANITY_API_TOKEN,SANITY_PREVIEW_SECRET,SANITY_STUDIO_REVALIDATE_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20Sanity&envLink=https://vercel.link/cms-sanity-env) ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` Co-authored-by: Lee Robinson <9113740+leerob@users.noreply.github.com>
- Loading branch information
Showing
5 changed files
with
87 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import { isValidRequest } from '@sanity/webhook' | ||
import { sanityClient } from '../../lib/sanity.server' | ||
|
||
const AUTHOR_UPDATED_QUERY = ` | ||
*[_type == "author" && _id == $id] { | ||
"slug": *[_type == "post" && references(^._id)].slug.current | ||
}["slug"][]` | ||
const POST_UPDATED_QUERY = `*[_type == "post" && _id == $id].slug.current` | ||
|
||
const getQueryForType = (type) => { | ||
switch (type) { | ||
case 'author': | ||
return AUTHOR_UPDATED_QUERY | ||
case 'post': | ||
return POST_UPDATED_QUERY | ||
default: | ||
throw new TypeError(`Unknown type: ${type}`) | ||
} | ||
} | ||
|
||
const log = (msg, error) => | ||
console[error ? 'error' : 'log'](`[revalidate] ${msg}`) | ||
|
||
export default async function revalidate(req, res) { | ||
if (!isValidRequest(req, process.env.SANITY_STUDIO_REVALIDATE_SECRET)) { | ||
const invalidRequest = 'Invalid request' | ||
log(invalidRequest, true) | ||
return res.status(401).json({ message: invalidRequest }) | ||
} | ||
|
||
const { _id: id, _type } = req.body | ||
if (typeof id !== 'string' || !id) { | ||
const invalidId = 'Invalid _id' | ||
log(invalidId, true) | ||
return res.status(400).json({ message: invalidId }) | ||
} | ||
|
||
log(`Querying post slug for _id '${id}', type '${_type}' ..`) | ||
const slug = await sanityClient.fetch(getQueryForType(_type), { id }) | ||
const slugs = (Array.isArray(slug) ? slug : [slug]).map( | ||
(_slug) => `/posts/${_slug}` | ||
) | ||
const staleRoutes = ['/', ...slugs] | ||
|
||
try { | ||
await Promise.all( | ||
staleRoutes.map((route) => res.unstable_revalidate(route)) | ||
) | ||
const updatedRoutes = `Updated routes: ${staleRoutes.join(', ')}` | ||
log(updatedRoutes) | ||
return res.status(200).json({ message: updatedRoutes }) | ||
} catch (err) { | ||
log(err.message, true) | ||
return res.status(500).json({ message: err.message }) | ||
} | ||
} |