Promise thrown by useSuspenseQuery gets stuck "pending" forever when fetchMore request fails

[qiuzhangxi77]

Issue Description

ErrorBoundary cannot catch the error throw by the useSuspenseQuery, since the promise throw by useSuspenseQuery is always pending when fetchMore request promise was rejected caused by some errors.

This is what I found when viewing the implementation.

1. fetchMore will setPromise with this.promise in QueryReference.ts. it is different with returnedPromise returned by fetchQuery.
2. this.promise is created as pending promise in initiateFetch and keep pending during the whole process of fecthMore, except returnedPromise is fulfilled.
3. returnedPromise handles error capture with the callback catch(() => {})

private initiateFetch(returnedPromise: Promise<ApolloQueryResult<TData>>) {
    this.promise = this.createPendingPromise();
    this.promise.catch(() => {});

    returnedPromise
      .then(() => {
        setTimeout(() => {
          if (this.promise.status === "pending") {
            // See the following for more information:
            // https://github.com/apollographql/apollo-client/issues/11642
            this.result = this.observable.getCurrentResult();
            this.resolve?.(this.result);
          }
        });
      })
      .catch(() => {});

    return returnedPromise;
  }

4. this.promise is still in pending even though the returnedPromise is rejected.
5. this.promise is what the suspense waits for in my example.

Therefore, after executing "fetchMore", the promise throw by useSuspenseQuery is always pending.

Link to Reproduction

Reproduction in code sandbox here

Reproduction Steps
easy to reproduce, just make sure the fetchMore request has an error, like network error or variables error...

@apollo/client version

3.8.8

just tested a solution provider by @destin-estrela , which appears to work from.

modified   src/react/internal/cache/QueryReference.ts
@@ -486,7 +486,11 @@ export class InternalQueryReference<TData = unknown> {
          }
        });
      })
-      .catch(() => {});
+      .catch((error) => {
+        if (this.promise.status === "pending") {
+          this.handleError(error);
+        }

[phryneas]

Hi @qiuzhangxi77, thank you for the bug report, reproduction and solution pointer - that's an amazing level of effort!

We're all just back from conferences and part of our team is still out, so we'll need a few days to catch up, but it's really appreciated and we'll take a look as soon as we can!

[qiuzhangxi77]

Hi @phryneas, thank you for push it in fix progress so quickly!! I also wanted to mention that I had a similar issue with the refetch method not throwing errors correctly from the useSuspenseQuery.

[jerelmiller]

Hey @qiuzhangxi77 👋

Good catch! I opened #12110 which should fix this. Thanks for the detailed report! Made it easy to fix 🙂

As for refetch, are you able to create a reproduction of that? We have that tested fairly well with all error policies. See these tests for refetch with returned errors and different error policies:

apollo-client/src/react/hooks/__tests__/useSuspenseQuery.test.tsx

Lines 4510 to 4780 in f36b938

	it("throws errors when errors are returned after calling `refetch`", async () => {
	using _consoleSpy = spyOnConsole("error");
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() => useSuspenseQuery(query, { variables: { id: "1" } }),
	{ mocks }
	);
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	});
	});
	act(() => {
	result.current.refetch();
	});
	await waitFor(() => {
	expect(renders.errorCount).toBe(1);
	});
	expect(renders.errors).toEqual([
	new ApolloError({
	graphQLErrors: [new GraphQLError("Something went wrong")],
	}),
	]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	]);
	});
	it('ignores errors returned after calling `refetch` when errorPolicy is set to "ignore"', async () => {
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() =>
	useSuspenseQuery(query, {
	errorPolicy: "ignore",
	variables: { id: "1" },
	}),
	{ mocks }
	);
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	});
	});
	await act(async () => {
	await result.current.refetch();
	});
	expect(renders.errorCount).toBe(0);
	expect(renders.errors).toEqual([]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	]);
	});
	it('returns errors after calling `refetch` when errorPolicy is set to "all"', async () => {
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() =>
	useSuspenseQuery(query, {
	errorPolicy: "all",
	variables: { id: "1" },
	}),
	{ mocks }
	);
	const expectedError = new ApolloError({
	graphQLErrors: [new GraphQLError("Something went wrong")],
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	});
	});
	act(() => {
	result.current.refetch();
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	});
	});
	expect(renders.errorCount).toBe(0);
	expect(renders.errors).toEqual([]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	},
	]);
	});
	it('handles partial data results after calling `refetch` when errorPolicy is set to "all"', async () => {
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: null } },
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() =>
	useSuspenseQuery(query, {
	errorPolicy: "all",
	variables: { id: "1" },
	}),
	{ mocks }
	);
	const expectedError = new ApolloError({
	graphQLErrors: [new GraphQLError("Something went wrong")],
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	error: undefined,
	});
	});
	act(() => {
	result.current.refetch();
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	data: mocks[1].result.data,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	});
	});
	expect(renders.errorCount).toBe(0);
	expect(renders.errors).toEqual([]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	{
	data: mocks[1].result.data,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	},
	]);
	});

[qiuzhangxi77]

Hey @qiuzhangxi77 👋

Good catch! I opened #12110 which should fix this. Thanks for the detailed report! Made it easy to fix 🙂

As for refetch, are you able to create a reproduction of that? We have that tested fairly well with all error policies. See these tests for refetch with returned errors and different error policies:

apollo-client/src/react/hooks/__tests__/useSuspenseQuery.test.tsx

Lines 4510 to 4780 in f36b938

	it("throws errors when errors are returned after calling `refetch`", async () => {
	using _consoleSpy = spyOnConsole("error");
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() => useSuspenseQuery(query, { variables: { id: "1" } }),
	{ mocks }
	);
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	});
	});
	act(() => {
	result.current.refetch();
	});
	await waitFor(() => {
	expect(renders.errorCount).toBe(1);
	});
	expect(renders.errors).toEqual([
	new ApolloError({
	graphQLErrors: [new GraphQLError("Something went wrong")],
	}),
	]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	]);
	});
	it('ignores errors returned after calling `refetch` when errorPolicy is set to "ignore"', async () => {
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() =>
	useSuspenseQuery(query, {
	errorPolicy: "ignore",
	variables: { id: "1" },
	}),
	{ mocks }
	);
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	});
	});
	await act(async () => {
	await result.current.refetch();
	});
	expect(renders.errorCount).toBe(0);
	expect(renders.errors).toEqual([]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	]);
	});
	it('returns errors after calling `refetch` when errorPolicy is set to "all"', async () => {
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() =>
	useSuspenseQuery(query, {
	errorPolicy: "all",
	variables: { id: "1" },
	}),
	{ mocks }
	);
	const expectedError = new ApolloError({
	graphQLErrors: [new GraphQLError("Something went wrong")],
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	});
	});
	act(() => {
	result.current.refetch();
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	});
	});
	expect(renders.errorCount).toBe(0);
	expect(renders.errors).toEqual([]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	},
	]);
	});
	it('handles partial data results after calling `refetch` when errorPolicy is set to "all"', async () => {
	const query = gql`
	query UserQuery($id: String!) {
	user(id: $id) {
	id
	name
	}
	}
	`;
	const mocks = [
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: "Captain Marvel" } },
	},
	},
	{
	request: { query, variables: { id: "1" } },
	result: {
	data: { user: { id: "1", name: null } },
	errors: [new GraphQLError("Something went wrong")],
	},
	},
	];
	const { result, renders } = renderSuspenseHook(
	() =>
	useSuspenseQuery(query, {
	errorPolicy: "all",
	variables: { id: "1" },
	}),
	{ mocks }
	);
	const expectedError = new ApolloError({
	graphQLErrors: [new GraphQLError("Something went wrong")],
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	...mocks[0].result,
	error: undefined,
	});
	});
	act(() => {
	result.current.refetch();
	});
	await waitFor(() => {
	expect(result.current).toMatchObject({
	data: mocks[1].result.data,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	});
	});
	expect(renders.errorCount).toBe(0);
	expect(renders.errors).toEqual([]);
	expect(renders.frames).toMatchObject([
	{
	...mocks[0].result,
	networkStatus: NetworkStatus.ready,
	error: undefined,
	},
	{
	data: mocks[1].result.data,
	networkStatus: NetworkStatus.error,
	error: expectedError,
	},
	]);
	});

Hi @jerelmiller , thank you for the quickly fix!! I made a simple example, and it works fine. Maybe I used it incorrectly in my project, which caused the error not to be thrown normally.

[github-actions]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[jerelmiller]

@qiuzhangxi77 glad to hear its working there! I've gone ahead and merged #12110 and will get that released shortly. Feel free to open a new issue if you end up figuring out that Apollo Client has a bug with refetch. Hope you're able to figure that one out! I'd check errorPolicy to see if you're setting to to something other than none because refetch won't throw in those cases.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.