Vue 3

Composition API composables using ref, watch, computed. Input is a getter () => value. Returns Ref<T> properties.

Setup

toml

# metaxy.config.toml
[output]
vue = "src/lib/rpc.vue.ts"

or via CLI

metaxy generate --vue-output src/lib/rpc.vue.ts

useQuery

import { useQuery } from './rpc.vue';
import { rpc } from './client';
import { ref } from 'vue';

const page = ref(1);

// Getter input — refetches when page.value changes
const users = useQuery(rpc, 'list_users', () => page.value, {
  enabled: () => page.value > 0,
  refetchInterval: 30000,
});

// Access reactive refs
users.data.value       // T | undefined
users.error.value      // RpcError | undefined
users.isLoading.value  // boolean
users.isSuccess.value  // ComputedRef<boolean>
users.refetch()        // manual refetch

useMutation

import { useMutation } from './rpc.vue';

const create = useMutation(rpc, 'create_user', {
  onSuccess: (data) => console.log('Created:', data),
  onError: (err) => console.error(err),
});

// Fire-and-forget
create.mutate({ name: 'Alice' });

// Await the result
const user = await create.mutateAsync({ name: 'Alice' });

// Access reactive state
create.data.value       // T | undefined
create.error.value      // RpcError | undefined
create.isLoading.value  // boolean
create.isSuccess.value  // boolean (ComputedRef)
create.isError.value    // boolean (ComputedRef)
create.reset()          // clear state