getAsyncProps not working in editor preview with localhost

Technical Questions CMS
1

Hi,

I created a plugin to select products from our ecommerce backend and created a component based on the components from the Shopify starter (component, resolver for data) using getAsyncProps. It works great in production and locally, but in the editor the data from getAsyncProps isn’t getting resolved.

The prop items gets the following array:

[
  {
    url: 'graed-chalet-little-excited-500-400-28-1.htm',
  },
]

I map through the items, make a fetch request for the data, do await Promise.all(requests) to get the data and then return it.

What could be the reason the data works fine in production and local, but not in the editor?

2

Hi @gijsbotje thanks for the questions.

getAsyncProps is meant to be used as a helper to fetch all the data required for rendering your components on the server-side (or during SSG) , but note that you’ll still need to fetch the required data inside your component in the case of client side rendering (for example when you’re editing in builder and the page re-renders on the browser and doesn’t make a round trip to the server).

Make sure you are fetching any necessary data within the component itself and see if that fixes your issue.

3

@gijsbotje Did fetching within your custom component work?

The issue I have with this solution is that we want to protect the API credentials from leaking out into the front end, not to mention we need to send a hostname header to our API for access.

@TimG how would we fetch data from the front end if we need a server to produce it? Seems really annoying to have a function like getAsyncProps that works great in production but there’s no automatic fallback for previewing.

Am I supposed to check for isPreviewing and then spin up my own server API proxy to get data just for preview? That seems a bit excessive…