fix: (react) explicitly overwrite error variable in state (#3860)

Author: BelgianNoise

.changeset/bright-jobs-shout.md

@@ -0,0 +1,5 @@
+---
+'urql': patch
+---
+
+don't persist error state of old gql responses after refetch in react state

packages/react-urql/src/hooks/state.test.ts

@@ -0,0 +1,42 @@
+import { it, expect, describe } from 'vitest';
+import { computeNextState, initialState } from './state';
+
+describe('computeNextState', () => {
+  it('clears error when new result does not include an error key', () => {
+    const prevState = { ...initialState, error: new Error('old error') };
+    const result = { fetching: false };
+    const newState = computeNextState(prevState, result);
+    expect(newState.data).toBeUndefined();
+    expect(newState.error).toBeUndefined();
+    expect(newState.fetching).toBe(false);
+  });
+
+  it('preserves error when new result is still fetching', () => {
+    const error = new Error('old error');
+    const prevState = { ...initialState, error };
+    const result = { fetching: true };
+    const newState = computeNextState(prevState, result);
+    expect(newState.data).toBeUndefined();
+    expect(newState.error).toBe(error);
+    expect(newState.fetching).toBe(true);
+  });
+
+  it('sets error when new result has an error', () => {
+    const error = new Error('something went wrong');
+    const result = { fetching: false, error };
+    const newState = computeNextState(initialState, result as any);
+    expect(newState.data).toBeUndefined();
+    expect(newState.error).toBe(error);
+    expect(newState.fetching).toBe(false);
+  });
+
+  it('preserves data when result has no data and no error', () => {
+    const data = { foo: 1 };
+    const prevState = { ...initialState, data };
+    const result = { fetching: false };
+    const newState = computeNextState(prevState, result);
+    expect(newState.data).toBe(data);
+    expect(newState.error).toBeUndefined();
+    expect(newState.fetching).toBe(false);
+  });
+});

packages/react-urql/src/hooks/state.ts

@@ -55,6 +55,7 @@ export const computeNextState = <T extends Stateish>(
       result.data !== undefined || result.error ? result.data : prevState.data,
     fetching: !!result.fetching,
     stale: !!result.stale,
+    error: result.fetching ? prevState.error : result.error,
   };
 
   return isShallowDifferent(prevState, newState) ? newState : prevState;