suggestions on improving my architecture? (not really convex specific)
hello frontend / convex experts! i notice that im spamming my
getImages query functions heavily due to my bad design. 🙈
im building something like an album where users can upload images and save them to an album.
i have a next.js page that looks like the following and every time a user clicks on the next button, the 8 images uploaded will rerender again since everything here lives on the same page.tsx. im performing something like useMutation(api.images.save) when a user clicks on the "next" button and then they are redirected to a new album page /album-page/2 with 8 images.
ideally, the 8 images should not rerender when redirected to the next page from /album-page/1 to /album-page/2. any suggestion? 🙏
24 Replies
You could include the images panel in the layout for
/album-page/, that way it stays put and the rest updates when the next segment in the url changes.thanks! i thought about that. but im doing something like a
const [imgs, setImgs] = useState(...)
but how can i keep track of which image the user has selected to populate the canvas if it's in the layout page? 😮
a file nested with layout nested with page?I've barely worked with next.js, but generally in React you want to lift up state in this scenario. If you're keeping things in
useState(), I would reach for a context to keep the state accessible to multiple nested components, but there's probably a more Nextjs way to handle this.
You using pages router or app routerapp router
ok a context it is! right, good idea
Oh, and are the uploaded images just in the browser at this point or do they actually go into your convex db right away?
yup in db
If they're in convex you don't need to make your own context then
It depends on your app flow whether you want to upload immediately - generally you do for a long flow, as a refresh would wipe out their selections otherwise, unless you're storing them in the browser in a way that survives refreshes.
But as you're already doing that, I'd say stick with it, and you can just query convex in any component that needs data about the selections.
ok lemme try the context first and report back. thanks!!
If you're storing the images right away on upload, the context is superfluous, just keep that in mind. Convex's provider already serves as the context you need for convex data. But if you need client state that isn't derived from the database, then you may need your own context.
i actually let users upload all the images on a different page and hit "save" before they are redirected to this album page
im not storing right away. sorry i didnt clarify!
But once they're on the album page they're saved, so Convex still has everything you need in the db.
yup right
One of the big benefits of Convex is not having to really do much global state management with contexts and such
yea thats why i was thinking if it's something wrong with my design
I don't think there is!
Convex will dedupe any duplicate calls to
useQuery(), query away in whatever components need data.
And the more you lean directly on Convex's hooks, the more likely you are to stay reactive by default without having to make sure things are getting updated in your state.i should try lifting the state up first
thank you!!
oh you mean how do you know which image they clicked on to edit 🤦♂️
yeah you have to lift up state for that lol
yup, i should just remove the "redirect to page/2" when saved. coz it's reactive, i can just keep track of the page number on the page for the user
another way to lift up state that may be better is to put it in the query string in the url
that way if they refresh their selection persists as a bonus
oh yea, query string will be super long with the image ID tho?
just my opinion, but as a user, I'd take state that persists when I refresh over a pristine url any day
wish more web apps did that by default
good point
but definitely a design choice for you
thanks for the feedback!