Cómo usar los servicios

Este documento explica cómo definir y usar estructuras reutilizables para poblar datos al consumir la API de Strapi desde Nuxt 3.

---

¿Qué son las estructuras?

Las estructuras son objetos TypeScript que definen qué campos y relaciones deben ser solicitados en las consultas a Strapi, para mantener consistencia y evitar repetir el mismo código. Estas estructuras se definen una vez y se reutilizan en diferentes servicios, lo que facilita la gestión de datos y mejora la mantenibilidad del código.

Dónde definir las estructuras

Estas estructuras se definen en el archivo src/constants/api-structures/<nombreArchivo.ts>. Aquí puedes crear objetos que representen las relaciones y campos que necesitas para tus consultas a Strapi.

Ejemplo de dos estructuras comunes:

export const SEO = {
  fields: ["title", "description", "author"],
  populate: {
    image: { fields: ["url", "alternativeText"] },
  },
};

export const PRODUCT_STRUCTURE = {
  fields: ["id", "title", "type", "SKU", "slug", "stripeID"],
  populate: {
    image: {
      fields: ["id", "url", "alternativeText"],
    },
    price: {
      fields: ["price", "discountPercentage", "template"],
    },
    header: {
      fields: ["id", "modality"],
    },
    experts: {
      fields: ["id", "name"],
    },
    categories: {
      fields: ["id", "name"],
    },
    limitedPlaces: {
      fields: ["id", "totalPlaces", "soldPlaces"],
    },
    cardTags: {
      fields: ["id", "rightTag", "leftTag"],
    },
    partners: {
      fields: ["id"],
      populate: {
        image: { fields: ["url", "alternativeText"] },
      },
    },
    seo: SEO,
  },
};

---

Cómo usar estas estructuras

Primero, debes importar la estructura que necesitas en el archivo del servicio. Por ejemplo, si tienes una estructura para productos:

import {
  PRODUCT_RELATION_STRUCTURE,
  VIDEO_AND_IMAGE_STRUCTURE,
} from "@/constants/api-structures/commonStructure";

Luego, haces la consulta con useStrapi() así:

export const getMentalHealthHomePage = async (lang: LanguageCode) => {
  try {
    const { findOne } = useStrapi();
    const { data: response } = await findOne<MentalHealthHomeApi>(
      "salud-mental-home",
      {
        locale: lang,
        populate: {
          carouselMedia: {
            fields: ["id", "description", "link"],
            ...CAROUSEL_VIDEO_AND_IMAGE_STRUCTURE,
          },
          partners: PARTNERS_RELATION_STRUCTURE,
          series: SERIES_RELATION_STRUCTURE,
          courses: PRODUCT_STRUCTURE,
          nextEvents: {
            fields: ["id", "title", "date", "description", "link"],
            populate: {
              partners: PARTNERS_RELATION_STRUCTURE,
              image: {
                fields: ["id", "url", "alternativeText"],
              },
            },
          },
          seo: SEO,
        },
      }
    );

    return response;
  } catch (error) {
    return null;
  }
};

El replace y toLowerCase() son para asegurar que el nombre del servicio sea compatible con la URL de Strapi. Por ejemplo al usar el nombre del vertical Salud Mental se convierte en “salud-mental-master-page”.

Importante el try catch

Usar try catch en todos los servicios y retornar null en caso de error es crucial para manejar excepciones y evitar que la aplicación se rompa si Strapi no responde o hay un error en la consulta. Ya que lo que hará el servicio es mostrar los datos en español si no hay datos en el idioma seleccionado.

---

¿Por qué usar estructuras?

• Reutilización: Define una vez qué datos necesitas y úsalo en todas las consultas.
• Mantenibilidad: Si necesitas agregar o modificar campos, solo cambias la estructura.
• Evita errores: No tienes que escribir manualmente campos repetidos en múltiples lugares.

---