Import app based on rest API response

MarcoM · June 7, 2023, 4:44pm

Hello guys,
We have the following scenario: we have a BE service returning an app name and some props to be shown to the customer.

The idea is exactly the same as is implemented in the checkoutv6, where the connector can return the appName and it will be used to render the app itself in a DIV.

The main issue we have is that we can’t fully understand how it’s done.
We are checking the render-runtime component, which seems to be the correct place to start, but we’re having issues understanding which of the exposed elements we should use and how the props should be passed.
The behaviour we find promising is here:

github.com

vtex-apps/render-runtime/blob/master/react/core/main.tsx

import 'apollo-cache-inmemory'
import 'apollo-client'
import 'apollo-link-http'
import 'apollo-link-persisted-queries'
import 'apollo-upload-client'
import 'apollo-utilities'
import 'classnames'
import 'graphql'
import EventEmitter from 'eventemitter3'
import { createBrowserHistory as createHistory } from 'history'
import queryString from 'query-string'
import React, { ReactElement } from 'react'
import { getDataFromTree } from 'react-apollo'
import {
  hydrate as hydrateDOM,
  render as renderDOM,
  unstable_createRoot,
} from 'react-dom'
import Helmet from '../components/Helmet'
import NoSSR, { useSSR } from '../components/NoSSR'

This file has been truncated. show original

renderExtension = (
extensionName: string,
destination: HTMLElement,
props = {}
)

Do you have any suggestion about how to proceed ?

Thanks
Marco

lucas.palhano · April 5, 2024, 3:20pm

Hello MarcoM!

From what I can understand, you are creating a backend service in VTEX IO and within this service you want to show some information at website front regarding the name of an app. Only with this information, I can’t go on details of the solution. However, I believe our documentation on Developing services on VTEX IO can help you in this process. Furthermore, it is also interesting to check the render-runtime documentation, more specifically the useRuntime hook and Block.

If the links above aren’t sufficient to solve your problem, feel free to give more context here on what service your are trying to build, what are the desired triggers and actions. If this involve sensitive information, you can reach us trough ticket.

Lucas Palhano Fonseca | Field Software Engineer