Nuxt•5w ago

How to use ReadableStream response with $fetch?

I have an API route whose response will be a ReadableStream. However, with sendStream the inferred type is unknown and when returning the stream the type is simply { readable: bool }. Is there a better way how to express this which works with $fetch?

2 Replies

kapa.ai•5w ago

Hi @Septatrix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use a ReadableStream response with $fetch in Nuxt, you can follow these steps: 1. On the server-side, create and return a ReadableStream:

export default defineEventHandler((event) => {
  const stream = new ReadableStream({
    start(controller) {
      // Your stream logic here
    }
  });

  return sendStream(event, stream);
});

export default defineEventHandler((event) => {
  const stream = new ReadableStream({
    start(controller) {
      // Your stream logic here
    }
  });

  return sendStream(event, stream);
});

2. When using $fetch on the client-side, specify the responseType as 'stream':

const response = await $fetch<ReadableStream>('/api/your-endpoint', {
  method: 'POST',
  body: {
    // Your request body
  },
  responseType: 'stream'
});

const response = await $fetch<ReadableStream>('/api/your-endpoint', {
  method: 'POST',
  body: {
    // Your request body
  },
  responseType: 'stream'
});

3. Process the stream data:

const reader = response.getReader();
const decoder = new TextDecoder();

while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log('Received:', decoder.decode(value));
}

const reader = response.getReader();
const decoder = new TextDecoder();

while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log('Received:', decoder.decode(value));
}

This approach is based on the example provided in the Nuxt Data Fetching documentation (https://nuxt.com/docs/getting-started/data-fetching#recipes). It's worth noting that when using sendStream or returning a stream directly, the inferred type might not be as specific as you'd like. To improve type inference, you can create a custom type for your stream response and use it with $fetch:

type MyStreamResponse = ReadableStream<Uint8Array>;

const response = await $fetch<MyStreamResponse>('/api/your-endpoint', {
  // ... options
});

type MyStreamResponse = ReadableStream<Uint8Array>;

const response = await $fetch<MyStreamResponse>('/api/your-endpoint', {
  // ... options
});

This should provide better type inference while still allowing you to work with the stream data effectively. Remember that streaming responses are more complex to handle than regular JSON responses, so make sure this is the best approach for your use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5w ago

<@525348219828568076> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

How to use ReadableStream response with $fetch?