Shopify data is not getting fetched in viewfinder

Technical Questions Shopify
, , , ,
1

I have a custom component in which one of the fields is of type Shopify Product.

It is working as expected on front-end pages. The data which I get in props from builder has the shopify data fetched for the product if viewed in draft mode or published mode.

However, this data is not fetched in builder viewfinder.

Here is the screenshot of the console logs on actual draft page: (shopify data is getting fetched)

image
image1861×270 29.7 KB

Here is the of the console logs on builder page: (shopify data is not getting fetched, only product id is present)

image
image1462×232 19.6 KB

Could you please mention what could be the issue?

2

Hi @olivela , can you elaborate on how you are fetching the data? Is it done client-side and are you using the noTraverse option when requesting Builder content? A link to the Builder page would also be appreciated so we can take a look. Thanks!

3

Hi, I am not explicitly fetching the shopify data. I have just added a field of type “ShopifyProduct” in my custom comonent. The data added above is automatically sent in the props by builder.

 {
              name: 'product',
              type: 'ShopifyProduct',
              hideFromInsertMenu: true,
              showIf: `options.get('productOrImage') === 'product'`,
              helperText: "Shopify Product Card to be displayed in the Carousel",
            },

Also, I am not using noTraverse option.

Builder content link

Builder public api key
ba68825bbd0845e6abb80bb2e6312dea

4

Hi @olivela , the ShopifyProduct picker will only provide the component with a product id so you will still need to fetch the product data in your component. You can take a look at the open source for Builder.io’s built-in Product Box component to see an example of how to use the ShopifyProduct type!

https://github.com/BuilderIO/builder/blob/main/packages/shopify/react/components/ProductBox.tsx

5

A better alternative to avoid explicitly fetching in your custom component is to set options={{includeRefs: true}} on the <BuilderComponent>. With this method, when the Query API sends content that has the request object it’ll automatically try to fetch the request.url so that data becomes available on the request object as well. The editor will fetch these remote requests while editing too.

You can see an example of this in our next-js-shopify starter:

https://github.com/BuilderIO/nextjs-shopify/blob/801a39772cdf403892fa5cf8f408a2e5c2bfe815/pages/%5B%5B…path%5D%5D.tsx#L105

You should also set includeRefs: true when requesting the content for <BuilderComponent> with either builder.get() or one of out content APIs.

https://github.com/BuilderIO/nextjs-shopify/blob/3015a88a833602ef63c83f9ec0b4ba72ef2bb5d9/lib/resolve-builder-content.ts#L18