In this article, I will explain and demonstrate how to access Hypi CLI GitHub - hypi-universe/cli: Hypi CLI from React typescript App
Create React Typescript App
You may create a sample React Typescript app using the following command.
npx create-react-app my-app --template typescript
or use ready-made example GitHub - hypi-universe/hypi-cli-react-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.16",
"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 ReactJS 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 ReactJS 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 Reactjs 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 Reactjs graphql code so that you can use Hypi APIs within your project.
hypi generate reactjs
hypi generate -p=reactjs
hypi generate --platform=reactjs
After running the command, graphql.ts files get created in the \src\generated folder.
Inside graphql.ts file, you will find hooks for the query and the mutation to be used inside your typescript components.
export function useProductsQuery(baseOptions: Apollo.QueryHookOptions<ProductsQuery, ProductsQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<ProductsQuery, ProductsQueryVariables>(ProductsDocument, options);
}
export function useUpsertMutation(baseOptions?: Apollo.MutationHookOptions<UpsertMutation, UpsertMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<UpsertMutation, UpsertMutationVariables>(UpsertDocument, options);
}
export function useGetProductQuery(baseOptions: Apollo.QueryHookOptions<GetProductQuery, GetProductQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useQuery<GetProductQuery, GetProductQueryVariables>(GetProductDocument, options);
}
export function useDeleteMutation(baseOptions?: Apollo.MutationHookOptions<DeleteMutation, DeleteMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<DeleteMutation, DeleteMutationVariables>(DeleteDocument, options);
}
Now you are ready to create your React TypeScript application using Hypi APIs!
Using GraphQL hooks
Inside src/components, add Product or your own data type component. Add ProductList.js file. This file will access the graphql queries and mutations using the hooks.
Here is the content of the entire file. You may modify this file to use your own hooks. /src/components/Product/ProductList.js
import React from 'react';
**import { useProductsQuery, useDeleteMutation } from '../../generated/graphql'**
import { Link } from "react-router-dom";
const ProductsList = (props) => {
**const { loading, error, data } = useProductsQuery({
variables: { arcql: '*' },
});**
**const [deleteMutation] = useDeleteMutation()**
if (loading) return <p>loading...</p>;
if (error) return <p>{error}</p>;
const handleRemove = (event, id) => {
deleteMutation({
variables: {
arcql: "hypi.id = '" + id + "'"
}
})
window.location.reload();
}
const productsOutput = data.find.edges.length === 0 ?
<div>
<p>No products found</p>
</div>
: data.find.edges.map((product, index) => {
return (
<div key={product.node.hypi.id}>
<li key={index} >
{product.node.title}
</li>
<button type="button" className={"btn"} onClick={(event) => handleRemove(event, product.node.hypi.id)}>
Remove
</button>
<Link
to={"/products/" + product.node.hypi.id}
className="badge badge-warning"
>
<button type="button" className={"btn"}>
Edit
</button>
</Link>
</div>
)
})
return (
<div>
<Link
to={"/add/"}
className="badge badge-warning"
>
<button className="btn btn-success"> New Product</button>
</Link>
<div className="col-md-6">
<hr />
<h4>Tutorials List</h4>
<ul className="list-group">
{productsOutput}
</ul>
</div>
</div>
)
};
export default ProductsList;
The full complete example is available in GitHub - hypi-universe/hypi-cli-react-example for the rest of crud operations
After you finish, run the project using npm start.