saul-atomrigs · saul-atomrigs · Mar 15, 2025 · Mar 15, 2025 · Mar 15, 2025 · Mar 15, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@saul-atomrigs/react",
-  "version": "0.2.0",
+  "version": "0.3.2",
   "type": "module",
   "description": "React utils for faster project development",
   "main": "./dist/index.js",
@@ -51,8 +51,10 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.3.1",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@tanstack/react-query": "^5.68.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/react": "^17.0.0 || ^18.0.0",
     "@types/react-dom": "^17.0.0 || ^18.0.0",
@@ -63,6 +65,7 @@
     "jsdom": "^26.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^5.0.0",
     "rollup": "^4.9.6",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-typescript2": "^0.36.0",

diff --git a/src/index.js b/src/index.js
@@ -1 +1,2 @@
 export * from './create-context';
+export * from './query-async-boundary';
diff --git a/src/query-async-boundary.tsx b/src/query-async-boundary.tsx
@@ -0,0 +1,33 @@
+import React, { Suspense, type PropsWithChildren } from 'react';
+import { useQueryErrorResetBoundary } from '@tanstack/react-query';
+import { ErrorBoundary } from 'react-error-boundary';
+
+type QueryAsyncBoundaryProps = {
+  pendingFallback: React.ReactNode;
+  rejecterFallback?: React.ReactNode;
+} & PropsWithChildren;
+
+/**
+ * reference: https://github.com/ssi02014/react-query-tutorial?tab=readme-ov-file#usequeryerrorresetboundary
+ * PLEASE use throwOnError: true in the query options to make sure the error is thrown and caught by the error boundary.
+ */
+export const QueryAsyncBoundary = ({
+  pendingFallback,
+  rejecterFallback,
+  children,
+}: QueryAsyncBoundaryProps) => {
+  const { reset } = useQueryErrorResetBoundary();
+
+  return (
+    <ErrorBoundary
+      onReset={reset}
+      fallbackRender={({ resetErrorBoundary }) =>
+        rejecterFallback || (
+          <button onClick={() => resetErrorBoundary()}>Try again</button>
+        )
+      }
+    >
+      <Suspense fallback={pendingFallback}>{children}</Suspense>
+    </ErrorBoundary>
+  );
+};
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './create-context';
		export * from './query-async-boundary';