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
     );