You’re on the right track, but useMemo won’t prevent repeated data fetching — it only caches calculated values. To avoid reloading previously fetched products, store the data in state (like an object keyed by ID) and, when loading a new page, only fetch items that aren’t already in the cache. This approach keeps previously loaded data intact and ensures efficient loading for each new page.

The 419 “Token mismatch” error usually happens when the CSRF token isn’t sent correctly from your SPA to the Laravel backend. Make sure your frontend includes withCredentials: true in your Axios or fetch requests, and that your SANCTUM_STATEFUL_DOMAINS in .env includes the SPA domain (localhost:5173). Also, check that the session cookie domain is correctly set so the token is properly shared between ports.

You can clean up the purchases collection in PHP by mapping over it before returning. For example, loop through each purchase and, if the price array exists, replace it with the first object in the array. This way, the price is returned as a simple object and you don’t need to handle it separately in JavaScript.