useLazyQuery throws instead of returning with error

[alexandergottlieb]

Intended outcome:

When useLazyQuery encounters an error, I would expect it to return a QueryResult with error populated, just like useQuery.

This should work:

const [execute] = useLazyQuery(...);
const { error } = await execute();
if (error) {
  ...
}

Actual outcome:

useLazyQuery throws, so the if (error) clause is unreachable.

How to reproduce the issue:

Sandbox: https://codesandbox.io/s/uselazyquery-error-3224g3?file=/src/test.spec.js

import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { gql, useLazyQuery, useQuery } from "@apollo/client";
import { MockedProvider } from "@apollo/client/testing";

const FOO_QUERY = gql`
  query GetFoo {
    foo {
      bar
    }
  }
`;

const mocks = [
  {
    request: {
      query: FOO_QUERY
    },
    error: new Error("A network error")
  }
];

const NormalQuery = ({ onError }) => {
  const { error } = useQuery(FOO_QUERY);
  if (error) onError();
  return null;
};

const LazyQueryButton = ({ onError }) => {
  const [executeQuery] = useLazyQuery(FOO_QUERY);
  const handleClick = async () => {
    try {
      const { error } = await executeQuery();
      // Unreachable
      if (error) onError();
    } catch (e) {
      // We end up here
    }
  };
  return <button onClick={handleClick}>Click me</button>;
};

// Passes
test("useQuery returns error", async () => {
  const handleErrorMock = jest.fn();
  render(
    <MockedProvider mocks={mocks}>
      <NormalQuery onError={handleErrorMock} />
    </MockedProvider>
  );
  await waitFor(() => {
    expect(handleErrorMock).toHaveBeenCalled();
  });
});

// Fails
test("useLazyQuery returns error", async () => {
  const handleErrorMock = jest.fn();
  render(
    <MockedProvider mocks={mocks}>
      <LazyQueryButton onError={handleErrorMock} />
    </MockedProvider>
  );
  const button = screen.getByRole("button");
  userEvent.click(button);
  await waitFor(() => {
    expect(handleErrorMock).toHaveBeenCalled();
  });
});

Versions

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.18.3
    Yarn: 1.22.10
    npm: 6.14.15
  npmPackages:
    @apollo/client: ^3.6.2 => 3.6.2 
    apollo: ^2.33.9 => 2.33.9

[benjamn]

@alexandergottlieb This should be fixed if you run npm i @apollo/client@next (to get version 3.6.3). Thanks for reporting this issue, instead of assuming it was an intended change in behavior!

[alexandergottlieb]

Thanks @benjamn for the quick fix!

[pumuckelo]

Hello @benjamn

I think we have the same issue on useMutation here
Can you confirm?

[benjamn]

I think you're right @pumuckelo—throwing/rejecting makes everything trickier, and potentially discards information about result.data that was also delivered.

In other words, what I said in #9142 (comment) and PR #9684 applies to client.mutate and useMutation as well.

I've assigned issue #9065 to myself and added it to the v3.6.x patch releases milestone. Thanks!