Use API in frontend
supastarter uses oRPC combined with Tanstack Vue Query for calling API endpoints from the frontend.
The oRPC client is provided via Nuxt plugins and is available as $orpcClient through useNuxtApp().
Using the oRPC client with Vue Query
For data fetching with caching, loading states, and error handling, use Tanstack Vue Query's useQuery composable together with the oRPC client:
<script setup lang="ts">
const { $orpcClient } = useNuxtApp();
const { data: purchases } = useQuery({
queryKey: ["purchases"],
queryFn: () => $orpcClient.payments.purchases(),
});
</script>
<template>
<div>{{ purchases }}</div>
</template>Using mutations
For creating, updating, or deleting data, use the useMutation composable:
<script setup lang="ts">
const { $orpcClient } = useNuxtApp();
const queryClient = useQueryClient();
const { mutate: createCheckout } = useMutation({
mutationFn: (input: { planId: string; type: string }) =>
$orpcClient.payments.createCheckoutLink(input),
onSuccess: () => {
// Invalidate related queries after mutation
queryClient.invalidateQueries({ queryKey: ["purchases"] });
},
});
</script>
<template>
<button @click="createCheckout({ planId: 'pro', type: 'subscription' })">
Subscribe
</button>
</template>Using the oRPC client directly
You can also call the oRPC client directly without Vue Query, for example in composables or utility functions:
<script setup lang="ts">
const { $orpcClient } = useNuxtApp();
onMounted(async () => {
const result = await $orpcClient.payments.purchases();
console.log(result);
});
</script>
<template>
<div />
</template>Server-side rendering
On the server side, the oRPC client calls the router directly without making HTTP requests. On the client side, it uses RPC transport to call /api/rpc endpoints. This is handled automatically by the Nuxt plugins in apps/saas/plugins/.