Composables
useConvex
Access the raw Convex client for advanced patterns.
Get the raw Convex client for advanced usage patterns.
Usage
app/components/Advanced.vue
<script setup lang="ts">
import { api } from '#convex/api'
const client = useConvex()
// Direct client access for advanced patterns
const result = await client.query(api.tasks.get, { id: 'abc123' })
</script>
Return Value
Returns the ConvexClient instance.
When to Use
The other composables (useConvexQuery, useConvexMutation, useConvexAction) cover most use cases. Use useConvex when you need:
- Direct client access for custom patterns
- One-off queries without reactive subscriptions
- Integration with other libraries
Client Methods
| Method | Description |
|---|---|
client.query() | Execute a query once (not reactive) |
client.mutation() | Execute a mutation |
client.action() | Execute an action |
client.onUpdate() | Subscribe to query updates |
Example: One-off Query
Fetch data once without subscribing to updates:
app/pages/report.vue
<script setup lang="ts">
import { api } from '#convex/api'
const client = useConvex()
const report = ref(null)
async function generateReport() {
// Single fetch, no subscription
report.value = await client.query(api.reports.generate, { month: 'december' })
}
</script>
Example: Custom Subscription
Create a custom subscription pattern:
app/composables/useCustomSubscription.ts
export function useCustomSubscription() {
const client = useConvex()
const data = ref(null)
let unsubscribe: (() => void) | null = null
function subscribe(query: any, args: any) {
unsubscribe = client.onUpdate(query, args, (result) => {
data.value = result
})
}
onUnmounted(() => {
unsubscribe?.()
})
return { data, subscribe }
}
For most use cases, prefer
useConvexQuery which handles subscriptions, loading states, and cleanup automatically.