Rethrow apollo errors and recommend error boundaries

Right now errors are returned as a part of the useQuery result. Maybe a better idea would be to throw them and recommend to use Error Boundaries instead (at least in the suspense mode).

So instead of this code:

const Hello = () => {
  const { data, error } = useQuery(GET_HELLO);
  if (error) return `Error! ${error.message}`;

  return <p>{data.hello.world}</p>;
};

we could write:

const Hello = () => {
  // we can be sure here that the error hasn't occurred
  return <p>{data.hello.world}</p>;
};

and use an error boundary at the root of the react tree (or anywhere else above the component) - similar to how we use the <Suspense /> component.

[trojanowski]

I’d make it optional (but enabled by default) so if you wanted the old behavior you could use it like e. g. const { data, error } = useQuery(MY_QUERY, { throw: false });.

But the general idea is to make error management similar to what suspense does for data loading. So in most cases, it should be enough to put a single error boundary at the top of the React tree, but if you need it, you can also put it at the bottom, just above a component which requires a special behavior. Please compare:

render(
  <Suspense fallback={<GlobalLoadingFallback />}>
    <MyPageComponent>
      <PageDataComponent />
      <Suspense fallback={<ImageLoadingFallback />}>
        <MyImageComponent />
      </Suspense>
    </MyPageComponent>
  </Suspense>
);

and:

// a helper component but you can also easily implement it by yourself
import { ErrorBoundary } from 'react-error-boundary';

render(
  <ErrorBoundary FallbackComponent={GlobalError}>
    <MyPageComponent>
      <PageDataComponent />
      <ErrorBoundary FallbackComponent={ImageError}>
        <MyImageComponent />
      </ErrorBoundary>
    </MyPageComponent>
  </ErrorBoundary>
);

Of course, you can mix suspense and error boundaries. Please also note that you have access to the error instance inside of the error boundaries.

[trojanowski]

So I’d like support for error boundaries enabled by default, but not yet. As I said in https://github.com/trojanowski/react-apollo-hooks/issues/28#issuecomment-467191957 I’d like to have two hooks - the high-level one recommended for most cases (which will use suspense and error boundaries) and the second one - when you prefer to manage everything by yourself.