How to access streamable value created with createStreamableValue from the client

[0xaguspunk]

Hi! :)

Does anyone have an example of how can one read a streamable value created with createStreamableValue on a client component?

Docs don't show how you can consume the streamable value. I see in the code I need to use useStreamableValue but unsure how since I have to call it with the value itself.

[MaxLeiter]

Hi, there's a useStreamableValue hook but we're potentially going to revisit its API.

useStreamableValue(streamableFromProps) is one way to access the streamable value.

[pksorensen]

Its not documented at the documentation - is there an exmaple? cant find it in the ai/rsc package either

[MaxLeiter]

We're updated the API and are working on docs now. The tests in the PR should be enough to get you started: #1114

[pksorensen]

After i wrote i also checked if there was a new version, and found the readStreamableValue. Made a helper hook:

const useStreamableState = <T,>(initialState: T) => {
    const [state, setState] = useState<T>(initialState);
    const updateState = async (streamable: Promise<StreamableValue<T>>, stateupdate: Partial<T> = {}) => {
        setState(old => ({ ...old, ...stateupdate }));
        for await (const v of readStreamableValue(await streamable)) {
            setState(old => ({ ...old, ...v }));
        }
    }
    return [state, updateState] as [T, typeof updateState];
}

and using it

export const AcceptChallengeMessage = ({ messageid, threadid, chatuserid }: MessageComponentProps) => {
    const styles = useAcceptChallengeMessageStyles();
    const [{ isAccpting, isRejecting, accepted,rejected }, readStreamableState] = useStreamableState<AcceptChallengeMessageState>({ isRejecting: false, isAccpting: false });
    const disabled = isAccpting || isRejecting || accepted || rejected;
    return (
        <div className={styles.root}>
            <Button
                disabled={disabled}
                iconPosition="after"
                icon={isRejecting ? <Spinner size="tiny" /> : rejected ? <DismissRegular /> : null}
                appearance="outline"
                onClick={async (e) =>
                    await readStreamableState(rejectAction(messageid, threadid, chatuserid), { isRejecting: true })}>
                No
            </Button>
            <Button
                disabled={disabled}
                aria-pressed={accepted}
                iconPosition="after"
                icon={isAccpting ? < Spinner size="tiny" appearance="inverted" /> : accepted ? <CheckmarkRegular /> : null}
                appearance="primary"
                onClick={async (e) =>
                    await readStreamableState(acceptAction(messageid, threadid, chatuserid), { isAccpting: true })}>
                Yes 
            </Button>
        </div>
    )
}

There are some nice usecases with this streamable stuff - i just need to get my head around if its "okay" that connections are keept open - i actually was under the impression that one would like the reponse to close as fast as possible to not demand extra load on servers - seems this is changing that or atleast challenges my beliefs :)

[MaxLeiter]

Nice utility! We're excited for what people build with the streamable utilities, they're a lot more flexible than the render function.

reponse to close as fast as possible to not demand extra load on servers

It does use extra load (the function is running instead of, well, not running), so I recommend monitoring your usage to ensure you're still at a reasonable level of compute and cost (whatever that means to you) with your cloud provider / hosting service / server.

[pksorensen]

The last thing that i dont see a good way to solve now is , with above example, how to make the initial state easy. Its a client component due to the usestate / useStyles (Griffel) - would be easier if it was a server component and just do a fetch against db.

It feels wrong to do a call against a server action on first render to fetch the initial state. I want the component to be composable, so i dont really want to pass the initial state as prop because then my fetch logic is outside the component - but seems like the reasonable way right now.