Make an API call based on a repeated elements variable data

[anthony_schanen]

I have a carousel component, who’s collection is a result of an API call. The API response contains ID’s that are used to fetch nested content in Contentful.

I need to make an API call for each item to retrieve both the image, and the title for this using each ID, but I don’t see a way of using “currentItem” to make a query. The queries data picker is independent of the repeated element’s context, so there seems to be no way of achieving this.

There might be a way to “flatten” the data before it gets to plasmic, but the rest of my app is using this structure, and I’d hate to have this odd exception for one component.

Is this do-able? Perhaps this is an anti-pattern and/or im thinking about this wrong.

[jason]

You can try extracting the repeated element into a new component. The new component would need to take in currentItem as a prop. Then you can make a query in the component using the prop.

Note this will result in an N+1 query that could affect the performance of your site if there are many repeated elements. “Flattening” the data would still be ideal from a performance perspective, but you would likely need to write some extra JS code to handle it.

[anthony_schanen]

Hey Jason, thanks for that tip. Conceptually, that makes sense and I’ll give it a go. I’ll comeback to the topic and mark it as a solution with some steps for anyone else that may need to do this if it works out.

On another note, you mentioned performance, and I believe I am hitting some difficulties with how I’m implementing my app in general that are already affecting page load speeds. Apologies if this needs to be split into another topic for visibility, but I figure I’ll ask it as it is slightly related.

Each page is really only consisting of one wrapper element that makes a query to Contentful for a list of “Page Zones” (components that represent rectangular blocks of content)

This initial list has a similar structure to what you described, I obtain the list of ID’s, I pass the ID as a prop for each item, and have the child components render based off a conditional guard. Some screenshots below to make sure i’ve described it correctly

Here is the page zone renderer component on a page

Here is what the component consists of, child elements with conditional guards based off of a nested API call for content

My pages do load slowly as this is a nesting of API Calls, and I don’t think I can speed this up without some sort of database caching information.

The goal is to give my content editors flexibility in Contentful to move content blocks around the site, and just have the pages draw based on ordering and type. This is my first shot at something like this in plasmic, and so far, this has been “working” but I cannot help but feel I am making this harder than it needs to be. If the pages are loading slowly I must be doing something non-sensical.

Do you have any guidance if I’m down the right path with this? A page so far takes almost 2 seconds to load, and that seems slow by modern standards

Thank you again