Looking for workaround to make query works with error boundary

[timsofteng]

Hello. I've faced up with this issue
https://github.com/inkitio/inkit-next/pull/7958/files

broken query triggers boundary but it does not refetch it on the next mount.
I tried workarounds from tread including reset() on fallback component unmount. Unfortunately nothing work.

How to make query refetch on the next mount of the broken component?

Here is my boundary component looks right now

const Fallback = (props: FallbackProps) => {
  return (
    <SWrapper>
      <div>Failed to load element</div>
      <button onClick={props.resetErrorBoundary}>Try Again</button>
    </SWrapper>
  );
};

export const ErrorBoundary = ({
  children,
  ...props
}: any & {
  children: ReactNode;
}) => {
  return (
    <QueryErrorResetBoundary>
      {({ reset }) => (
        <ErrorBoundaryPackage
          resetKeys={[window.location.pathname]}
          FallbackComponent={Fallback}
          onReset={reset}
          {...props}
        >
          {children}
        </ErrorBoundaryPackage>
      )}
    </QueryErrorResetBoundary>
  );

[TkDodo]

show a reproduction please

[timsofteng]

@TkDodo here is a repo
https://github.com/timsofteng/query-boundary-bug

Is repo ok for reproduction?

steps:

1. yarn install && yarn dev
2. Open http://127.0.0.1:5173/one
3. Click to page two. See an error in query and in boundary.
4. Click to page one. Page one should be rendered ok.
5. Click to page two. Boundary is displayed but query does not refetch.

[TkDodo]

your errorBoundary is missing:

onResetKeysChange={reset}

also, you're using v4 of react-error-boundary, not sure if that one still supports resetKeys (doesn't seem like it looking at the readme). Maybe stick to v3.