diff --git a/.changeset/perfect-worms-deliver.md b/.changeset/perfect-worms-deliver.md new file mode 100644 index 0000000000..39a1bc79d8 --- /dev/null +++ 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 index ba818ed2dd..0e3a86bc35 100644 --- 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 index 2353462d46..0477ad3895 100644 --- 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 index 20c7322e24..acfc9c7263 100644 --- 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 );