{"library":"remix-utils","title":"Remix Utilities","description":"remix-utils is a comprehensive collection of modular utility functions designed to extend the capabilities of applications built with the Remix framework and React Router. As of version 9.3.1, this library offers a wide array of tools covering both server-side and client-side concerns. Its utilities range from advanced data loading patterns like `promiseHash` for concurrent fetches and `timeout` for resilient API calls, to server-side middleware for handling common web challenges such as client IP detection, CORS, CSRF protection, request ID generation, and server timing. Client-side enhancements include functions like `cacheAssets` for efficient browser caching of build artifacts. The package maintains an `active` and consistent release cadence, frequently pushing out minor and patch updates to introduce new features, resolve bugs, and ensure seamless compatibility with the evolving Remix and React Router ecosystems. A key distinguishing factor is its highly modular design, which allows developers to selectively install and import only the specific utilities needed, thereby keeping bundles lean. Many components can even be installed via a shadcn-like registry for simplified management. This approach differentiates it from monolithic utility libraries, promoting a more focused and performant integration within Remix projects.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install remix-utils"],"cli":null},"imports":["import { promiseHash } from 'remix-utils/promise';","import { timeout, TimeoutError } from 'remix-utils/promise';","import { cacheAssets } from 'remix-utils/cache-assets';","import { json } from 'remix-utils/json';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { json } from \"@remix-run/node\";\nimport { promiseHash, timeout, TimeoutError } from \"remix-utils/promise\";\n\n// Mock API calls\nasync function getUser(request: Request): Promise<{ id: string; name: string }> {\n  await new Promise(resolve => setTimeout(resolve, Math.random() * 50));\n  return { id: \"user-123\", name: \"John Doe\" };\n}\n\nasync function getPosts(request: Request): Promise<{ id: string; title: string }[]> {\n  await new Promise(resolve => setTimeout(resolve, Math.random() * 150));\n  return [{ id: \"post-a\", title: \"My First Post\" }, { id: \"post-b\", title: \"Another One\" }];\n}\n\n// A potentially slow external service\nasync function getExternalData(request: Request): Promise<string> {\n  await new Promise(resolve => setTimeout(resolve, 200)); // Simulating a slow API\n  return \"External data loaded!\";\n}\n\nexport async function loader({ request }: { request: Request }) {\n  try {\n    const { user, posts, externalData } = await promiseHash({\n      user: getUser(request),\n      posts: getPosts(request),\n      // Attach a timeout to a potentially slow external call\n      externalData: timeout(getExternalData(request), { ms: 100, message: \"External data timed out\" })\n    });\n\n    return json({ user, posts, externalData });\n  } catch (error) {\n    if (error instanceof TimeoutError) {\n      console.error(\"Loader timeout error:\", error.message);\n      return json({ error: \"One or more external services timed out. Please try again.\" }, { status: 504 });\n    }\n    console.error(\"Loader error:\", error);\n    return json({ error: \"An unexpected error occurred.\" }, { status: 500 });\n  }\n}","lang":"typescript","description":"This example demonstrates using `promiseHash` to concurrently fetch multiple data sources in a Remix loader and applies `timeout` to an external API call to prevent long-running requests from blocking the response, handling potential `TimeoutError`s gracefully.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}