I want to create custom routes/Quero criar rotas customizadas

Quero criar rotas dynamicas customizadas que não estão relacionadas com nenhuma informação do master data

nessas rotas buscarei informações de uma api externa e mostrarei para os usuários.
Como posso definir essas rotas sem redirecionar para paginas como usuário não autorizando?

I want to create custom dynamic routes that are not related to any master data information
in these routes I will fetch information from an external api and show it to users

How can I set these routes without redirecting to pages as a non-authorizing user?

Quando você cita rotas dinâmicas, está se referindo ao storefront, no caso paginas customizadas, ou rotas de APIs usando services?

Pelo que entendi você gostaria de criar rotas para consumir APIs externas, nesse caso você precisaria de um service de back-end, esses serviços usam Koa.js, vale dar uma olhada lá também caso queira entender o roteamento dele!

Mas uma dica seria olhar por exemplos parecidos nos repositórios da VTEX no github.

1 Like

No caso seria rotas dinâmicas no front mesmo, já criei um service backend para fazer as consultas na api externa, porém estou com duvida na questão das rotas

Beleza, você tem as rotas no back-end, e agora?
Pelo que entendi você teria que criar um app para o storefront, assim consumindo a API e criando alguma coisa customizada com esses dados.

E para isso uma forma que pode se definir, nas rotas do IO é a seguinte: /path/:param(/:optional-param)

Com isso você pode criar um template, passando o teu app, e no app pegar esse parâmetro e consumir a API. :smiley:

no tema da loja eu coloquei →

"store.custom#app": {
    "path": "/custom/create/:id"
  }

isso deve funcionar então certo ?

1 Like

Olá Victor.

Uma dúvida, usando o seu exemplo, /custom/create/:id deveria voltar o que?
Um JSON? Uma página html?
Deveria chamar algum app que vocês criaram? Deveria mostrar uma página html e a página chama a API Externa?

No caso no meu exemplo chamaria o app customizado com o block app,
este app seria um customizado em react fazendo requisições no app backend VTEX para exibir na tela de acordo com o :id passado

Bom dia Victor!
Deixa eu ver se entendi
O que você quer fazer é que num componente de store, você receba o path que será chamado posteriormente no back-end? E com a resposta do back-end você ira renderizar um componente em react?
Seria isso?

Bom dia, isso mesmo essa integração já existe uma documentação de vocês mas é com o masterdata, onde no app do tema no arquivo routes.json eu coloco ,

"store.custom#app": {
    "path": "/custom/create/:TB_id"
  }

onde o TB é um acronym de algum data entity , mas queria saber se isso funcionaria com um
back-end

Para você fazer para um back-end especifico, você teria que fazer umas mudanças.
Primeiro no seu componente lá no react você vai acessar esse path. E ao acessar, vai mandar, através de um GraphQL para o back-end. Lá no back-end vai receber o path e mandar pro seu client acessar a API usando o path. Com o valor acessado, você vai retornar a resposta para requisição do GraphQL que o front vai estar ouvindo. E de lá você retorna no seu componente da Store.

Seguiria esse fluxo:

1 Like

Entendi Obrigado

Imagina :slight_smile:

1 Like