Eventually consistent actions
Unanswered
Turkish Angora posted this in #help-forum
Turkish AngoraOP
Hi,
I'm using Cloudflare KV to store a list of items. It's eventually consistent:
1. Page
2. I click on remove button which calls
3. Page
4. Repeat step 2 on another item. Item from step 4 does the same, but this time, KV cache has already destroyed item from step 2, so item from step 2 disappears from the list, but item from step 4 appears.
Any tips to "fix" this janky feeling?
I'm using Cloudflare KV to store a list of items. It's eventually consistent:
1. Page
/items is loaded with a await getItems action. Each item has a remove button.2. I click on remove button which calls
putItem action. This action removes item from KV and revalidatePath('/items').3. Page
/items refetches await getItems, but this time, it receives cached KV response, that still has removed item, so removed item reappears again.4. Repeat step 2 on another item. Item from step 4 does the same, but this time, KV cache has already destroyed item from step 2, so item from step 2 disappears from the list, but item from step 4 appears.
Any tips to "fix" this janky feeling?
5 Replies
@Turkish Angora Hi,
I'm using Cloudflare KV to store a list of items. It's eventually consistent:
1. Page `/items` is loaded with a `await getItems` action. Each item has a remove button.
2. I click on remove button which calls `putItem` action. This action removes item from KV and `revalidatePath('/items')`.
3. Page `/items` refetches `await getItems`, but this time, it receives cached KV response, that still has removed item, so removed item reappears again.
4. Repeat step 2 on another item. Item from step 4 does the same, but this time, KV cache has already destroyed item from step 2, so item from step 2 disappears from the list, but item from step 4 appears.
Any tips to "fix" this janky feeling?
in this particular case where the data source isn't "reliable", I think that instead of refreshing the data directly from the source you could do an optimistic update and remove it directly from the UI, only adding it back if the request fails. this will require more client-side code but I don't see a better way around it when your action runs faster than the DB can catch up
Turkish AngoraOP
added simple diagram while waiting
@Rafael Almeida in this particular case where the data source isn't "reliable", I think that instead of refreshing the data directly from the source you could do an optimistic update and remove it directly from the UI, only adding it back if the request fails. this will require more client-side code but I don't see a better way around it when your action runs faster than the DB can catch up
Turkish AngoraOP
yeah, had same thoughts, but how do I deal with list state being passed to client component then, wouldn't it just overwrite the client state? How should I take it from Page to Client component only once than? 😄
I haven't tested this specific situation from a server component -> client component but usually this is what you do when you want to start with a given state then "take control" in the child component:
function Child({ initialData }) {
const [data, setData] = useState(initialData)
return <button onClick={() => setData(...)}>update client data</button>
}