Streaming JSON chunks (FastAPI <-> fetchAPI)

backend.py

# FastAPI.

async def stream_json_list(items):
    for item in items:
        yield item
        await asyncio.sleep(4.0)  # To demonstrate, visibly, the successful implementation.


async def get_media_metadata(tags: Optional[Set[str]] = Query(None,
                                                              description="Tags to filter on")):
    metadata = metadata_repository.get_metadata_for_items_by_tags(tags=tags)
    return StreamingResponse(
        stream_json_list(m.json() for m in metadata),
        media_type='application/json'
    )

frontend.js

async performSearch () {
  const utf8decoder = new TextDecoder()
  this.getMediaMetadataByTags()
    .then(response => {
      const stream = new ReadableStream({
        start (controller) {
          const reader = response.body.getReader()
          read()

          function read () {
            reader.read().then(({ done, value }) => {
              if (done) {
                controller.close()
                return null
              }
              const textValue = utf8decoder.decode(value)
              console.log(textValue)
              // this.items += textValue
              controller.enqueue(value)
              read()
            })
          }
        }
      })
      return new Response(stream, { headers: { 'content-type': 'application/json' } })
    })
  
async getMediaMetadataByTags () {
  const response = await fetch(`http://localhost:8080/api/v1/media/metadata/?tags=${this.searchTerm}`)
  return await response.json()
}