React hooks

Realtime provides a useInngestSubscription() react hook, used to subscribe using a token and collate streamed data for you.

"use server";

import { useInngestSubscription } from "@inngest/realtime/hooks";
import { inngest } from "src/inngest";

export default function MyComponent({ token }: { token: string }) {
  // Use a user scoped token to subscribe to channels:
  const { data } = useInngestSubscription({
    app: inngest,
    token,
  });

  return (
    <div>
      {data.map((message, i) => (
        <div key={i}>{message.data}</div>
      ))}
    </div>
  );
}

Inputs

• app: Inngest - The Inngest client to use for subscribing. Does not require a signing key, as we subscribe using a token.
• enabled?: boolean - Whether or not the hook will subscribe or not.
• bufferInterval?: number - If set and above 0, the outputs will only update every n milliseconds. This helps with very busy streams that could overwhelm a UI.
• token?: Realtime.Subscribe.Token - The token to be used for subscribing (see Subscribe from the client)
• refreshToken?: () => Promise<Realtime.Subscribe.Token> - A function that will be called if no token is available, or if the hook has been re-enabled and the previous token has expired.

Outputs

• data: Array<Realtime.Message> - All messages received on the subscription in chronological order.
• latestData: Realtime.Message - A shortcut to the last message received on the subscription. Useful for streams where each message is the latest state of an entity.
• freshData: Array<Realtime.Message> - If bufferInterval is active, this will be the last batch of messages released from the buffer. If bufferInterval is inactive, this is always the latest message.
• error: Error | null - If truthy, this is an error with the subscription.
• state: InngestSubscriptionState - The current state of the subscription, one of "closed", "error", "refresh_token", "connecting", "active", or "closing".