Streamlining Axios Requests with Chunked Response in Node

Title: Troubleshooting Axios Request with Chunked Response Stream in Node

If you have been working with React and Node, you might have come across a scenario where you need to fetch data from an endpoint that returns a chunked response stream. In this blog post, we’ll tackle a common issue faced by developers when using Axios to handle chunked response streams in a Node backend.

The Problem

Let’s consider a scenario where you have an endpoint in your Node server that streams data in chunks using the ‘Transfer-Encoding: chunked’ header. You want to display this data on the frontend as soon as it is received, rather than waiting for the entire response to be delivered.

In your React client app, you make an Axios request to the Node server endpoint with the following code:

async function getDataFromStream(_data) {
    const { data, headers } = await Axios({
        url: 'http://the.api.url/endpoint',
        method: 'GET',
        responseType: 'stream',
        timeout: 0,
    });

    // Process received data
    data.on('data', chunk => console.log('chunk', chunk));

    return Promise.resolve();
}

However, you notice that the data object only becomes available after the server completes sending the response using the ‘res.end()’ method. This means that all chunks are received at once, instead of progressively as they are sent by the server.

The Solution

To tackle this issue and receive the data in chunks as it is being sent from the server, we can leverage the onDownloadProgress handler provided by Axios. Modify your code as shown below:

function getDataFromStream(_data) {
    return Axios({
        url: 'http://the.api.url/endpoint',
        method: 'GET',
        onDownloadProgress: progressEvent => {
            const dataChunk = progressEvent.currentTarget.response;
            // Process received data chunk accordingly
        }
    }).then(({ data }) => Promise.resolve(data));    
}

By using the onDownloadProgress function, you can handle progress events for downloads. In this case, you can access the partial data chunk using progressEvent.currentTarget.response. Process the received data chunk based on your requirements, such as storing it in a Redux store to render a table on the frontend.

Conclusion

In this blog post, we explored how to troubleshoot the issue of receiving chunked response streams in Node when using Axios. By utilizing the onDownloadProgress handler, we were able to process the received data chunks as soon as they became available, improving the user experience by displaying data progressively.

I hope this guide helps you overcome any obstacles you may face when handling chunked response streams with Axios in your Node server and React client app. Happy coding!

reference : 

reactjs