🐛 Agregar función para peticiones en cliente exclusivamente

components/Galeria/index.vue

@@ -14,7 +14,7 @@ import type {
   PersonajeProcesado,
 } from '~/tipos';
 import { usarArchivo } from '~/cerebros/archivo';
-import { definirDimsImagen } from '~/utilidades/ayudas';
+import { definirDimsImagen, peticion } from '~/utilidades/ayudas';
 import { datosGeneralesColeccion, datosObrasGaleria } from '~/utilidades/queries';
 
 interface Props {
@@ -177,8 +177,7 @@ function cargarPagina(pagina: number) {
   if (pagina <= numeroPaginas.value) {
     cargando.value = true;
 
-    obtenerDatos(
-      `obras-${datos.value?.id}${pagina}`,
+    peticion(
       datosObrasGaleria(props.coleccion, props.nombreCampo, props.slug, props.enTablaRelacional, pagina, esId)
     ).then((respuesta) => {
       obras.value = [...obras.value, ...limpiarDatos(respuesta)];

components/Vista/Mapa/Cajon.vue

@@ -11,13 +11,16 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const datosColeccion: Ref<ObraGaleria[] | undefined> = ref();
+const datosColeccion: Ref<ObraGaleria[]> = ref([]);
 const query = computed(() => {
   const nombreCampo = props.coleccion === 'paises' ? 'pais' : 'ubicacion';
   return datosObrasGaleria(props.coleccion, nombreCampo, props.datos.id, false, 1, true, 10);
 });
 
-const { data, pending, refresh } = obtenerDatosAsinc(`obras-cajon-${props.coleccion}`, query.value);
+const { data, pending, refresh } = obtenerDatosAsinc<{ obras: ObraGaleria[] }>(
+  `obras-cajon-${props.coleccion}`,
+  query.value
+);
 
 watch(
   () => props.datos.id,
@@ -29,6 +32,7 @@ watch(
 );
 
 watch(data, (respuesta) => {
+  if (!respuesta) return;
   datosColeccion.value = respuesta.obras;
 });
 </script>

components/Vista/index.vue

@@ -15,6 +15,7 @@ import type {
   Ubicacion,
   Vistas,
 } from '~/tipos';
+import { peticion } from '~/utilidades/ayudas';
 import { indiceColeccion } from '~/utilidades/queries';
 
 interface Props {
@@ -155,7 +156,7 @@ async function cambiarDatosUbicacion(tipoLugar: TiposLugares) {
   } else {
     cargando.value = true;
 
-    const respuesta = await obtenerDatos(`indice-${tipoLugar}`, indiceColeccion(tipoLugar));
+    const respuesta = await peticion(indiceColeccion(tipoLugar));
     const datosLimpios = agregarEnlacesYTexto(respuesta[tipoLugar]);
 
     if (tipoLugar === 'ubicaciones') {

paginas/categorias[[numero]]/index.vue

@@ -3,11 +3,9 @@ import { convertirEscala, escalaColores } from '@enflujo/alquimia';
 import type { Categoria } from '~/tipos';
 import { usarArchivo } from '~/cerebros/archivo';
 import { usarGeneral } from '~/cerebros/general';
-import { gql, obtenerVariablesCSS } from '~/utilidades/ayudas';
+import { gql, obtenerVariablesCSS, peticion } from '~/utilidades/ayudas';
 
 const cerebroGeneral = usarGeneral();
-const ruta = useRoute();
-const enrutador = useRouter();
 const cerebroArchivo = usarArchivo();
 const pending: Ref<boolean> = ref(true);
 const titulo = computed(() => {
@@ -24,46 +22,6 @@ let ejeX: (valor: number) => number;
 let colorMin;
 let colorMax;
 
-if (ruta.query.id) {
-  const { id } = ruta.query;
-
-  const BuscarCategoria = gql`
-      query {
-        categorias1(filter: { id: { _eq: ${id} } }) {
-          slug
-        }
-        categorias2(filter: { id: { _eq: ${id} } }) {
-          slug
-        }
-        categorias3(filter: { id: { _eq: ${id} } }) {
-          slug
-        }
-        categorias4(filter: { id: { _eq: ${id} } }) {
-          slug
-        }
-        categorias5(filter: { id: { _eq: ${id} } }) {
-          slug
-        }
-        categorias6(filter: { id: { _eq: ${id} } }) {
-          slug
-        }
-      }
-    `;
-
-  const busqueda = await obtenerDatos(`buscarCategoriaId${id}`, BuscarCategoria);
-
-  for (let i = 1; i < 7; i++) {
-    const coleccion = `categorias${i}`;
-    if (busqueda[coleccion].length) {
-      const { slug } = busqueda[coleccion][0];
-
-      enrutador.push({
-        path: `/${coleccion}/${slug}`,
-      });
-    }
-  }
-}
-
 definePageMeta({ layout: 'archivo', keepalive: true });
 
 if (!cerebroArchivo.datosCategorias) {
@@ -132,7 +90,7 @@ function ordenar(grupo: Categoria[]) {
   }
 }
 
-function clicSubCategorias(nivel: number, datosCategoria: Categoria) {
+async function clicSubCategorias(nivel: number, datosCategoria: Categoria) {
   const nivel1 = `categorias${nivel}`;
   const nivel2 = `categorias${nivel + 1}`;
   const nivel3 = nivel + 2 <= 6 ? `categorias${nivel + 2}` : null;
@@ -171,7 +129,7 @@ function clicSubCategorias(nivel: number, datosCategoria: Categoria) {
   `;
 
   // No usamos async/await ya que en vue3 con <script setup> solo podemos crear 1 función async.
-  obtenerDatos(`subcategorias${nivel}${datosCategoria.id}`, Subcategoria).then((respuesta) => {
+  peticion(Subcategoria).then((respuesta) => {
     const datosSubCategoria = respuesta[`${nivel1}_by_id`][nivel2];
 
     if (cerebroArchivo.vistaActual !== 'abc') {

paginas/obras/[registro].vue

@@ -12,7 +12,7 @@ import type {
   TiposCampos,
 } from '~/tipos';
 import type { BaseRegistro } from '~/tipos/bases';
-import { definirDimsImagen, gql } from '~/utilidades/ayudas';
+import { definirDimsImagen, gql, peticion } from '~/utilidades/ayudas';
 
 const cerebroGeneral = usarGeneral();
 
@@ -213,10 +213,10 @@ async function buscarRelacionadas(ultimaCategoria: { campo: string; slug: string
     }
     `;
 
-  const { obras } = (await obtenerDatos(`relacionadas${ruta.params.registro}`, Relacionadas)) as { obras: Obra[] };
+  const respuesta = await peticion<{ obras: Obra[] }>(Relacionadas);
 
-  if (obras) {
-    relacionadas.value = obras.map(definirDimsImagen) as ObraGaleria[];
+  if (respuesta.obras) {
+    relacionadas.value = respuesta.obras.map(definirDimsImagen) as ObraGaleria[];
   }
 }
 

paginas/obras/index.vue

@@ -1,6 +1,10 @@
 <script setup lang="ts">
 import { gql } from '~/utilidades/ayudas';
 
+interface Esquema {
+  obras_aggregated: { count: { id: number } }[];
+}
+
 const total = ref(0);
 const Obras = gql`
   query {
@@ -12,7 +16,7 @@ const Obras = gql`
   }
 `;
 
-const { obras_aggregated } = await obtenerDatos('obras', Obras);
+const { obras_aggregated } = await obtenerDatos<Esquema>('obras', Obras);
 
 total.value = obras_aggregated[0].count.id;
 

utilidades/ayudas.ts

@@ -162,3 +162,11 @@ export function definirDimsImagen(obra: Obra): ObraGaleria | undefined {
 
   return obra as ObraGaleria;
 }
+
+export function peticion<Esquema>(query: string, sistema = false) {
+  return $fetch(`${apiBase}/graphql${sistema ? '/system' : ''}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ query }),
+  }).then((res: any) => res.data as Esquema);
+}