usePreimage

usePreimage looks up the bytes behind a preimage key (a 0x hash) via the host's Preimage.lookup_subscribe. data is the Uint8Array once the host finds it, and null while it is still searching, so distinguish the two when rendering. The lookup is a live subscription shared per key across components and torn down with the last consumer.

This is the raw layer under useCid: useCid resolves a CID to Bulletin chunks and reassembles them, usePreimage hands you exactly the bytes stored under one key. While key is undefined the query stays disabled. Host-only: standalone the query errors with HostUnavailableError, so gate it on useIsHost.

Usage

import { useIsHost, usePreimage } from "@use-truapi/react";

function Preimage({ key }: { key?: `0x${string}` }) {
  const isHost = useIsHost();
  const { data, error } = usePreimage(key, { enabled: isHost });

  if (!isHost) return <p>Host only.</p>;
  if (error) return <p role="alert">{error.message}</p>;
  if (data === undefined || data === null) return <p>Looking up…</p>;
  return <pre>{new TextDecoder().decode(data)}</pre>;
}

<script setup lang="ts">
import { useIsHost, usePreimage } from "@use-truapi/vue";

const props = defineProps<{ key?: `0x${string}` }>();
const isHost = useIsHost();
const { data, error } = usePreimage(() => props.key, { enabled: () => isHost.value });
</script>

<template>
  <p v-if="!isHost">Host only.</p>
  <p v-else-if="error" role="alert">{{ error.message }}</p>
  <p v-else-if="data == null">Looking up…</p>
  <pre v-else>{{ new TextDecoder().decode(data) }}</pre>
</template>

See also

• useSubmitPreimage stores bytes and returns the key this hook looks up.
• useCid is the CID-addressed layer most apps want.

API reference

React

function usePreimage(key, options?): UseQueryResult<Uint8Array<ArrayBufferLike> | null, Error>;

Live lookup of the preimage behind key (Bulletin-backed, via the host). data is the bytes, or null while the host is still searching. Disabled while key is undefined; host-only — standalone the query errors with HostUnavailableError.

Parameters

Returns

UseQueryResult<Uint8Array<ArrayBufferLike> | null, Error>

Vue

function usePreimage(key, options?): QueryResult<Uint8Array<ArrayBufferLike> | null>;

Live lookup of the preimage behind key (Bulletin-backed, via the host). data is the bytes, or null while the host is still searching. Disabled while key is undefined; host-only — standalone the query errors with HostUnavailableError.

Parameters

Returns

QueryResult<Uint8Array<ArrayBufferLike> | null>