Manual Refresh
Say you’re the developer of this Next Gen task list app, all the UI components are there, and it’s fetching the list from your API. You’re working on the new task detail view pane on the right, specifically on the checkbox that lets the user complete the task. So you call your PATCH /task/42
endpoint to update the status of the task, but that isn’t enough, because the list also needs to be updated to reflect that the new complete status of that task.
While there are a number of ways of ensuring the list reflects the corrrect data after a task update, like caching the data locally, or having a webhook that listen to server changes, today let’s explore the simplest option:
Manually refreshing the list
Manually refreshing means that you need to call another function to ensure that your data is refreshed, like this example function to mark a task as done:
async function completeTask(task) {
await updateTask(task.id, { complete: true })
// Manually refresh the list
await refreshTaskList()
}
Simplicity is the greatest advantage of this method. This keeps your client thin, because you’re not updating any cache, and your app just reflects the data from the server.
But while this solution is simple, it still requires a lot from the developer to keep up with it. Every time you make a data change, you need to also call the refreshTaskList()
method. And if that function isn’t globally available, like when using swr
, you’ll need to pass the refresh function around as props (or use a provider) so that your other components can refresh the list.
Ideally, your data layer (be it a client library, or on the API schema) should be aware of what kinds of queries need to be refreshed after each change. Take a look the following supabase query:
await supabase
.from("tasks")
.update({ complete: true })
.match({ id: task.id });
The client library already knows the table we’re updating: tasks
, what if it would just notify any “active queries” to refresh after the operation is done? You can use the realtime feature to be notified that changes happened, but you’d still need to either apply that operation locally (update, insert, delete), or trigger a refetch to that table to get all the data. And if you’re using a custom API for your database, this can get even more complicated, because your endpoints might not map directly to a specific table or a list endpoint.
If you’d be interested in a library that automatically triggers a refresh after Supabase operations, get in touch! I’m planning on building it, and I’d love some feedback or help getting it off the ground!
Automatically triggering a refresh isn’t a full solution though, it still requires the app to wait for 2 API requests (update task and get list) before the UI updates. And a person’s time limit to feel that the system is reacting instantaneously is 100ms, which is very likely less than it will take to complete this operation.
In future weeks, we’ll discuss and explore other architectures to avoid this delay as well, even if it means lying to your users!
Status
Nov 14 to 20
📰 Selfeed
A productivity app using the same feed gamification strategies from social media apps.
Selfeed is now publicly available, and this week I got authentication working, and the habit routines now sync between devices!
👗 Fashion Fusion
AI-Generated Outfits
I’ve been working on an AI prototype with some friends and we explored generating some outfits with Dall-e 2:
Projects by the Numbers
▶️ VSCode Run Function
Downloads: 88
📺 Screen Box
WAU: 14
📰 Selfeed
WAU: 2
Thank you Aaron for the accountability to start this newsletter!