feat(solid): reconcile data updates (#3674)

urql-graphql · Sep 14, 2024 · 6308211 · 6308211
1 parent b9f34fd
commit 6308211
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 36 deletions.
diff --git a/.changeset/perfect-worms-deliver.md b/.changeset/perfect-worms-deliver.md
@@ -0,0 +1,5 @@
+---
+'@urql/solid': patch
+---
+
+feat(solid): reconcile data updates
diff --git a/packages/solid-urql/src/createMutation.ts b/packages/solid-urql/src/createMutation.ts
@@ -1,4 +1,4 @@
-import { createStore } from 'solid-js/store';
+import { createStore, reconcile } from 'solid-js/store';
 import {
  type AnyVariables,
  type DocumentInput,
@@ -10,6 +10,7 @@ import {
 } from '@urql/core';
 import { useClient } from './context';
 import { pipe, onPush, filter, take, toPromise } from 'wonka';
+import { batch } from 'solid-js';
 
 export type CreateMutationState<
  Data = any,
@@ -158,13 +159,15 @@ export const createMutation = <
  return pipe(
  client.executeMutation(request, context),
  onPush(result => {
- setState({
- fetching: false,
- stale: result.stale,
- data: result.data,
- error: result.error,
- extensions: result.extensions,
- operation: result.operation,
+ batch(() => {
+ setState('data', reconcile(result.data));
+ setState({
+ fetching: false,
+ stale: result.stale,
+ error: result.error,
+ extensions: result.extensions,
+ operation: result.operation,
+ });
  });
  }),
  filter(result => !result.hasNext),

diff --git a/packages/solid-urql/src/createQuery.ts b/packages/solid-urql/src/createQuery.ts
@@ -7,13 +7,14 @@ import {
  createRequest,
 } from '@urql/core';
 import {
+ batch,
  createComputed,
  createMemo,
  createResource,
  createSignal,
  onCleanup,
 } from 'solid-js';
-import { createStore, produce } from 'solid-js/store';
+import { createStore, produce, reconcile } from 'solid-js/store';
 import { useClient } from './context';
 import { type MaybeAccessor, asAccessor } from './utils';
 import type { Source, Subscription } from 'wonka';
@@ -258,16 +259,18 @@ export const createQuery = <
  );
  }),
  subscribe(res => {
- setResult(
- produce(draft => {
- draft.data = res.data;
- draft.stale = !!res.stale;
- draft.fetching = false;
- draft.error = res.error;
- draft.operation = res.operation;
- draft.extensions = res.extensions;
- })
- );
+ batch(() => {
+ setResult('data', reconcile(res.data));
+ setResult(
+ produce(draft => {
+ draft.stale = !!res.stale;
+ draft.fetching = false;
+ draft.error = res.error;
+ draft.operation = res.operation;
+ draft.extensions = res.extensions;
+ })
+ );
+ });
  })
  ).unsubscribe
  );

diff --git a/packages/solid-urql/src/createSubscription.ts b/packages/solid-urql/src/createSubscription.ts
@@ -9,8 +9,14 @@ import {
  createRequest,
 } from '@urql/core';
 import { useClient } from './context';
-import { createStore, produce } from 'solid-js/store';
-import { createComputed, createSignal, onCleanup } from 'solid-js';
+import { createStore, produce, reconcile } from 'solid-js/store';
+import {
+ batch,
+ createComputed,
+ createSignal,
+ onCleanup,
+ untrack,
+} from 'solid-js';
 import { type Source, onEnd, pipe, subscribe } from 'wonka';
 
 /** Triggers {@link createSubscription} to re-execute a GraphQL subscription operation.
@@ -266,21 +272,27 @@ export const createSubscription = <
  );
  }),
  subscribe(res => {
- setState(
- produce(draft => {
- draft.data =
- res.data !== undefined
- ? typeof handler === 'function'
- ? handler(draft.data, res.data)
- : res.data
- : (draft.data as any);
- draft.stale = !!res.stale;
- draft.fetching = true;
- draft.error = res.error;
- draft.operation = res.operation;
- draft.extensions = res.extensions;
- })
- );
+ batch(() => {
+ if (res.data !== undefined) {
+ const newData =
+ typeof handler === 'function'
+ ? handler(
+ untrack(() => state.data),
+ res.data
+ )
+ : (res.data as Result);
+ setState('data', reconcile(newData));
+ }
+ setState(
+ produce(draft => {
+ draft.stale = !!res.stale;
+ draft.fetching = true;
+ draft.error = res.error;
+ draft.operation = res.operation;
+ draft.extensions = res.extensions;
+ })
+ );
+ });
  })
  ).unsubscribe
  );