Delivery API 0.9 to 1.0 Components not showing up

1

Hello,

I’m currently working on a react project with @bloomreach/react-sdk": “14.5.0” and “@bloomreach/spa-sdk”: “14.6.0” and BloomreachXM 14.7. I’m in the process of updating the code to work with Delivery API 1.0.

I’m having an issue where I’m not seeing some of the components on the site as they used to show such as the header and menu components.

For other components I see “Component “COMPONENT_NAME_HERE” is not defined” on the website page itself rather than just nothing showing up.

I’m assuming that there is a problem with the connection from the Delivery API and the mapping in App.tsx we pass to BrPage. I do see the components showing up in the delivery api json and we still have those listed in our mapping.

I don’t see any console errors so I’m not entirely sure on the issue but is there anything with regards to mapping we need to change perhaps or is another reason the components might not show up?

Thanks!

2

Hello @Jonathan_Li,

You can try setting the apiVersion property in the SDK Configuration object to ensure the SDK is using the Page Model 1.0 configuration.

Another thing to be aware of is the introduction of the ctype property returned by the API response:

ctype (HstComponent)

If an HstComponent has a non-null value for getCType, then the ‘ctype’ field will be present in the serialized JSON for that component. The ‘ctype’ typically is useful for an SPA to ‘know’ what kind of component it is dealing with. In Delivery API v0.9, this information was often communicated by (mis-using) the hst:label. In Delivery API v1.0, combined with Dynamic Component Parameters, the ctype can be used as the contract between the SPA and the backend components.

3

Thanks for the response! Yes I’ve set up the apiVersion property in the config object. I haven’t looked at the cType stuff too much though, will have to take a look. Appreciate the feedback. I’m wondering about how the sdk reads the json in 1.0. Since the hierarchy is different and a lot of the components are now reached as “children” or references how can I know that the component is getting hit? The component mapping in the app.tsx is the same but now it seems like those components aren’t getting connected as when debugging the tsx files they are not getting hit.

4

The message “Component “COMPONENT_NAME_HERE” is not defined” means that the mapping is not correct for that component. The SDK is trying to render a component, but it doesn’t know which frontend component to use for rendering.

5

Yes, I updated the mapping for the ones with “Component “COMPONENT_NAME_HERE” is not defined” and those seem to be resolved now. However for the menu and header components I’m not seeing that message at all, they are just no longer showing up on the pages. And when I debug the tsx files for them it seems they aren’t getting touched. I see the components return in the resourceapi (albeit I believe as references now since the hierarchy is different) and we have the labels in the mapping in the app.tsx but somehow it doesn’t seem like they are connecting.