useQuery - data and error not updating with refetch

[viduli-prime]

I have a query like this,

const { data, error, refetch } = useQuery(QUERY, { fetchPolicy: "network-only", nextFetchPolicy: "network-only" })

When I call refetch and if the API returns an error, both data and error don’t update. error is null, and data holds the values from the last successful fetch. Although, the promise returned from refetch rejects with the error. Is that the intended behavior? If so, how do I get data to clear when the api returns an error?

Intended outcome:
I would expect data to be null and error to contain the error.

Actual outcome:
data and error contain the values from the previous fetch.

How to reproduce the issue:
Try a query like the above, API should return a successful result on the first run, and should return an error on the second run. Second run should be triggered by refetch

Versions

  System:
    OS: Linux 5.4 Linux Mint 20.1 (Ulyssa)
  Binaries:
    Node: 14.17.1 - ~/.nvm/versions/node/v14.17.1/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.1/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.1/bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Firefox: 90.0.2
  npmPackages:
    @apollo/client: ^3.4.11 => 3.4.11

[bignimbus]

Hi @viduli-prime 👋🏻 thanks for your patience! This appears to be similar to #8833 so next time we take a fresh look at refetch we'll keep this issue in mind. Again, we really appreciate your patience!

[denis-sokolov]

(Connecting to a related historic ticket for future readers on both sides.)

[jerelmiller]

Hey all 👋

I do believe this issue has been resolved in more recent versions of Apollo Client. We have a test that verifies calling refetch multiple times that return errors render correctly. See this test in our main branch in the latest v3 version:

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

Lines 4831 to 4926 in cacb4e1

	it("should render multiple errors when refetching", async () => {
	const query = gql`
	{
	hello
	}
	`;
	const mocks = [
	{
	request: { query },
	result: {
	errors: [new GraphQLError("error 1")],
	},
	},
	{
	request: { query },
	result: {
	errors: [new GraphQLError("error 2")],
	},
	delay: 10,
	},
	];
	const cache = new InMemoryCache();
	const wrapper = ({ children }: any) => (
	<MockedProvider mocks={mocks} cache={cache}>
	{children}
	</MockedProvider>
	);
	using _disabledAct = disableActEnvironment();
	const { takeSnapshot, getCurrentSnapshot } =
	await renderHookToSnapshotStream(
	() => useQuery(query, { notifyOnNetworkStatusChange: true }),
	{ wrapper }
	);
	{
	const result = await takeSnapshot();
	expect(result).toEqualQueryResult({
	data: undefined,
	called: true,
	loading: true,
	networkStatus: NetworkStatus.loading,
	previousData: undefined,
	variables: {},
	});
	}
	{
	const result = await takeSnapshot();
	expect(result).toEqualQueryResult({
	data: undefined,
	error: new ApolloError({ graphQLErrors: [{ message: "error 1" }] }),
	called: true,
	loading: false,
	networkStatus: NetworkStatus.error,
	previousData: undefined,
	variables: {},
	});
	}
	await expect(getCurrentSnapshot().refetch()).rejects.toEqual(
	new ApolloError({ graphQLErrors: [{ message: "error 2" }] })
	);
	{
	const result = await takeSnapshot();
	expect(result).toEqualQueryResult({
	data: undefined,
	called: true,
	loading: true,
	networkStatus: NetworkStatus.refetch,
	previousData: undefined,
	variables: {},
	});
	}
	{
	const result = await takeSnapshot();
	expect(result).toEqualQueryResult({
	data: undefined,
	error: new ApolloError({ graphQLErrors: [{ message: "error 2" }] }),
	called: true,
	loading: false,
	networkStatus: NetworkStatus.error,
	previousData: undefined,
	variables: {},
	});
	}
	await expect(takeSnapshot).not.toRerender();
	});

We've also tested this a bit more thoroughly with our 4.0 branch to ensure notifyOnNetworkStatusChange will render correctly whether its disabled or not. See these tests:

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

Lines 3832 to 4019 in ddf196a

	it("should render multiple errors when refetching with notifyOnNetworkStatusChange: true", async () => {
	const query = gql`
	{
	hello
	}
	`;
	const mocks = [
	{
	request: { query },
	result: {
	errors: [new GraphQLError("error 1")],
	},
	},
	{
	request: { query },
	result: {
	errors: [new GraphQLError("error 2")],
	},
	delay: 10,
	},
	];
	const cache = new InMemoryCache();
	const wrapper = ({ children }: any) => (
	<MockedProvider mocks={mocks} cache={cache}>
	{children}
	</MockedProvider>
	);
	using _disabledAct = disableActEnvironment();
	const { takeSnapshot, getCurrentSnapshot } =
	await renderHookToSnapshotStream(
	() => useQuery(query, { notifyOnNetworkStatusChange: true }),
	{ wrapper }
	);
	{
	const result = await takeSnapshot();
	expect(result).toStrictEqualTyped({
	data: undefined,
	dataState: "empty",
	loading: true,
	networkStatus: NetworkStatus.loading,
	previousData: undefined,
	variables: {},
	});
	}
	{
	const result = await takeSnapshot();
	expect(result).toStrictEqualTyped({
	data: undefined,
	dataState: "empty",
	error: new CombinedGraphQLErrors({
	errors: [{ message: "error 1" }],
	}),
	loading: false,
	networkStatus: NetworkStatus.error,
	previousData: undefined,
	variables: {},
	});
	}
	await expect(getCurrentSnapshot().refetch()).rejects.toEqual(
	new CombinedGraphQLErrors({ errors: [{ message: "error 2" }] })
	);
	{
	const result = await takeSnapshot();
	expect(result).toStrictEqualTyped({
	data: undefined,
	dataState: "empty",
	loading: true,
	networkStatus: NetworkStatus.refetch,
	previousData: undefined,
	variables: {},
	});
	}
	{
	const result = await takeSnapshot();
	expect(result).toStrictEqualTyped({
	data: undefined,
	dataState: "empty",
	error: new CombinedGraphQLErrors({
	errors: [{ message: "error 2" }],
	}),
	loading: false,
	networkStatus: NetworkStatus.error,
	previousData: undefined,
	variables: {},
	});
	}
	await expect(takeSnapshot).not.toRerender();
	});
	it("should render multiple errors when refetching with notifyOnNetworkStatusChange: false", async () => {
	const query = gql`
	{
	hello
	}
	`;
	const mocks = [
	{
	request: { query },
	result: {
	errors: [new GraphQLError("error 1")],
	},
	},
	{
	request: { query },
	result: {
	errors: [new GraphQLError("error 2")],
	},
	delay: 10,
	},
	];
	const cache = new InMemoryCache();
	const wrapper = ({ children }: any) => (
	<MockedProvider mocks={mocks} cache={cache}>
	{children}
	</MockedProvider>
	);
	using _disabledAct = disableActEnvironment();
	const { takeSnapshot, getCurrentSnapshot } =
	await renderHookToSnapshotStream(
	() => useQuery(query, { notifyOnNetworkStatusChange: false }),
	{ wrapper }
	);
	{
	const result = await takeSnapshot();
	expect(result).toStrictEqualTyped({
	data: undefined,
	dataState: "empty",
	loading: true,
	networkStatus: NetworkStatus.loading,
	previousData: undefined,
	variables: {},
	});
	}
	{
	const result = await takeSnapshot();
	expect(result).toStrictEqualTyped({
	data: undefined,
	dataState: "empty",
	error: new CombinedGraphQLErrors({
	errors: [{ message: "error 1" }],
	}),
	loading: false,
	networkStatus: NetworkStatus.error,
	previousData: undefined,
	variables: {},
	});
	}
	await expect(getCurrentSnapshot().refetch()).rejects.toEqual(
	new CombinedGraphQLErrors({ errors: [{ message: "error 2" }] })
	);
	{
	const result = await takeSnapshot();
	expect(result).toStrictEqualTyped({
	data: undefined,
	dataState: "empty",
	error: new CombinedGraphQLErrors({
	errors: [{ message: "error 2" }],
	}),
	loading: false,
	networkStatus: NetworkStatus.error,
	previousData: undefined,
	variables: {},
	});
	}
	await expect(takeSnapshot).not.toRerender();
	});

4.0 also does a lot of work with errors to consolidate to a single error property from useQuery so it should be less confusing than 3.x where sometimes error is set and other times errors is set.

Since this seems to be addressed in more recent 3.x versions and working in our 4.0 branch, I'm going to go ahead and close this. Please try out our latest 4.0 alpha and provide any feedback you may have! If you still see issues with the 4.0 alpha, please open a separate issue with a reproduction so that we can address the issue. Thanks so much!

[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.