I have a function that makes a request to an API endpoint and reads the stream that it returns. The stream contains multiple newline delimited JSON objects. The function returns a promise for each object like this:

const resolvers: Record<string, (data: any) => void> = {};
const promises: Record<string, Promise<any>> = {};

["first_object", "second_object", "third_object"].forEach((key) => {
  promises[key] = new Promise((resolve) => {
    resolvers[key] = resolve;
  });
});

// Read the stream

return promises;

I want to call this function (let's call it fetchData) in a server component and pass each of the promises to a separate suspended component. The promises resolve one-by-one as each object is received.

Right now, all of the components are rendered at the same time, even though the promises resolve at different times. I think this is because the fetchData is awaited by the parent (server) component.

I want each of the child components to render as soon as their promise is resolved.

I welcome any and all suggestions.