Lazy-loading third-party data into a live_component (modal)

I have a live_view page that loads products from a third-party API and also has a modal popup to show additional information about each product. Fetching the data on mount works as expected but I would like to use streams or temporary_assigns to keep this data off of the socket. Unfortunately, the API I’m using does not allow me to fetch data for a singular product and I am only able to fetch all of the data ~90kb.

When I switch to use a stream, I am unable to retrieve the data for the modal since you cannot traverse through a stream. When I switch to temporary_assigns, I can only load a modal when navigating directly to the url (since the assign gets reset).

I also tried using assign_async but ran into a similar issue as with streams where the data isn’t available to load into handle_params for the modal.

Are there any workarounds for these issues or should I just abandon the idea and stick with assigns?

How much data is it? Streams are nice but 90kb doesn’t seem like a big deal to keep in server state. That’s definitely the simplest solution.

One workaround I can think of is to store the additional info as JSON in a data attribute in the DOM, then use a JS hook to populate the model when it’s open (you’ll likely have to phx-ignore those parts).

…and of course another you’ve probably thought of is to just make the call for all products and strip out the one you want. 90kb is really no big deal over the network compared to what many sites these days do. Many ecom sites load multi MBs when you click into a product. I’m not saying it’s right not to think about having small payloads, but you really shouldn’t run into any issues.

Thanks for the input! After thinking through it I was able to load data from a stream into a live_component with JSON attributes.

Below are the steps I took to accomplish this, maybe this will help someone else in the future with a larger set of data.

  1. Switch assign to stream
  2. Add the content I need as data attributes while enumerating through the @streams.products
  3. Remove any attributes in the live_component that are part of the stream
  4. Add phx-hook in the live_component that reads the JSON data when mounted. Set the content with Javascript and use this.pushEventTo to push the data to the live_component (for SEO and cost calculations)
  5. Update the live_component update function to set the assigns for the missing items, setting them to nil
  6. Update the nil assigns in the live_component in the handle_event function from step 4

Was it worth it? ¯\_(ツ)_/¯

ha! I don’t fully follow all of that but if it works it works! :smiley: