Adding timeout and multiple abort signals to fetch() (TypeScript/React)

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • fetch

    Fetch Standard (by whatwg)

  • Proposal: fetch with multiple AbortSignals - I got the idea of merging multiple signals from here.

  • vercel

    Develop. Preview. Ship.

  • In my latest project, I made a Node/Express API backend which acted as a proxy between multiple public APIs and my frontend. after deploying it to Vercel, I encountered this error: The Serverless Function has timed out. This happens when one of the upstream APIs takes too long to respond but could also happen with slow database connections. Vercel has a guide on this error that explains why it happens and that your backend should return a response to the client if the upstream service takes too long and not wait forever for the response.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • go-unsplash

    Go Client for the Unsplash API

  • Cover photo by Israel Palacio on Unsplash

  • React

    The library for web and native user interfaces.

  • After writing the above functions and using them in my Node/Express API, in case of a fetch timeout, I could return an error like: selected API took too long to respond. and I didn't get the The Serverless Function has timed out. error anymore. Now I wanted to use the same function in my frontend React app as well and show an error in case of timeout (and refetch after a while), instead of waiting for the fetch() forever. but I encountered a problem.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts