Composables
useSurrealAsyncData
SSR-safe async data fetching with the SurrealDB client.
useSurrealAsyncData
A low-level composable that wraps Nuxt's useAsyncData with automatic SurrealDB client connection. All other SSR-safe composables (useSurrealQuery, useSurrealSelect, etc.) are built on top of this.
Usage
app/pages/index.vue
<script setup lang="ts">
const { data, pending, error, refresh } = await useSurrealAsyncData(
(client) => {
return client.select(new Table('products')).json()
},
)
</script>
Arguments
| Argument | Type | Description |
|---|---|---|
cb | (client: Surreal) => MaybePromise<T> | Callback receiving the connected client |
asyncDataOptions? | AsyncDataOptions | Standard Nuxt useAsyncData options |
Return type
Returns the same shape as useAsyncData:
{
data: Ref<T | undefined>
pending: Ref<boolean>
error: Ref<Error | undefined>
status: Ref<'idle' | 'pending' | 'success' | 'error'>
refresh: () => Promise<void>
execute: () => Promise<void>
clear: () => void
}
Automatic key injection
All SSR-safe composables in this module use Nuxt's keyedComposables feature (available since Nuxt 3.21 / 4.3). A unique, stable key is automatically injected at build time based on the file path and call location — you do not need to provide a key manually.
This means the key is guaranteed to match between SSR and client hydration without any extra work. Under the hood, useAsyncData is still used for caching, deduplication, and payload transfer.
For advanced use cases not covered by the provided composables, you can always combine
useSurreal with Nuxt's useAsyncData directly, make sure to append .json() to the client calls for proper serialization:const { data } = await useAsyncData('my-custom-key', async () => {
const client = await useSurreal()
// ... custom logic
})