Provider & runtime

Every hook reads from a runtime, the object created from your config that owns chain connections, the signer manager and the host controllers. The provider makes it available to your component tree.

Setting up

import { TruapiProvider } from "@use-truapi/react";
import { config } from "./config";

<TruapiProvider config={config}>
  <App />
</TruapiProvider>;

import { createRuntime, TruapiProvider } from "@use-truapi/react";

const runtime = createRuntime(config);
<TruapiProvider runtime={runtime}>...</TruapiProvider>;

import { TruapiPlugin } from "@use-truapi/vue";
import { config } from "./config";

app.use(TruapiPlugin, { config });

import { createRuntime, TruapiPlugin } from "@use-truapi/vue";

app.use(TruapiPlugin, { runtime: createRuntime(config) });

The QueryClient

use-truapi is built on TanStack Query and works with an existing setup:

• Your app already uses TanStack Query: the provider reuses your QueryClient (shared cache, one devtools instance). In React, render TruapiProvider inside your QueryClientProvider; in Vue it detects an installed VueQueryPlugin.
• No TanStack Query yet: a client is created for you with a 5 second staleTime so remounts and duplicate hooks don't hammer the RPC.
• Explicit control: pass queryClient to the provider/plugin, or create one with the defaults via createTruapiQueryClient().

useRuntime

useRuntime returns the runtime itself, the escape hatch when no hook covers what you need. It exposes the same controllers the hooks are built on: runtime.chains, runtime.accounts, runtime.tx, runtime.contracts, runtime.chat, runtime.statements, runtime.payments, runtime.cloudStorage, runtime.host and runtime.config.

import { useRuntime } from "@use-truapi/react"; // or "@use-truapi/vue"

const runtime = useRuntime();
await runtime.host.navigate("https://polkadot.network");

It throws when called outside the provider.

API reference

React

function TruapiProvider(__namedParameters): 
  | FunctionComponentElement<ProviderProps<
  | TruapiRuntime<AnyChains>
  | null>>
| FunctionComponentElement<QueryClientProviderProps>;

Parameters

Returns

| FunctionComponentElement<ProviderProps< | TruapiRuntime<AnyChains> | null>> | FunctionComponentElement<QueryClientProviderProps>

Properties

children?

optional children?: ReactNode;

config?

optional config?: TruapiConfig<any>;

queryClient?

optional queryClient?: QueryClient;

TanStack QueryClient to use. Defaults to the app's own client when the provider is rendered under a QueryClientProvider, otherwise a client with use-truapi defaults is created and provided for you.

runtime?

optional runtime?: TruapiRuntime<any>;

Pass a pre-built runtime instead of config to control its lifecycle yourself.

Vue

Properties

config?

optional config?: TruapiConfig<any>;

queryClient?

optional queryClient?: QueryClient;

TanStack QueryClient to use. Defaults to the app's own client when VueQueryPlugin is already installed, otherwise a client with use-truapi defaults is installed for you.

runtime?

optional runtime?: TruapiRuntime<any>;

Pass a pre-built runtime instead of config to control its lifecycle yourself.