Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
Fix re-rendering when another component reuses the same query (#3195)
Co-authored-by: Phil Pluckthun <phil@kitten.sh>
authored by
Nathan
Phil Pluckthun
and committed by
GitHub
b6658281
9d793b2b
+30
-6
+5
.changeset/fifty-sheep-battle.md
+5
.changeset/fifty-sheep-battle.md
+1
-1
CONTRIBUTING.md
+1
-1
CONTRIBUTING.md
+24
-5
packages/react-urql/src/hooks/state.ts
+24
-5
packages/react-urql/src/hooks/state.ts
···
9
9
operation: undefined,
10
10
};
11
11
12
-
const isShallowDifferent = (a: any, b: any) => {
13
-
if (typeof a != 'object' || typeof b != 'object') return a !== b;
14
-
for (const x in a) if (!(x in b)) return true;
15
-
for (const x in b) if (a[x] !== b[x]) return true;
12
+
// Two operations are considered equal if they have the same key
13
+
const areOperationsEqual = (
14
+
a: { key: number } | undefined,
15
+
b: { key: number } | undefined
16
+
) => {
17
+
return a === b || !!(a && b && a.key === b.key);
18
+
};
19
+
20
+
/**
21
+
* Checks if two objects are shallowly different with a special case for
22
+
* 'operation' where it compares the key if they are not the otherwise equal
23
+
*/
24
+
const isShallowDifferent = <T extends Record<string, any>>(a: T, b: T) => {
25
+
for (const key in a) if (!(key in b)) return true;
26
+
for (const key in b) {
27
+
if (
28
+
key === 'operation'
29
+
? !areOperationsEqual(a[key], b[key])
30
+
: a[key] !== b[key]
31
+
) {
32
+
return true;
33
+
}
34
+
}
16
35
return false;
17
36
};
18
37
···
27
46
prevState: T,
28
47
result: Partial<T>
29
48
): T => {
30
-
const newState = {
49
+
const newState: T = {
31
50
...prevState,
32
51
...result,
33
52
data: