Revalidating only when a change is made to Google Calendar?
Answered
West African Lion posted this in #help-forum
West African LionOP
I made a website that pulls events from a Google calendar but found that it only updates the page with a refresh in local development. I'm assuming this is due to it re-fetching locally each browser refresh, but it doesn't do so in production. What options do I have for making it more responsive to data changes in production?
At the moment, it just revalidates every hour, but I'm wondering if a better option exists.
Current Code:
At the moment, it just revalidates every hour, but I'm wondering if a better option exists.
Current Code:
const res = await fetch(
`https://www.googleapis.com/calendar/v3/calendars/<CalID>?key=<Key>&maxResults=5&orderBy=startTime&singleEvents=true&timeMin=${new Date().toISOString()}`,
{ next: { revalidate: 3600 } }
);Answered by ᴉuɐpɹɐɐ
At the moment, it just revalidates every hour, but I'm wondering if a better option exists.If you can set up so that everytime google calendar updates then hit a URL to your next.js server, thatd be great.
Otherwise, you are stuck with polling.
Better yet maybe use cron jobs to call an URL to invalidate the route and call the page again to trigger rerendering
30 Replies
@West African Lion I made a website that pulls events from a Google calendar but found that it only updates the page with a refresh in local development. I'm assuming this is due to it re-fetching locally each browser refresh, but it doesn't do so in production. What options do I have for making it more responsive to data changes in production?
At the moment, it just revalidates every hour, but I'm wondering if a better option exists.
Current Code:
ts
const res = await fetch(
`https://www.googleapis.com/calendar/v3/calendars/<CalID>?key=<Key>&maxResults=5&orderBy=startTime&singleEvents=true&timeMin=${new Date().toISOString()}`,
{ next: { revalidate: 3600 } }
);
At the moment, it just revalidates every hour, but I'm wondering if a better option exists.If you can set up so that everytime google calendar updates then hit a URL to your next.js server, thatd be great.
Otherwise, you are stuck with polling.
Better yet maybe use cron jobs to call an URL to invalidate the route and call the page again to trigger rerendering
Answer
@ᴉuɐpɹɐɐ > At the moment, it just revalidates every hour, but I'm wondering if a better option exists.
If you can set up so that everytime google calendar updates then hit a URL to your next.js server, thatd be great.
Otherwise, you are stuck with polling.
Better yet maybe use cron jobs to call an URL to invalidate the route and call the page again to trigger rerendering
West African LionOP
The only "trigger" I see in the API is for notifications.
https://developers.google.com/calendar/api/guides/push
Do you think this is something I can use?
https://developers.google.com/calendar/api/guides/push
Do you think this is something I can use?
Ill get back to you
@West African Lion The only "trigger" I see in the API is for notifications.
https://developers.google.com/calendar/api/guides/push
Do you think this is something I can use?
American Crow
Yea that's exactly what you need imo
Currently, the Google Calendar API supports notifications for changes to the Acl, CalendarList, Events, and Settings resources.If your use case is within those notifications^
@American Crow Yea that's exactly what you need imo
`Currently, the Google Calendar API supports notifications for changes to the Acl, CalendarList, Events, and Settings resources.`
West African LionOP
So I'd need something to receive the push and trigger a revalidation. I think I'd need an API route for that, right?
American Crow
Yea you set up a route handler in nextjs which takes those post requests which google calender sends
West African LionOP
The only thing I'm not sure about is where in the NextJS system this incoming notification go
American Crow
and you setup that route handler (api endpoint) somewhere within a notification dashboard or whatever on google calender as a setting
West African LionOP
Cool
I can do that
This should make it so I don't need to manually add a timer for revalidation right?
American Crow
withon your route handler in nextjs you can use
revalidateyea it changes your system from "pulling" the data
to google pushing it to you
West African LionOP
Any reason I'd want it to stay "pulling"?
American Crow
so yeah set up a route handler e.g.
Setup that
And your routehandler itself so
yourdomain.com/api/googleCalendarupdated which takes a post request.Setup that
`yourdomain.com/api/googleCalendarupdated in the Google Dashboard you basically tell it when to call this url (on what event)And your routehandler itself so
yourdomain.com/api/googleCalendarupdated just revalidates your internal path e.g. your homepage or where ever you need the update to occur----
If you pull the network every x seconds, you do that 10 times but there is no new data, there might be new data 1 time. So you have some unnecessary network traffic
If you pull the network every x seconds, you do that 10 times but there is no new data, there might be new data 1 time. So you have some unnecessary network traffic
if it gets pushed you only have network traffic when something actually happend
But other than that its the same thing
West African LionOP
Sounds like moving to google pushing is ideal for this situation
So I get changes when they are made and don't check when they are the same
American Crow
It technically is the better soltuion yes
yes correct
West African LionOP
Wooo! Thank you so much
@American Crow It technically is the better soltuion yes
West African LionOP
So I've been trying to read the docs and figure this out, but I'm sorta stuck...
In the docs, they say you need to set up a channel for the "webhook," but I'm not entirely sure where I can do that and where I would tell the callback to go to the endpoint I create. Any ideas?
https://developers.google.com/calendar/api/guides/push#overview
In the docs, they say you need to set up a channel for the "webhook," but I'm not entirely sure where I can do that and where I would tell the callback to go to the endpoint I create. Any ideas?
https://developers.google.com/calendar/api/guides/push#overview
I see this example, but I'm not sure where or what to do with it 😦
POST https://www.googleapis.com/calendar/v3/calendars/my_calendar@gmail.com/events/watch
Authorization: Bearer auth_token_for_current_user
Content-Type: application/json
{
"id": "01234567-89ab-cdef-0123456789ab", // Your channel ID.
"type": "web_hook",
"address": "https://mydomain.com/notifications", // Your receiving URL.
...
"token": "target=myApp-myCalendarChannelDest", // (Optional) Your channel token.
"expiration": 1426325213000 // (Optional) Your requested channel expiration time.
}@West African Lion So I've been trying to read the docs and figure this out, but I'm sorta stuck...
In the docs, they say you need to set up a channel for the "webhook," but I'm not entirely sure where I can do that and where I would tell the callback to go to the endpoint I create. Any ideas?
https://developers.google.com/calendar/api/guides/push#overview
Hi can you make another thread? since its already a different question
@West African Lion I see this example, but I'm not sure where or what to do with it 😦
ts
POST https://www.googleapis.com/calendar/v3/calendars/my_calendar@gmail.com/events/watch
Authorization: Bearer auth_token_for_current_user
Content-Type: application/json
{
"id": "01234567-89ab-cdef-0123456789ab", // Your channel ID.
"type": "web_hook",
"address": "https://mydomain.com/notifications", // Your receiving URL.
...
"token": "target=myApp-myCalendarChannelDest", // (Optional) Your channel token.
"expiration": 1426325213000 // (Optional) Your requested channel expiration time.
}
American Crow
The example you posted is just the programmatic way of creating a "notification for changes" or webhook in short.
You basically just create a request in your favorite http client e.g.
I was talking about a dashboard earlier. Maybe they don't have a UI to do the same thing. But the example shows the "programatic" way.
You basically just create a request in your favorite http client e.g.
curl, postman, etc. and do a POST to the endpoint https://www.googleapis.com/calendar/v3/calendars/my_calendar@gmail.com/events/watchand a body which reflect the settings for your webhook, e.g. your route handlers URL.I was talking about a dashboard earlier. Maybe they don't have a UI to do the same thing. But the example shows the "programatic" way.
@ᴉuɐpɹɐɐ Hi can you make another thread? since its already a different question
West African LionOP
My apologies! I'll make a new thread for this followup question 👍