I have put together a simple demonstration of a problem that I'm facing when using a repeater in conjunction with wixData. I realise some may suggest using a dataset, but my real-world scenario is more complex hence the need for linking the repeater to the results of a wixData query. The problem I am facing is that sometimes (not always) when clicking a button to remove an item from the repeater data, the removal takes place, but refreshing the data in the repeater still gets the deleted item even though the function to get the repeater data is being called AFTER the promise return of the wixData.remove() function!
If you want to test it out for yourself you can give it a try here: https://astutesystems.wixsite.com/testsite/test-repeater
Here are the details of how it is working.... I have a simple repeater on a page as shown below
![](https://static.wixstatic.com/media/a27d24_7ded5c2e83d04331b3f4997c37cf84c3~mv2.png/v1/fill/w_492,h_340,al_c,q_85,enc_auto/a27d24_7ded5c2e83d04331b3f4997c37cf84c3~mv2.png)
This will be linked to data from a dataset as shown here...
![](https://static.wixstatic.com/media/a27d24_d493f4ea6a234fbe92cc6b29ec5e4314~mv2.png/v1/fill/w_928,h_261,al_c,q_85,enc_auto/a27d24_d493f4ea6a234fbe92cc6b29ec5e4314~mv2.png)
The relevant code for the page is as follows:
import wixData from 'wix-data';
import wixWindow from 'wix-window';
import uuid from 'uuid';
var masterID = '31068ef7-fe5e-4e2d-9d7a-5796966edaf7'; $w.onReady(function () { $w('#repeater').onItemReady(repeater_itemReady); $w('#btnAddData').onClick(btnAddData_click); $w('#btnDelete').onClick(btnDelete_click); getRepeaterData(); }); function repeater_itemReady($item, itemData, index) { $item('#lblHeading').text = itemData.heading; $item('#lblDetails').text = itemData.details; } function getRepeaterData() { return new Promise((resolve, reject) => { wixData.query('repeater-test') .eq('masterId', masterID) .descending('_createdDate') .find() .then((results) => { console.log('getRepeaterData returned ' + results.items.length + ' rows from dataset'); $w('#repeater').data = results.items; if ($w('#repeater').hidden) { $w('#repeater').show(); } }) .catch((err) => { console.error(err); reject(err); }); }); } function btnDelete_click(event) { var itemData = $w('#repeater').data.find((element) => { return element._id === event.context.itemId; }); wixWindow.openLightbox('Confirm Removal') .then((data) => { if (data.result) { console.log('About to remove ' + itemData.heading); wixData.remove('repeater-test', itemData._id) .then((results) => { console.log(results); getRepeaterData(); }) .catch((err) => { console.log(err); }); } }); }
One of the ways that I am testing this is using the console to see when an item is being removed and then how many items the getRepeaterData() function finds from the dataset. In theory, after removing an item there should be one less than before (most of the time this is the case)... but here is an example of the intermittent problem - the getRepeaterData() function finds 4 records... 1 is deleted then it again finds 4 records!
![](https://static.wixstatic.com/media/a27d24_7d7c467328674a21b1788bb5ff7be358~mv2.png/v1/fill/w_980,h_98,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/a27d24_7d7c467328674a21b1788bb5ff7be358~mv2.png)
A simple refresh of the page then shows just the expected 3 records.
I'm really not sure what's going on and would appreciate any thoughts/suggestions. Is there a genuine error with the wixData.remove function? Is its promise being resolved before the row is actually removed from the dataset? Would this perhaps be less likely to be a problem if the removal code was moved to a backend function?
Thanks in advance
QA informed me that they've opened a problem ticket for this issue.
OK, I think I do see something. Doesn't happen very often, but from time to time. I'm reporting this to QA for evaluation.
Thanks for the suggestion Yisrael. I had already tried setting the repeater data to an empty array first but that didn't help. If you check the details of the console messages, it's clearly not the repeater itself which is at fault. I'm logging before the removal of the record, then the results of the item removed showing that it was correctly found, then logging the number of items found by the query of that same dataset which shows no change in the number of records in the dataset. The repeater simply binds to those results, so it's not that the repeater isn't updating, but rather that the query to get the data is still returning the deleted item.
It does seem to be a momentary thing - a refresh of the page sorts it out, but that's not a solution.
Any other ideas? It's almost like removing the item from the database was somewhat throttled and so we're still getting the item in a query which is run very very soon after the removal.
A couple possibilities:
You should use onItemRemoved() to properly handle the Repeater item that you are removing.
or...
In the getRepeaterData() function, set the Repeater's data like this:
$w('#repeater').data = []; $w('#repeater').data = results.items;
First set the Repeater's data to empty. Then when you set it to results.items, it forces the onItemReady() function to handle all of the "new" data. Otherwise, you still have items that exist and they are not properly handled.