I modify the image of a previously created product, but I don't see it updated. To update it, I have to disable the browser cache and perform a hot reload. How can I achieve the same result with Qwik, perhaps simply by changing the route without having to perform a hot reload?
#Is there a way to view updated content after a modification without disable the browser cache?
cobalt saffron
pale perch
Does this question apply to just dev mode, or preview/production mode as well?
Can you share the code of how the image is being imported and rendered?
cobalt saffron
Hi @pale perch this is the code. The image url never change but image is override in supabase but not immediatly
Here is the function call
I use npm run serve , this is in package.json , "serve": "node server/entry.express".
hard reload not hot reload sorry
I retrieve the data from supabase with routLoader and pass the response as props to the ShopProducts component. I display the image url from the props.
pale perch
Ok so if you have the option to upload the image to a new location each time, that might be best. That way each version of the image has a different URL and when the url updates, it loads the new image. If that's not possible, something to try would be to use a cache busting parameter like /my-url.jpg?v=3. Each time the image/product changes, even if the old v=2 was cached for example, seeing v=3 would force the browser to load new content.
If the product already stores the "lastModified" date, you could just use that for example, as long as reuploading an image changes that value as well.
cobalt saffron
I had already considered adding a parameter in the query string. The problem is that when I change the path, the data related to the changed product, such as the product title, description, price, etc., are updated only on the second click on the <Link>
This happens regardless of the image
pale perch
Ok so not just image, but other data returned from the useProducts hook is also showing as stale?
cobalt saffron
If console.log(shop) inside useProducts is updated, but console.log(products) inside the component is not updated until I call the '/shop' path a second time.
inner briar
Imagine name are generated based on the contents of the images but you can also just change the file path for them
pale perch
Is the replaceImageInBucket function being invoked through a routeAction?
cobalt saffron
Is the `replaceImageInBucket` function being invoked through a routeAction?
no
cobalt saffron
Imagine name are generated based on the contents of the images but you can also ...
But are you referring to Qwik or how Supabase saves the image names?
pale perch
I could be wrong but I think the only way to refresh data from a routeLoader is to reload/navigate or to submit a routeAction
inner briar
I’m talking about qwik
cobalt saffron
I’m talking about qwik
ok, this is my image path https://oukztwgobbpvjuhlvpft.supabase.co/storage/v1/object/public/shop/8d1ab08d-f085-4ae2-be81-70ff4f812dd8/6a86257d-a768-4068-967f-d90a2a0d5411 in supabase that I used in qwik. How can I change the file path
now I replace the image with another at the same path.
Before you can see the new image, you need to refresh the browser one or more times.
If you open it in the browser, you will see a different image.
inner briar
Oh then it’s a supabase then which I don’t know
cobalt saffron
Thank you very much anyway.
cobalt saffron
I could be wrong but I think the only way to refresh data from a routeLoader is ...
do you mean this ? const nav = useNavigate(); await nav('/shop')
pale perch
I mean it could tell us something if it does work
cobalt saffron
If i use await nav('/shop'); to redirect page is not updated
pale perch
Were you expecting to see the image update, or also the description, etc?
Did you see a new q-data.json fetch in the network tab?
cobalt saffron
Were you expecting to see the image update, or also the description, etc?
if I click shop in the navigation menu the first time i receive old data (snippet_2.png), if I click shop in the navigation menu the second time I receive update data (snippet_3.png). I should receive them updated immediately.
silent dock
Just a normal reload with the "disable cache" checkbox checked should work
no need to hard reload no?
pale perch
And from the logs you mentioned on shop, are those appearing at the expected times and showing the expected data? Are there cache headers set in the network tab that could cause the browser to reuse old responses?
silent dock
may I ask why do you want to avoid disabling the cache?
Or did you mean disabling it through the cacheControl api?
cobalt saffron
no need to hard reload no?
It takes a lot of time to update the image, normal reload works to update text
cobalt saffron
Or did you mean disabling it through the cacheControl api?
do you mean this ?
cobalt saffron
may I ask why do you want to avoid disabling the cache?
After modifying the product, I would like to display the updated product on the first navigation.
pale perch
The onGet you are showing in the screenshot is nested inside edit-product, but would not affect the caching for /shop, right? Just realized that your screeenshot shows q-data coming from cache so that definitely seems like your problem.