In this article, I will explain and demonstrate how to access Hypi CLI GitHub - hypi-universe/cli: Hypi CLI from Angular App
Create Angular App
Create an angular app using this tutorial Angular or use a full example from here GitHub - hypi-universe/hypi-cli-angular-example.
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. Add the following dependencies to package.json
"@apollo/client": "^3.3.19",
"apollo-angular": "^2.4.0",
"graphql": "^15.5.0",
Let’s start using Hypi CLI now.
Config
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
Login
The next step is to log in to your Hypi account
On the command line, go to your Angular 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
Init
Use the init command to initialize a new hypi App and Instance in your Angular 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
}
Sync
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.
Generate
Now it is time to generate the Angular 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
1. Find all products /src/graphql/products.graphql
query products($arcql: String!) {
find(type: Product, arcql: $arcql) {
edges {
node {
...ProductFields
}
}
}
}
fragment ProductFields on Product {
hypi {
id
}
title
description
}
2. Add Product /src/graphql/products-mutation.graphql
mutation upsert($values:HypiUpsertInputUnion!) {
upsert(values:$values)
{
id
}
}
3. Get Product by Id /src/graphql/get-product.graphql
query getProduct($id: String!) {
get(type: Product, id: $id) {
...ProductFields
}
}
fragment ProductFields on Product {
hypi {
id
}
title
description
}
4. 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 Angular graphql code so that you can use Hypi APIs within your project.
hypi generate angular
hypi generate -p=angular
hypi generate --platform=angular
After running the command, graphql.ts files get created in the \src\generated folder.
Inside graphql.ts file, you will find services for the query and the mutation to be used inside your angular components.
export class ProductsQueryService extends Apollo.Query<ProductsQuery, ProductsQueryVariables> {
document = ProductsDocument;
constructor(apollo: Apollo.Apollo) {
super(apollo);
}
}
export class UpsertMutationService extends Apollo.Mutation<UpsertMutation, UpsertMutationVariables> {
document = UpsertDocument;
constructor(apollo: Apollo.Apollo) {
super(apollo);
}
}
export class ProductDetailsQueryService extends Apollo.Query<ProductDetailsQuery, ProductDetailsQueryVariables> {
document = ProductDetailsDocument;
constructor(apollo: Apollo.Apollo) {
super(apollo);
}
}
Now you are ready to create your Angular TypeScript application using Hypi APIs!
Using GraphQL hooks
Inside src/app/products folder, add Product Component :products.component.ts file. This file will access the graphql queries and mutations using the created services.
Here is the content of the entire file. You may modify this file to use your own services.
/src/app/products/products.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { ProductsQueryService, UpsertMutationService } from '../../generated/graphql';
@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
loading!: boolean;
products!: Observable<any>;
productForm = new FormGroup({
title: new FormControl(''),
description: new FormControl(''),
price: new FormControl(0),
});
constructor(private productsQueryService: ProductsQueryService,
private upsertMutationService: UpsertMutationService) { }
ngOnInit(): void {
this.getProducts()
}
getProducts(){
this.products = this.productsQueryService
.watch({ arcql: '*' }, { fetchPolicy: 'network-only' })
.valueChanges.pipe(map(result => result.data.find.edges));
}
onSubmit() {
console.warn('hi');
this.upsertMutationService.mutate({
values: {
Product: [
{
title: this.productForm.get('title')?.value,
description: this.productForm.get('description')?.value,
price: this.productForm.get('price')?.value,
}
]
}
}).subscribe(() => {
this.getProducts()
});
}
}
The full complete example is available in GitHub - hypi-universe/hypi-cli-angular-example for the rest of crud operations
After you finish, run the project using ng serve.