Revalidate stale data by ID
Handling revalidation of a particular article requires us to pass through an ID as part of the request's body. Therefore, we need to change this from a GET request to a POST request and use the withContent middleware to parse the request's body into a JSON object.
Additionally, we fetch data for this specific article from Supabase, using its ID, and update the cache for that path.
We can no longer test this using a browser, as it can only send GET requests. Therefore, we use a VS Code extension called Thunder Client to make the POST request and pass along the article's ID in the request's body.
Code Snippets
Update Revalidate route for single article
router.post(
"/revalidate",
withContent,
async (request, { SUPABASE_URL, SUPABASE_ANON_KEY, ARTICLES }) => {
const { id } = request.content;
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const { data: article } = await supabase
.from("articles")
.select("*")
.match({ id })
.single();
await writeTo(ARTICLES, `/articles/${id}`, article);
const { data: articles } = await supabase.from("articles").select("*");
await writeTo(ARTICLES, "/articles", articles);
return json({ received: true });
}
);
Run wrangler development server
npx wrangler dev
Resources
Instructor: [0:00] Our list of blogs has been revalidated, but if we navigate to a specific blog, we'll see that the title has not yet been updated. In order to revalidate a particular article, we'll need to provide our revalidate route, an ID for the article that we want to fetch fresh data for. [0:16] Therefore, we need to provide our route additional information in the request's body, so we need to change this from a GET request to a POST request. We also need to use the withContent middleware to tell itty-router that we actually care about the body of this request. We can import that from our itty-router extras at the top.
[0:34] Now, in the body of our request, we can destructure the ID for our article from the request's content. Now, after creating a Supabase client, we can make a request to Supabase for a particular article by awaiting Supabase.from('articles'), where we want to select all columns where there is a match on our ID. We want to get back a single row.
[1:01] To make this a little less ambiguous for this second request rather than calling this data, let's also rename this to articles. That's what we'll be writing to the articles cache. Now that we have our specific article for that ID, we need to await our right to function updating our articles cache at the path of /articles/our articles ID with that new article that we got from Supabase.
[1:30] We can no longer test this in the browser because we require a post request, but we can send this using the Thunder Client extension, which will allow us to make a post request to localhost 8787/revalidate with our body set to a JSON object without ID. We can get that specific ID from the URL here and paste that in here.
[1:49] When we send this request, we'll see that our revalidate request was received. If we refresh the browser we'll see our title has been updated.