CasperLeerink•2mo ago

Keep old data when changing trpc procedure inputs

Hi! I was wondering if anyone has a best practice for preventing a flash of no data when changing inputs for a certain trpc procedure using tanstack query. My usecase is a leaflet map where the data it fetches changes when changing the zoom or position of the map. But I still want to show the old data when I am panning the map for example. I am currently using something like this where navigate triggers new inputs for the query.

const newSearchParams = {
      ...searchParams,
      bounds: newBounds,
    };
    utils.listing.getCoordinates.setData(newSearchParams, () => {
      return geoListings.data;
    });
    navigate({
      search: newSearchParams,
    });

const newSearchParams = {
      ...searchParams,
      bounds: newBounds,
    };
    utils.listing.getCoordinates.setData(newSearchParams, () => {
      return geoListings.data;
    });
    navigate({
      search: newSearchParams,
    });

Its working but I thought maybe there is a better way?

1 Reply

wleistra•2mo ago

Check the import keepPreviousData from react query on the placeholderData prop.