MFE Integration

useReferenceData

Composable Vue 3 per caricare dati di riferimento (lookup tables, dropdown) da PostgREST in un MFE — stato reattivo loading/error e cache locale tra le invocazioni di fetch.

Cos'è

useReferenceData è un composable Vue 3 per il caricamento di dati di riferimento (tabelle lookup, dropdown, select remote): tipi anagrafica, categorie, stati, listini, ecc. Estrae il pattern ricorrente di istanziare un service PostgREST nel componente solo per recuperare una lista statica.

Internamente usa l'http ottenuto da useMfeContext() e chiama GET /rest/{tableName} con un ordinamento default applicato.

Signature

function useReferenceData<T>(
  tableName: string,
  defaultOrder?: string,
): {
  items: Readonly<Ref<T[]>>
  loading: Readonly<Ref<boolean>>
  error: Readonly<Ref<string | null>>
  fetch: (params?: Record<string, string>) => Promise<T[]>
}

Parametri

Parametro	Tipo	Default	Descrizione
`tableName`	`string`	—	Nome della tabella/vista PostgREST (es. `'tipianagrafica'`, `'v_categorie_attive'`)
`defaultOrder`	`string`	`'descrizione.asc'`	Ordinamento default applicato a ogni `fetch`

Stato ritornato

Campo	Tipo	Descrizione
`items`	`Readonly<Ref<T[]>>`	Risultato della lookup (vuoto fino al primo `fetch`)
`loading`	`Readonly<Ref<boolean>>`	`true` durante la chiamata HTTP
`error`	`Readonly<Ref<string \| null>>`	Messaggio di errore o `null`
`fetch(params?)`	`(params?) => Promise<T[]>`	Esegue la chiamata; ritorna l'array (anche tramite `items`)

I tre stati sono esposti readonly per impedire mutazioni esterne accidentali — modificali solo tramite fetch.

Comportamento di `fetch`

Imposta loading = true, resetta error a null.
Costruisce la querystring: order={defaultOrder} + parametri opzionali (sovrascrivibili).
GET /rest/{tableName}?{queryString} tramite http della shell.
Su successo: aggiorna items.value e lo ritorna.
Su errore: log console.warn, popola error.value, ritorna [].
Imposta loading = false in finally.

Il composable chiama /rest/{tableName} (non /{tableName}). Questo presume che la shell host monti PostgREST sotto il prefisso /rest. Se il tuo gateway usa una baseURL diversa, configurala nell'MFEHttpClient della shell oppure usa direttamente PostgrestMfeService.

<script setup lang="ts">
import { onMounted } from 'vue'
import { useReferenceData } from '@pzeta/postgrest/mfe'

interface TipoAnagrafica {
  codtipoanagrafica: string
  descrizione: string
}

const tipoAnagrafica = ref<string>('')
const { items: tipi, loading, error, fetch } = useReferenceData<TipoAnagrafica>(
  'tipianagrafica',
  'descrizione.asc',
)

onMounted(() => fetch())
</script>

<template>
  <label>Tipo anagrafica</label>
  <select v-model="tipoAnagrafica" :disabled="loading">
    <option v-for="t in tipi" :key="t.codtipoanagrafica" :value="t.codtipoanagrafica">
      {{ t.descrizione }}
    </option>
  </select>
  <p v-if="error" class="text-red-600">{{ error }}</p>
</template>

Esempio: filtri custom su fetch

fetch accetta parametri PostgREST aggiuntivi che si sommano all'ordinamento default:

const { items, fetch } = useReferenceData<Categoria>('categorie')

// Solo categorie attive, ordinate per descrizione (default)
await fetch({ flagattivo: 'eq.true' })

// Refresh con filtro diverso
await fetch({ codgruppo: 'eq.SRV' })

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useReferenceData } from '@pzeta/postgrest/mfe'

const idgruppo = ref<number | null>(null)
const idsottogruppo = ref<number | null>(null)

const gruppi = useReferenceData<Gruppo>('gruppi')
const sottogruppi = useReferenceData<Sottogruppo>('sottogruppi')

await gruppi.fetch()

watch(idgruppo, async (gid) => {
  idsottogruppo.value = null
  if (gid != null) {
    await sottogruppi.fetch({ idgruppo: `eq.${gid}` })
  }
})
</script>

Quando preferire alternative

Caso	Usa
Lookup statico riusato in più componenti	`useReferenceData` + provider pattern (`provide`/`inject`)
Lookup con CRUD completo (anche modifica)	`useCrudResource`
Lista paginata	`usePostgrestPagination` + service
Cache cross-componente persistente	Pinia store + `useReferenceData` come fetcher

useReferenceData mantiene items reattivo nello scope del composable. Per condividere lo stato tra più componenti senza ri-fetchare, wrappalo in un Pinia store o usa il pattern singleton tramite provide/inject.

Tipi correlati

useCrudResource — alternativa con create/update/delete
PostgrestMfeService — usabile direttamente per casi complessi
sanitizePostgrestSearch — sanitizzazione input per filtri ilike

usePostgrestPagination

Composable Vue 3 per gestire lo stato di paginazione PostgREST in un MFE — page/pageSize reattivi, offset calcolato, navigazione e reset.