streaming response from Lambda with InvokeWithResponseStreamCommand

Question

I have the following code in a react-native app that calls a Lambda in my AWS tenant. The Lambda fires just fine, all the console.logs come out correct (200, correct content-type, etc.), and I can also see the response from the Lambda in CloudWatch, and it is the expected result (a streamed response). I also have this code running in regular React, and it also works fine, and I get the expected result.

However, in react-native the response comes different, and it causes an exception that I haven't been able to figure out. Based on this AWS documentation, there should be something in the EventStream (InvokeComplete, PayloadChunk), but based on the logs, I seem to get nothing.

import { Lambda, InvokeWithResponseStreamCommand, LambdaClient } from "@aws-sdk/client-lambda"
import "react-native-url-polyfill/auto";
import 'react-native-get-random-values'

async streamAWS(payload) {
    try {
        const lambda = new Lambda({
            region: 'us-west-1',
            credentials: {
                accessKeyId,
                secretAccessKey
            }
        });

        return lambda.send(new InvokeWithResponseStreamCommand(
            {
                FunctionName: 'test_stream',
                Payload: JSON.stringify({ payload })
            }
        ));
    } catch (error) {
        console.log(error);
    }
}

This is the code I'm using to extract the streamed data. Like I said, this code works fine on React web, but it doesn't work on React-Native:

import { TextDecoder } from 'text-decoding';

useLayoutEffect(() => {
    async function stream() {
        const lambdaResponse = await awsService("payload");
        const decoder = new TextDecoder("utf-8");

        console.log(JSON.stringify(lambdaResponse));

        // this for causes the exception on React-Native
        for await (const event of lambdaResponse.EventStream) {
            const text = decoder.decode(event.PayloadChunk?.Payload);
            setTitle(oldText => oldText + text.replaceAll('"', ''));
        }
    }
    stream();
}, []);

This is the error I get in React-Native:

LOG response:
{"$metadata":{"httpStatusCode":200,"requestId":"b8eee2d1-a8e2-404f-9df3-dccb4810fdcd","attempts":1,"totalRetryDelay":0},"ExecutedVersion":"$LATEST","ResponseStreamContentType":"application/vnd.amazon.eventstream","EventStream":{},"StatusCode":200}
WARN Possible Unhandled Promise Rejection (id: 0):
TypeError: Object is not async iterable TypeError: Object is not async iterable

And I'm using this library and version: "@aws-sdk/client-lambda": "3.335.0"

EDIT: I also think the main issue is that the lambda response EventStream property comes back empty when I call it from react native (you can see it in the log section EventStream:{}).

Answer 1

It appears that await for ... of syntax isn't supported in React Native. The simplest solution is to provide your own iterator function. Thankfully, the iterator spec is quite simple; calling next returns an object with two properties { value, done }. value is, unsurprisingly, your next value. done is a boolean indicating if the iterator is finished returning more values.

The below function will take an iterator, gather up it's values, and return them as an array.

async function IteratorToArray(iterator) {

    const items = [];

    while (true) {
        const { value, done } = await iterator.next();
        if (done) {
            return items; // 'value' will be undefined on last iteration as it was 'done'
        } else {
            items.push(value);
        }
    }
}

So for your problem, you can call it like so:

const lambdaResponse = await awsService("payload");

const data = await IteratorToArray(lambdaResponse.EventStream);

const decoder = new TextDecoder("utf-8");

for (const event of data) {
    const text = decoder.decode(event.PayloadChunk?.Payload);
    setTitle(oldText => oldText + text.replaceAll('"', ''));
}