Galaxis Vue
Vue bindings for Galaxis.
⚠ The API is fairly basic, because I have a very little experience with Vue.
Installation
yarn add @galaxis/vue
This will also install and expose API of Galaxis Core.
The library is compiled to modern JS, but it should work in all reasonable browsers with the help of properly configured Babel.
Your client environment has to have AbortController. You might need to polyfill it.
You also need a version of Vue that supports Composition API.
Public API
⚠ Anything that is not documented here is not considered a part of public API and may change at any time.
useClientProvider()
useClientProvider() is used to configure and provide a Client instance for the rest of the application.
<template>
<rest-of-the-app></rest-of-the-app>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { Client, useClientProvider } from '@galaxis/vue';
import RestOfTheApp from './RestOfTheApp.vue';
export default defineComponent({
components: { RestOfTheApp },
props: {
client: {
type: Client,
required: true,
},
},
setup(props) {
useClientProvider({ client: props.client });
},
});
</script>Arguments
ClientProviderOptions
| Name | Type | Description | Required |
|---|---|---|---|
| client | Client |
A Client instance that will be used by the application. |
Yes |
| preventOnHydrateCompleteCall | boolean |
By default, client.onHydrateComplete() will be called in the onMounted lifecycle hook. It should be fine in most cases, but you can use this option as an escape hatch and call client.onHydrateComplete() manually. |
No |
useClient()
useClient is used to retrieve the Client instance that was passed to the Provider. You can then use it to execute queries and mutations manually, access cache, etc.
import { defineComponent } from 'vue';
import { useClient } from '@galaxis/vue';
export default defineComponent({
setup() {
const client = useClient();
return { client };
},
});
useQuery()
useQuery is a thin wrapper for ObservableQuery.
import { defineComponent, ref } from 'vue';
import { useQuery } from '@galaxis/vue';
import { userQuery } from '../requests/user';
export default defineComponent({
setup() {
const currentId = ref(1);
const { loading, data, refetch } = useQuery(() =>
userQuery({ resource: { pathParams: { id: currentId.value } } }),
);
return { loading, data, currentId, refetch };
},
methods: {
iterateUser() {
this.currentId = this.currentId + 1;
},
},
});Arguments
| Name | Type | Description | Required |
|---|---|---|---|
| query | () => Query |
A query to maintain. | No |
Return value
ObservableQueryState & {refetch: observableQuery.refetch}
useMutation()
useMutation is a thin wrapper for ObservableMutation.
import { defineComponent, ref } from 'vue';
import { useMutation } from '@galaxis/vue';
import { userQuery } from '../requests/user';
export default defineComponent({
setup() {
const currentId = ref(1);
const [deleteUser, { loading, data, reset }] = useMutation(() =>
deleteUserMutation({ resource: { pathParams: { id: currentId.value } } }),
);
return { deleteUser, loading, data, currentId, reset };
},
methods: {
iterateUser() {
this.currentId = this.currentId + 1;
},
},
});Arguments
| Name | Type | Description | Required |
|---|---|---|---|
| mutation | () => Mutation |
A mutation to maintain. | No |
Return value
| Name | Type | Description |
|---|---|---|
| execute | (mutation?: Mutation) => Promise<TData> |
A function for mutation execution. |
| state | ObservableMutationState & {reset: observableMutation.reset} |
Mutation state and reset function. |