Values
Storage and retrieval of values are available via:
useNilStoreValues
To store values with Nillion, you pass in options
into the values
with a name
and value
. Ensure you have it typed to NadaValue. You have the option of choosing the type of NadaValue you would like to use.
You may also use this same hook to update a value that has been stored. See this example.
examples-nextjs/app/components/store-values.tsx
"use client";
import { useNilStoreValues } from "@nillion/client-react-hooks";
import { NadaValue } from "@nillion/client-vms";
import type { FC } from "react";
export const StoreValues: FC = () => {
const mutation = useNilStoreValues();
let id = "";
if (mutation.isSuccess) {
id = mutation.data;
} else if (mutation.isError) {
id = mutation.error.message;
}
const options = {
values: [
{ name: "foo", value: NadaValue.new_secret_integer("42") },
{ name: "bar", value: NadaValue.new_public_integer("23") },
{
name: "baz",
value: NadaValue.new_secret_blob(Uint8Array.from([1, 2, 3])),
},
],
ttl: 1,
};
const stringifiedOptions = JSON.stringify({
...options,
values: options.values.map(({ name, value }) => ({
name,
value: {
type: value.type_name(),
value:
value.type_name() === "SecretBlob"
? value.to_byte_array()
: value.to_integer(),
},
})),
});
function handleClick(): void {
mutation.execute(options);
}
return (
<div>
<h2>Store Values</h2>
<ol>
<li>Status: {mutation.status}</li>
<li>Options: {stringifiedOptions}</li>
<li>Store Id: {id}</li>
</ol>
<button type="button" onClick={handleClick}>
Execute
</button>
</div>
);
};
useNilRetrieveValues
Retrieving only requires one argument: id
. This id
comes from a previous stored value (i.e after you call useNilStoreValues
).
// i.e. 31d8ab8d-dced-494b-99cc-bd34f1d80b26
const options = { id };
examples-nextjs/app/components/retrieve-values.tsx
"use client";
import { useNilRetrieveValues } from "@nillion/client-react-hooks";
import { Uuid } from "@nillion/client-vms";
import { bytesToHex } from "@noble/hashes/utils";
import { type ChangeEvent, type FC, useState } from "react";
export const RetrieveValues: FC = () => {
const mutation = useNilRetrieveValues({
staleAfterSeconds: 30,
});
const [id, setId] = useState("");
const isValidUuid = Uuid.safeParse(id).success;
let data = "";
if (mutation.isSuccess) {
// stringify cannot handle BigInts
data = data = JSON.stringify(mutation.data, (_, v) =>
typeof v === "bigint"
? v.toString()
: v instanceof Uint8Array
? bytesToHex(v)
: v,
);
} else if (mutation.isError) {
data = mutation.error.message;
}
function handleChange(event: ChangeEvent<HTMLInputElement>): void {
setId(event.target.value);
}
function handleClick(): void {
const options = { id };
mutation.execute(options);
}
return (
<div>
<h2>Retrieve Values</h2>
<ol>
<li>Status: {mutation.status}</li>
<li>
Id: <input type="text" value={id} onChange={handleChange} />
</li>
<li>Data: {data}</li>
</ol>
<button type="button" disabled={!isValidUuid} onClick={handleClick}>
Execute
</button>
</div>
);
};
useNilDeleteValues
Deleting requires an id
and the correct permissions to be able to delete it. So if a user does not have the right id or permissions, this will not be possible.
examples-nextjs/app/components/delete-values.tsx
"use client";
import { useNilDeleteValues } from "@nillion/client-react-hooks";
import { Uuid } from "@nillion/client-vms";
import { type ChangeEvent, type FC, useState } from "react";
export const DeleteValues: FC = () => {
const mutation = useNilDeleteValues();
const [id, setId] = useState("");
const isValidUuid = Uuid.safeParse(id).success;
function handleChange(event: ChangeEvent<HTMLInputElement>): void {
setId(event.target.value.trim());
}
function handleClick(): void {
const options = { id };
mutation.execute(options);
}
return (
<div>
<h2>Delete Values</h2>
<ol>
<li>Status: {mutation.status}</li>
<li>
Id: <input type="text" value={id} onChange={handleChange} />
</li>
</ol>
<button type="button" disabled={!isValidUuid} onClick={handleClick}>
Execute
</button>
</div>
);
};