Servicio con useStrapi

Este es un ejemplo de cómo dar de alta un servicio nuevo para todas las verticales

Esto es para servicios compartidos

ficheros que hay que tocar o crear

Ejemplo basado en expertos

Para dar de alta tu servicio tendrás que crear tu propio fichero

• Directoryinterfaces

  • Directoryapi

    • Directoryshared

      • experts.ts interface para tipar los datos
  • verticals.ts Se da de alta la funcion del fichero que has creado arriba Ej:getExperts
  • Directoryservices

    • Directoryshared

      • experts.ts Aqui es dónde se va a hacer la logica de la petición a la API
  • Directoryconstants

    • Directoryverticals

      • hospitals.ts En cada vertical hay que exportar la funcion para poder usarla
      • Oncology.ts En cada vertical hay que exportar la funcion para poder usarla
      • traumatology.ts En cada vertical hay que exportar la funcion para poder usarla

Pasos a seguir

1. Crear la interfaz

Crear la interfaz con sus types necesarios para utilizarlos en el servicio.

2. Crear llamada del servicio

Estamos usando Strapi para hacer las llamadas a la API, por lo que necesitamos crear un fichero en services/

Cuidado con componentes y zonas dinámicas

Por ahora v5.5.2 de strapi, no permite sacar mediante fields componentes y zonas dinámicas. Pero si que permite sacar elementos concretos dentro de un componente o zona dinámica como se muestra en el ejemplo de abajo. Para ello hay que usar la palabra reservada on y dentro de ella el nombre del componente o zona dinámica.

import type { Expert } from "@/types/experts"; // types creados previamente
import type { LanguageCode } from "@/types/locale";

export const getExperts = async (lang: LanguageCode) => {
  const { find } = useStrapi();
  const { data: response } = await find<Expert>("experts", {
    locale: lang,
    fields: ["id", "name", "slug", "vertical"],
    populate: {
      imageExpert: { fields: ["id", "url", "alternativeText"] },
      multiContents: {
        on: {
          "contents.video": {
            populate: {
              video: { fields: ["id", "url", "alternativeText"] },
              cover: { fields: ["id", "url", "alternativeText"] },
            },
          },
          "contents.pdf": {
            populate: {
              file: { fields: ["id", "url", "alternativeText", "mime"] },
              cover: { fields: ["id", "url", "alternativeText"] },
            },
          },
          "contents.products": {
            populate: {
              product: {
                fields: ["title"],
                populate: {
                  product_image: { fields: ["id", "url", "alternativeText"] },
                },
              },
            },
          },
        },
      },
    },
  });

  return { response }; // Tiene que llamarse response, si no no funcionará
};

3. Declarar el servicio en verticals.ts

En el archivo /interfaces/verticals.ts se debe declarar el servicio que se ha creado en el paso anterior.

Sin params

  import type { ExpertsHomeApi } from "./api/verticals/inspiria/experts";
  import { getExperts } from '@/services/shared/experts'

  interface VerticalsServices {
  home: FunctionService<unknown>;
  // Poner ? si el servicio es opcional y no se usa en todas las verticales
  expert?: FunctionService<unknown>;
  }

  export interface InspiriaVertical extends Verticals {
    services: {
      home: FunctionService<InspiriaHomeApi>,
      expert: FunctionService<ExpertsHomeApi>,
    };
  }

Con params

  import type { ExpertsHomeApi } from "./api/verticals/inspiria/experts";
  import { getExpertsBySlug } from '@/services/shared/experts'

  interface VerticalsServices {
  home: FunctionService<unknown>;
  expert?: ParamsService<unknown>;
  }

  export interface InspiriaVertical extends Verticals {
    services: {
      home: FunctionService<InspiriaHomeApi>,
       expertsBySlug: async (lang, { slug, vertical }: FilterParams) =>
       await getExpertsBySlug(lang, { slug, vertical }),
    };
  }

4. importar el servicio en la vertical correspondiente

import type { InspiriaVertical } from "@/interfaces/verticals";

import { getInspiriaHome } from "@/services/inspiria/home";
import { getExperts } from "@/services/inspiria/expertPage"; // Aquí se importa el servicio

export const INSPIRIA: InspiriaVertical = {
  name: "inspiria",
  subdomain: "inspiria",
  i18nDirectory: "traumatology",
  primaryColor: "#92ffac",
  secondaryColor: "#92ffac",
  productionURL: "https://inspiriadental.com/",
  productionApi: "#",
  developmentApi: "http://localhost:1337",
  favicon: "/inspiria.png",
  verticalLogo: "/inspiria-logo.svg",
  exclusivePages: ["plan-site"],
  services: {
    home: getInspiriaHome,
    experts: getExperts, // Aquí se importa el servicio
  },
  localeDirectory: "inspiria",
  layoutDirectory: "inspiria",
  analyticsCode: "G-LHK4QJG0VT",
};

5. Utilizando servicio sin parámetros en el front

Tienes que hacer esto dentro del <script setup lang="ts"> de tu componente

Sin params

  const data = await useServices<Experts>("experts");
  response.value = data;

  console.log(response.value); // Aquí tendrás los datos de la API

Con params

  const data = await useServices<Experts, 'expertsById'>("experts", { id: 1 });
  response.value = data;

  console.log(response.value); // Aquí tendrás los datos de la API

¿Qué hacer si necesito pasar mas parámetros?

Si necesitas usar parámetros para filtros, como un id o slug, tendrás que utilizar el type ParamsService que se encuentra en interfaces/api/shared/services.ts

export type FunctionService<T> = (
  lang: LanguageCode
) => Promise<{ response: T | T[] }>;

export type ParamsService<
  T,
  P extends Record<string, string | number | boolean> = {
    [field: string]: string | number | boolean;
  }
> = (lang: LanguageCode, params: P) => Promise<{ response: T | null }>;