Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
(react) - shield for cross-component updates (#1383)
* shield for cross-component updates
* add changeset
authored by
Jovi De Croock
and committed by
GitHub
d7214161
32c193b7
+24
-11
+5
.changeset/silly-walls-cover.md
+5
.changeset/silly-walls-cover.md
+19
-11
packages/react-urql/src/hooks/useQuery.ts
+19
-11
packages/react-urql/src/hooks/useQuery.ts
···
44
44
const isSuspense = (client: Client, context?: Partial<OperationContext>) =>
45
45
client.suspense && (!context || context.suspense !== false);
46
46
47
+
let currentInit = false;
48
+
47
49
export function useQuery<Data = any, Variables = object>(
48
50
args: UseQueryArgs<Variables, Data>
49
51
): UseQueryResponse<Data, Variables> {
···
117
119
args.pause,
118
120
] as const;
119
121
120
-
const [state, setState] = useState(
121
-
() =>
122
-
[
122
+
const [state, setState] = useState(() => {
123
+
currentInit = true;
124
+
try {
125
+
return [
123
126
source,
124
127
computeNextState(initialState, getSnapshot(source, suspense)),
125
128
deps,
126
-
] as const
127
-
);
129
+
] as const;
130
+
} finally {
131
+
currentInit = false;
132
+
}
133
+
});
128
134
129
135
let currentResult = state[1];
130
136
if (source !== state[0] && hasDepsChanged(state[2], deps)) {
···
146
152
147
153
const updateResult = (result: Partial<UseQueryState<Data, Variables>>) => {
148
154
hasResult = true;
149
-
setState(state => {
150
-
const nextResult = computeNextState(state[1], result);
151
-
return state[1] !== nextResult
152
-
? [state[0], nextResult, state[2]]
153
-
: state;
154
-
});
155
+
if (!currentInit) {
156
+
setState(state => {
157
+
const nextResult = computeNextState(state[1], result);
158
+
return state[1] !== nextResult
159
+
? [state[0], nextResult, state[2]]
160
+
: state;
161
+
});
162
+
}
155
163
};
156
164
157
165
if (source) {