Mirror: The highly customizable and versatile GraphQL client with which you add on features like normalized caching as you grow.
feat(solid): reconcile data updates (#3674)
authored by
Iha Shin (신의하)
and committed by
GitHub
63082110
b9f34fd1
+59
-36
+5
.changeset/perfect-worms-deliver.md
+5
.changeset/perfect-worms-deliver.md
+11
-8
packages/solid-urql/src/createMutation.ts
+11
-8
packages/solid-urql/src/createMutation.ts
···
1
-
import { createStore } from 'solid-js/store';
1
+
import { createStore, reconcile } from 'solid-js/store';
2
2
import {
3
3
type AnyVariables,
4
4
type DocumentInput,
···
10
10
} from '@urql/core';
11
11
import { useClient } from './context';
12
12
import { pipe, onPush, filter, take, toPromise } from 'wonka';
13
+
import { batch } from 'solid-js';
13
14
14
15
export type CreateMutationState<
15
16
Data = any,
···
158
159
return pipe(
159
160
client.executeMutation(request, context),
160
161
onPush(result => {
161
-
setState({
162
-
fetching: false,
163
-
stale: result.stale,
164
-
data: result.data,
165
-
error: result.error,
166
-
extensions: result.extensions,
167
-
operation: result.operation,
162
+
batch(() => {
163
+
setState('data', reconcile(result.data));
164
+
setState({
165
+
fetching: false,
166
+
stale: result.stale,
167
+
error: result.error,
168
+
extensions: result.extensions,
169
+
operation: result.operation,
170
+
});
168
171
});
169
172
}),
170
173
filter(result => !result.hasNext),
+14
-11
packages/solid-urql/src/createQuery.ts
+14
-11
packages/solid-urql/src/createQuery.ts
···
7
7
createRequest,
8
8
} from '@urql/core';
9
9
import {
10
+
batch,
10
11
createComputed,
11
12
createMemo,
12
13
createResource,
13
14
createSignal,
14
15
onCleanup,
15
16
} from 'solid-js';
16
-
import { createStore, produce } from 'solid-js/store';
17
+
import { createStore, produce, reconcile } from 'solid-js/store';
17
18
import { useClient } from './context';
18
19
import { type MaybeAccessor, asAccessor } from './utils';
19
20
import type { Source, Subscription } from 'wonka';
···
258
259
);
259
260
}),
260
261
subscribe(res => {
261
-
setResult(
262
-
produce(draft => {
263
-
draft.data = res.data;
264
-
draft.stale = !!res.stale;
265
-
draft.fetching = false;
266
-
draft.error = res.error;
267
-
draft.operation = res.operation;
268
-
draft.extensions = res.extensions;
269
-
})
270
-
);
262
+
batch(() => {
263
+
setResult('data', reconcile(res.data));
264
+
setResult(
265
+
produce(draft => {
266
+
draft.stale = !!res.stale;
267
+
draft.fetching = false;
268
+
draft.error = res.error;
269
+
draft.operation = res.operation;
270
+
draft.extensions = res.extensions;
271
+
})
272
+
);
273
+
});
271
274
})
272
275
).unsubscribe
273
276
);
+29
-17
packages/solid-urql/src/createSubscription.ts
+29
-17
packages/solid-urql/src/createSubscription.ts
···
9
9
createRequest,
10
10
} from '@urql/core';
11
11
import { useClient } from './context';
12
-
import { createStore, produce } from 'solid-js/store';
13
-
import { createComputed, createSignal, onCleanup } from 'solid-js';
12
+
import { createStore, produce, reconcile } from 'solid-js/store';
13
+
import {
14
+
batch,
15
+
createComputed,
16
+
createSignal,
17
+
onCleanup,
18
+
untrack,
19
+
} from 'solid-js';
14
20
import { type Source, onEnd, pipe, subscribe } from 'wonka';
15
21
16
22
/** Triggers {@link createSubscription} to re-execute a GraphQL subscription operation.
···
266
272
);
267
273
}),
268
274
subscribe(res => {
269
-
setState(
270
-
produce(draft => {
271
-
draft.data =
272
-
res.data !== undefined
273
-
? typeof handler === 'function'
274
-
? handler(draft.data, res.data)
275
-
: res.data
276
-
: (draft.data as any);
277
-
draft.stale = !!res.stale;
278
-
draft.fetching = true;
279
-
draft.error = res.error;
280
-
draft.operation = res.operation;
281
-
draft.extensions = res.extensions;
282
-
})
283
-
);
275
+
batch(() => {
276
+
if (res.data !== undefined) {
277
+
const newData =
278
+
typeof handler === 'function'
279
+
? handler(
280
+
untrack(() => state.data),
281
+
res.data
282
+
)
283
+
: (res.data as Result);
284
+
setState('data', reconcile(newData));
285
+
}
286
+
setState(
287
+
produce(draft => {
288
+
draft.stale = !!res.stale;
289
+
draft.fetching = true;
290
+
draft.error = res.error;
291
+
draft.operation = res.operation;
292
+
draft.extensions = res.extensions;
293
+
})
294
+
);
295
+
});
284
296
})
285
297
).unsubscribe
286
298
);