Joining refs & adding URLs within hooks

[achou11]

Several of our data types reference other data types. Currently we load each data type separately within hooks, then join them within components (e.g. here). This results in cascades of async code within multiple components.

Several data types also have URLs (e.g. preset -> iconUrl, attachment -> attachmentUrl), which we currently also fetch asynchronously within components. This similarly results in cascades of async code.

Moving all of this inside the mapeo core hooks could greatly simplify logic within components, e.g.

const presetsWithFields: Array<Omit<Preset, 'fieldRef'>, & { field: Field }> = usePresets({ with: 'fieldRef' })
const observations: Array<Observation & { attachments: Array<Observation['attachment'] & { originalUrl: string }> }> = useObservations()

This creates a clear boundary for async code interacting with the API, rather than having multiple places in different components where we are loading data. At some point, for the sake of performance, we can move some of these joins into the backend, so in the meantime moving this within the hooks will make that a smoother transition.