A complete Vuejs composition api example to use hypi cli

In this tutorial, We will explain and demonstrate how to use Hypi CLI inside Vuejs 3 typescript app with composition api and apollo Introduction | Vue Apollo

Create Vue App
You can create a vuejs version 3 typescript project using vite

OR you can use the ready-made app from here

Getting Started with Hypi cli
Install Hypi cli
npm install -g @hypi/cli
In this example, we will use the apollo client as the graphql client and the vue composition api

 "@apollo/client": "^3.3.21",
    "@vue/apollo-composable": "^4.0.0-alpha.13",
    "@vue/apollo-option": "^4.0.0-alpha.13",
    "@vue/composition-api": "^1.0.0-rc.13",
    "graphql": "^15.5.1",
    "graphql-tag": "^2.12.5",

OR install them using the command line

npm install --save @vue/apollo-composable
npm install @vue/composition-api @vue/apollo-option
npm install --save graphql graphql-tag @apollo/client

Let’s start using Hypi CLI now.

This command helps you configure the CLI. If you are using the cloud version of Hypi then you don’t need to use this but if you’re on-premise then it helps you set the Hypi API URL that the CLI will send API requests to

$ hypi config https://hypi.on-premise-domain.com
$ hypi config -a=https://hypi.on-premise-domain.com
$ hypi config --api_domain=https://hypi.on-premise-domain.com

Make sure to login again after each time you change your config through the Config command

The next step is to log in to your Hypi account
On the command line, go to your Vuejs application folder. Login to your Hypi account using hypi login command.
hypi login Login with a user name and password
hypi login -d Login with organization namespace and Authorization token from here Hypi.Tink
After successful login, the user config file will be placed in ~/.config/hypi/config.json . In case of Windows, the file will be created in \Users\user\AppData\Local

Use the init command to initialize a new hypi App and Instance in your vuejs project folder.
hypi init
.hypi folder will be created with app.yaml, instance.yaml and schema.graphql files which contains information about App, Instance and the graphql schema

Make sure to write your graphql schema inside the schema.graphql file

In our example we will use the following schema
Update /.hypi/schema.graphql with the following schema

type Product {
    title: String!
    description: String!
    price: Float

The next step is to sync your local schema and get the full schema.
run the following command
hypi sync
after successful sync, generated-schema.graphql file gets generated in the .hypi folder that has full hypi schema.

Now it is time to generate the Vuejs graphql code
The first step is to create your graphql queries and mutations inside /src/graphql

We will add queries for all the crud operations

Find all products /src/graphql/products.graphql

query products($arcql: String!) {
    find(type: Product, arcql: $arcql) {
        edges {
            node {

fragment ProductFields on Product {
   hypi {

Add Product /src/graphql/products-mutation.graphql

mutation upsert($values:HypiUpsertInputUnion!) {

Get Product by Id /src/graphql/get-product.graphql

query getProduct($id: String!) {
    get(type: Product, id: $id) {

fragment ProductFields on Product {
   hypi {

Delete Product /src/graphql/delete-product.graphql

mutation delete(
$arcql: String!
$clearArrayReferences: Boolean = false) {
  delete(type: Product, arcql: $arcql, clearArrayReferences: $clearArrayReferences)

Now after you created the graphql queries and mutations, use the command generate to generate the Vuejs graphql code so that you can use Hypi APIs within your project.

 hypi generate vuejs
 hypi generate -p=vuejs
 hypi generate --platform=vuejs

You will be asked whether to generate code for smart queries or composition API. Choose composition api for this tutorial
After running the command, graphql.ts files get created in the \src\generated folder.

Inside graphql.ts file, you will find the vuejs composition api queries to be used inside your vue components

 * @example
 * const { mutate, loading, error, onDone } = useDeleteMutation({
 *   variables: {
 *     arcql: // value for 'arcql'
 *     clearArrayReferences: // value for 'clearArrayReferences'
 *   },
 * });
export function useDeleteMutation(options: VueApolloComposable.UseMutationOptions<DeleteMutation, DeleteMutationVariables> | ReactiveFunction<VueApolloComposable.UseMutationOptions<DeleteMutation, DeleteMutationVariables>>) {
  return VueApolloComposable.useMutation<DeleteMutation, DeleteMutationVariables>(DeleteDocument, options);
 * @example
 * const { result, loading, error } = useGetProductQuery({
 *   id: // value for 'id'
 * });
export function useGetProductQuery(variables: GetProductQueryVariables | VueCompositionApi.Ref<GetProductQueryVariables> | ReactiveFunction<GetProductQueryVariables>, options: VueApolloComposable.UseQueryOptions<GetProductQuery, GetProductQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<GetProductQuery, GetProductQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<GetProductQuery, GetProductQueryVariables>> = {}) {
  return VueApolloComposable.useQuery<GetProductQuery, GetProductQueryVariables>(GetProductDocument, variables, options);
 * @example
 * const { mutate, loading, error, onDone } = useUpdateProductsMutation({
 *   variables: {
 *     values: // value for 'values'
 *   },
 * });
export function useUpdateProductsMutation(options: VueApolloComposable.UseMutationOptions<UpdateProductsMutation, UpdateProductsMutationVariables> | ReactiveFunction<VueApolloComposable.UseMutationOptions<UpdateProductsMutation, UpdateProductsMutationVariables>>) {
  return VueApolloComposable.useMutation<UpdateProductsMutation, UpdateProductsMutationVariables>(UpdateProductsDocument, options);
 * @example
 * const { result, loading, error } = useProductsQuery({
 *   arcql: // value for 'arcql'
 * });
export function useProductsQuery(variables: ProductsQueryVariables | VueCompositionApi.Ref<ProductsQueryVariables> | ReactiveFunction<ProductsQueryVariables>, options: VueApolloComposable.UseQueryOptions<ProductsQuery, ProductsQueryVariables> | VueCompositionApi.Ref<VueApolloComposable.UseQueryOptions<ProductsQuery, ProductsQueryVariables>> | ReactiveFunction<VueApolloComposable.UseQueryOptions<ProductsQuery, ProductsQueryVariables>> = {}) {
  return VueApolloComposable.useQuery<ProductsQuery, ProductsQueryVariables>(ProductsDocument, variables, options);

Now you are ready to create your Vuejs TypeScript application using Hypi APIs!
Using Vuejs composition api

Inside src/views, Add Products.vue file. This file will access the generated graphql composition api queries .

Here is the content of the entire file. You may modify this file to use your own hooks. /src/views/Products.vue

    <div class="row mb-3">
      <div class="col-sm-2">
        <router-link :to="{ name: 'AddProduct' }" class="btn btn-primary"
          >Add Product</router-link
    <div v-if="loading">
      <div class="alert alert-info" role="alert">Loading...</div>
    <div v-if="error">
      <div class="alert alert-info" role="alert">{error}</div>
    <table v-else class="table table-hover">
          <td colspan="2">Actions</td>

        <tr v-for="product in products" :key="product.node.hypi.id">
          <td>{{ product.node.title }}</td>
          <td>{{ product.node.description }}</td>
          <td>{{ product.node.price }}</td>
                name: 'EditProduct',
                params: { id: product.node.hypi.id },
              class="btn btn-success"
              class="btn btn-danger btn-sm"
                  arcql: `hypi.id = '${product.node.hypi.id}'`,

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useResult } from "@vue/apollo-composable";
import { useRouter, useRoute } from "vue-router";

import { useProductsQuery, useDeleteMutation } from "../generated/graphql";
export default defineComponent({
  setup() {
    let products = ref();
    const router = useRouter();
    const route = useRoute();

    const { result, loading, error } = useProductsQuery({
      arcql: "*",
    const {
      mutate: deleteProduct,
      loading: d_loading,
      error: d_error,
    } = useDeleteMutation({
      variables: {
        arcql: "",

    products = useResult(result, null, (data) => data?.find.edges);

    onDone((result) => {
      router.push({ name: "Products" });

    return {
      loading: loading || d_loading,
      error: error || d_error,

The full complete example is available here for the rest of crud operations

After you finish, run the project using npm run serve.