Services/React - app.io.vtex.com

Hola, comunidad.

Necesito su ayuda con un Service de VTEX IO.

Tengo un Service en mi tienda VTEX para consumir la Orders API de VTEX, ya que lo utilizaré desde una custom app en My Account para obtener información de los pedidos.

El servicio está configurado como una ruta privada:

import type { IOContext, InstanceOptions } from '@vtex/api'
import { JanusClient } from '@vtex/api'

export class VtexClient extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, {
      ...options,
      headers: {
        ...options?.headers,
        VtexIdclientAutCookie: context.authToken,
      },
    })
  }

  public async getOrder(orderNumber: string): Promise<OrderDetail> {
    const metric = 'vtex-getOrder'

    const response = await this.http.getRaw<OrderDetail>(
      `/api/oms/pvt/orders/${orderNumber}`,
      { metric }
    )

    return response.data
  }
}

"routes": {
  "OrderService": {
    "path": "/_v/private/order/:orderId",
    "public": false,
    "policies": [
      {
        "effect": "allow",
        "actions": ["GET"],
        "principals": ["*"]
      }
    ]
  }
}

Esto me genera la siguiente URL:

https://app.io.vtex.com/mitienda.appservice/v0/mitienda/test/_v/private/order/:orderId

Desde el frontend (workspace test) intento consumirla con un usuario autenticado usando DevTools:

fetch('/_v/private/order/10000000000-01', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  credentials: 'include',
})
  .then((response) => response.json())
  .then((data) => {
    console.log(data)
  })
  .catch((error) => {
    console.error('Error:', error)
  })

Sin embargo, la petición no devuelve ninguna respuesta; simplemente parece no ocurrir nada.

¿Alguien sabe qué podría estar faltando o qué debería revisar?

Algunas dudas específicas:

  • ¿Las rutas /_v/private pueden consumirse directamente desde el frontend usando fetch y credentials: 'include'?

  • ¿Es necesario configurar alguna política o permiso adicional para que un usuario autenticado pueda acceder a la ruta?

  • ¿Debo consumir la URL app.io.vtex.com directamente en lugar de /_v/private/...?

  • ¿Existe algún requisito adicional para que context.authToken esté disponible y el JanusClient pueda consumir correctamente la Orders API?

¡Muchas gracias!

Saludos.

Hola Leonard (@developer-vtex-01)!

Me parece que las rutas /_v/private/ están pensadas para comunicación server-to-server. Cuando haces fetch('/_v/private/order/...') desde el frontend, el navegador intenta resolver esa ruta contra el dominio de la tienda ({workspace}--{account}.myvtex.com), no contra app.io.vtex.com. Y aunque apuntes directamente a app.io.vtex.com, el credentials: 'include' solo envía el cookie de sesión del usuario de la tienda, no el token de app que VTEX IO exige para rutas privadas. Por eso la petición “no hace nada”: se bloquea en el CORS o retorna un 401 silencioso.

Tonces, la solución me parece ser cambiar la ruta a pública en el service.json y deja que el service haga la llamada autenticada usando context.storeUserAuthToken en vez de context.authToken. Y no te olvides del outbound-access en el manifest.json.

Hola André.

Gracias por la aclaración.

También este hilo me fue de utilidad:

Finalmente, utilicé la GraphQL API del VTEX IO service app vtex.orders-graphql@0.119.2, y con ello pude obtener los datos que necesitaba mostrar en el Storefront.

¡Saludos!