T
TanStack•3y ago
harsh-harlequin

reset error boundary if query succeeded

If I have a query that is being used in multiple parts of the same page, and if it fails, I want error boundaries to catch those components and render fallbacks. But if the user presses Try Again on one of the queries, only that boundry is reset if the query is sucessful. The rest of the components are still rendering the fallback. Is there anyway to have all the error boundaries reset?
4 Replies
generous-apricot
generous-apricot•3y ago
are you using separate QueryErrorResetBoundaries ?
harsh-harlequin
harsh-harlequinOP•3y ago
const ErrorMessage = ({ resetErrorBoundary }: FallbackProps) => (
  <div className='text-xl text-red'>
    <div>Failed to load</div>
    <Button onClick={resetErrorBoundary}>Try Again</Button>
  </div>
);

const Page = () => {
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <div>
          <ErrorBoundary onReset={reset} fallbackRender={ErrorMessage}>
            <Portfolio />
          </ErrorBoundary>
          <ErrorBoundary onReset={reset} fallbackRender={ErrorMessage}>
            <Positions />
          </ErrorBoundary>
        </div>
      )}
    </QueryErrorResetBoundary>
  );
};
const ErrorMessage = ({ resetErrorBoundary }: FallbackProps) => (
  <div className='text-xl text-red'>
    <div>Failed to load</div>
    <Button onClick={resetErrorBoundary}>Try Again</Button>
  </div>
);

const Page = () => {
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <div>
          <ErrorBoundary onReset={reset} fallbackRender={ErrorMessage}>
            <Portfolio />
          </ErrorBoundary>
          <ErrorBoundary onReset={reset} fallbackRender={ErrorMessage}>
            <Positions />
          </ErrorBoundary>
        </div>
      )}
    </QueryErrorResetBoundary>
  );
};
I've tried it in every combination I can think of, the Try Again button resets the query but doesn't cause the other boundary to re-render. For context, both <Portfolio /> and <Positions /> are using the same query, with the same query key
harsh-harlequin
harsh-harlequinOP•3y ago
https://suspensive.org/docs/react/src/ErrorBoundaryGroup.i18n#witherrorboundarygroup-useerrorboundarygroup This actually solves my issue, not sure if there is a better way though
ErrorBoundaryGroup | Suspensive
This is a component for managing multiple ErrorBoundaries at once.
harsh-harlequin
harsh-harlequinOP•3y ago
This is what my solution was, it doesn't feel right Using useSuspenseQuery in <Portfolio /> and <Positions />, both are using the same query+key 
const Page = withErrorBoundaryGroup(() => {
  const { reset: resetGroup } = useErrorBoundaryGroup();

  const ErrorMessage = (resetQuery: () => void) => (
    <div>
      <div>Failed to load</div>
      <Button
        onClick={() => {
          resetQuery();
          resetGroup();
        }}
      >
        Try Again
      </Button>
    </div>
  );
  return (
    <QueryErrorResetBoundary>
      {({ reset: resetQuery }) => (
        <div>
          <ErrorBoundary fallback={() => ErrorMessage(resetQuery)}>
            <Suspense fallback={Loading}>
              <Portfolio />
            </Suspense>
          </ErrorBoundary>
          <ErrorBoundary fallback={() => ErrorMessage(resetQuery)}>
            <Suspense fallback={Loading}>
              <Positions />
            </Suspense>
          </ErrorBoundary>
        </div>
      )}
    </QueryErrorResetBoundary>
  );
});
const Page = withErrorBoundaryGroup(() => {
  const { reset: resetGroup } = useErrorBoundaryGroup();

  const ErrorMessage = (resetQuery: () => void) => (
    <div>
      <div>Failed to load</div>
      <Button
        onClick={() => {
          resetQuery();
          resetGroup();
        }}
      >
        Try Again
      </Button>
    </div>
  );
  return (
    <QueryErrorResetBoundary>
      {({ reset: resetQuery }) => (
        <div>
          <ErrorBoundary fallback={() => ErrorMessage(resetQuery)}>
            <Suspense fallback={Loading}>
              <Portfolio />
            </Suspense>
          </ErrorBoundary>
          <ErrorBoundary fallback={() => ErrorMessage(resetQuery)}>
            <Suspense fallback={Loading}>
              <Positions />
            </Suspense>
          </ErrorBoundary>
        </div>
      )}
    </QueryErrorResetBoundary>
  );
});

Did you find this page helpful?