@sanity/sdk 0.0.0-chore-react-18-compat.1 → 0.0.0-chore-react-18-compat.3

package/src/projection/subscribeToStateAndFetchBatches.ts

@@ -1,104 +1,159 @@
-import {type SanityClient, type SyncTag} from '@sanity/client'
+import {isEqual} from 'lodash-es'
 import {
   combineLatest,
   debounceTime,
+  defer,
   distinctUntilChanged,
   EMPTY,
+  filter,
+  from,
   map,
   Observable,
   pairwise,
   startWith,
+  Subscription,
   switchMap,
   tap,
-  withLatestFrom,
 } from 'rxjs'
 
-import {getClientState} from '../client/clientStore'
-import {type ActionContext, createInternalAction} from '../resources/createAction'
-import {createProjectionQuery, processProjectionQuery} from './projectionQuery'
-import {type ProjectionQueryResult, type ProjectionStoreState} from './projectionStore'
-import {PROJECTION_TAG} from './util'
+import {getQueryState, resolveQuery} from '../query/queryStore'
+import {type StoreContext} from '../store/defineStore'
+import {
+  createProjectionQuery,
+  processProjectionQuery,
+  type ProjectionQueryResult,
+} from './projectionQuery'
+import {type ProjectionStoreState} from './types'
+import {PROJECTION_PERSPECTIVE, PROJECTION_TAG} from './util'
 
 const BATCH_DEBOUNCE_TIME = 50
 
-export const subscribeToStateAndFetchBatches = createInternalAction(
-  ({state, instance}: ActionContext<ProjectionStoreState>) => {
-    return function () {
-      const client$ = new Observable<SanityClient>((observer) =>
-        getClientState(instance, {apiVersion: 'vX'}).observable.subscribe(observer),
-      )
-
-      const documentProjections$ = state.observable.pipe(
-        map((i) => i.documentProjections),
-        distinctUntilChanged(),
-      )
-      const lastLiveEventId$ = state.observable.pipe(
-        map((i) => i.lastLiveEventId),
-        distinctUntilChanged(),
-      )
-
-      const newSubscriberIds$ = state.observable.pipe(
-        map(({subscriptions}) => new Set(Object.keys(subscriptions))),
-        distinctUntilChanged((a, b) =>
-          a.size !== b.size ? false : Array.from(a).every((i) => b.has(i)),
-        ),
-        debounceTime(BATCH_DEBOUNCE_TIME),
-        startWith(new Set<string>()),
-        pairwise(),
-        tap(([prevIds, currIds]) => {
-          // for all new subscriptions, set their values to pending
-          const newIds = [...currIds].filter((element) => !prevIds.has(element))
-          state.set('updatingPending', (prev) => {
-            const pendingValues = newIds.reduce<ProjectionStoreState['values']>((acc, id) => {
-              const prevValue = prev.values[id]
-              const value = prevValue?.data ? prevValue.data : null
-              acc[id] = {data: value, isPending: true}
-              return acc
-            }, {})
-            return {values: {...prev.values, ...pendingValues}}
+const isSetEqual = <T>(a: Set<T>, b: Set<T>) =>
+  a.size === b.size && Array.from(a).every((i) => b.has(i))
+
+export const subscribeToStateAndFetchBatches = ({
+  state,
+  instance,
+}: StoreContext<ProjectionStoreState>): Subscription => {
+  const documentProjections$ = state.observable.pipe(
+    map((s) => s.documentProjections),
+    distinctUntilChanged(isEqual),
+  )
+
+  const activeDocumentIds$ = state.observable.pipe(
+    map(({subscriptions}) => new Set(Object.keys(subscriptions))),
+    distinctUntilChanged(isSetEqual),
+  )
+
+  const pendingUpdateSubscription = activeDocumentIds$
+    .pipe(
+      debounceTime(BATCH_DEBOUNCE_TIME),
+      startWith(new Set<string>()),
+      pairwise(),
+      tap(([prevIds, currIds]) => {
+        const newIds = [...currIds].filter((id) => !prevIds.has(id))
+        if (newIds.length === 0) return
+
+        state.set('updatingPending', (prev) => {
+          const nextValues = {...prev.values}
+          for (const id of newIds) {
+            const projectionsForDoc = prev.documentProjections[id]
+            if (!projectionsForDoc) continue
+
+            const currentValuesForDoc = prev.values[id] ?? {}
+            const updatedValuesForDoc = {...currentValuesForDoc}
+
+            for (const hash in projectionsForDoc) {
+              const currentValue = updatedValuesForDoc[hash]
+              updatedValuesForDoc[hash] = {
+                data: currentValue?.data ?? null,
+                isPending: true,
+              }
+            }
+            nextValues[id] = updatedValuesForDoc
+          }
+          return {values: nextValues}
+        })
+      }),
+    )
+    .subscribe()
+
+  const queryTrigger$ = combineLatest([activeDocumentIds$, documentProjections$]).pipe(
+    debounceTime(BATCH_DEBOUNCE_TIME),
+    distinctUntilChanged(isEqual),
+  )
+
+  const queryExecutionSubscription = queryTrigger$
+    .pipe(
+      switchMap(([ids, documentProjections]) => {
+        if (!ids.size) return EMPTY
+        const {query, params} = createProjectionQuery(ids, documentProjections)
+        const controller = new AbortController()
+
+        return new Observable<ProjectionQueryResult[]>((observer) => {
+          const {getCurrent, observable} = getQueryState<ProjectionQueryResult[]>(instance, query, {
+            params,
+            tag: PROJECTION_TAG,
+            perspective: PROJECTION_PERSPECTIVE,
           })
+
+          const source$ = defer(() => {
+            if (getCurrent() === undefined) {
+              return from(
+                resolveQuery<ProjectionQueryResult[]>(instance, query, {
+                  params,
+                  tag: PROJECTION_TAG,
+                  perspective: PROJECTION_PERSPECTIVE,
+                  signal: controller.signal,
+                }),
+              ).pipe(switchMap(() => observable))
+            }
+            return observable
+          }).pipe(filter((result): result is ProjectionQueryResult[] => result !== undefined))
+
+          const subscription = source$.subscribe(observer)
+
+          return () => {
+            if (!controller.signal.aborted) {
+              controller.abort()
+            }
+            subscription.unsubscribe()
+          }
+        }).pipe(map((data) => ({data, ids})))
+      }),
+      map(({ids, data}) =>
+        processProjectionQuery({
+          projectId: instance.config.projectId!,
+          dataset: instance.config.dataset!,
+          ids,
+          results: data,
         }),
-        withLatestFrom(documentProjections$),
-        map(([[, ids], documentProjections]) => ({ids, documentProjections})),
-      )
-
-      return combineLatest([newSubscriberIds$, lastLiveEventId$, client$])
-        .pipe(
-          switchMap(([{ids, documentProjections}, lastLiveEventId, client]) => {
-            if (!ids.size) return EMPTY
-            const {query, params} = createProjectionQuery(ids, documentProjections)
-
-            return client.observable
-              .fetch<ProjectionQueryResult[]>(query, params, {
-                filterResponse: false,
-                returnQuery: false,
-                perspective: 'drafts',
-                tag: PROJECTION_TAG,
-                lastLiveEventId,
-              })
-              .pipe(map((response) => ({...response, ids})))
-          }),
-          map(({ids, result, syncTags}) => ({
-            syncTags,
-            values: processProjectionQuery({
-              projectId: instance.identity.projectId,
-              dataset: instance.identity.dataset,
-              ids,
-              results: result,
-            }),
-          })),
-        )
-        .subscribe({
-          next: ({syncTags = [], values}) => {
-            state.set('updateResult', (prev) => ({
-              values: {...prev.values, ...values},
-              syncTags: syncTags.reduce<Record<SyncTag, true>>((acc, next) => {
-                acc[next] = true
-                return acc
-              }, {}),
-            }))
-          },
+      ),
+    )
+    .subscribe({
+      next: (processedValues) => {
+        state.set('updateResult', (prev) => {
+          const nextValues = {...prev.values}
+          for (const docId in processedValues) {
+            if (processedValues[docId]) {
+              nextValues[docId] = {
+                ...(prev.values[docId] ?? {}),
+                ...processedValues[docId],
+              }
+            }
+          }
+          return {values: nextValues}
         })
-    }
-  },
-)
+      },
+      error: (err) => {
+        // eslint-disable-next-line no-console
+        console.error('Error fetching projection batches:', err)
+        // TODO: Potentially update state to reflect error state for affected projections?
+      },
+    })
+
+  return new Subscription(() => {
+    pendingUpdateSubscription.unsubscribe()
+    queryExecutionSubscription.unsubscribe()
+  })
+}

package/src/projection/types.ts

@@ -0,0 +1,50 @@
+/**
+ * @public
+ */
+export type ValidProjection = `{${string}}`
+
+/**
+ * @public
+ * The result of a projection query
+ */
+export interface ProjectionValuePending<TValue extends object> {
+  data: TValue | null
+  isPending: boolean
+}
+
+export interface DocumentProjectionValues<TValue extends object = object> {
+  [projectionHash: string]: ProjectionValuePending<TValue>
+}
+
+export interface DocumentProjections {
+  [projectionHash: string]: ValidProjection
+}
+
+interface DocumentProjectionSubscriptions {
+  [projectionHash: string]: {
+    [subscriptionId: string]: true
+  }
+}
+
+export interface ProjectionStoreState<TValue extends object = object> {
+  /**
+   * A map of document IDs to their projection values, organized by projection hash
+   */
+  values: {
+    [documentId: string]: DocumentProjectionValues<TValue>
+  }
+
+  /**
+   * A map of document IDs to their projections, organized by projection hash
+   */
+  documentProjections: {
+    [documentId: string]: DocumentProjections
+  }
+
+  /**
+   * A map of document IDs to their subscriptions, organized by projection hash
+   */
+  subscriptions: {
+    [documentId: string]: DocumentProjectionSubscriptions
+  }
+}

package/src/projection/util.ts

@@ -1,6 +1,8 @@
-import {type ValidProjection} from './projectionStore'
+import {type ValidProjection} from './types'
 
 export const PROJECTION_TAG = 'sdk.projection'
+export const PROJECTION_PERSPECTIVE = 'drafts'
+export const PROJECTION_STATE_CLEAR_DELAY = 1000
 
 export const STABLE_EMPTY_PROJECTION = {
   data: null,

package/src/projects/projects.test.ts

@@ -1,17 +1,26 @@
 import {type SanityClient} from '@sanity/client'
 import {of} from 'rxjs'
-import {describe, it} from 'vitest'
+import {afterEach, beforeEach, describe, it} from 'vitest'
 
 import {getClientState} from '../client/clientStore'
-import {createSanityInstance} from '../instance/sanityInstance'
-import {type StateSource} from '../resources/createStateSourceAction'
+import {createSanityInstance, type SanityInstance} from '../store/createSanityInstance'
+import {type StateSource} from '../store/createStateSourceAction'
 import {resolveProjects} from './projects'
 
 vi.mock('../client/clientStore')
 
 describe('projects', () => {
+  let instance: SanityInstance
+
+  beforeEach(() => {
+    instance = createSanityInstance({projectId: 'p', dataset: 'd'})
+  })
+
+  afterEach(() => {
+    instance.dispose()
+  })
+
   it('calls the `client.observable.projects.list` method on the client and returns the result', async () => {
-    const instance = createSanityInstance({projectId: 'p', dataset: 'd'})
     const projects = [{id: 'a'}, {id: 'b'}]
     const list = vi.fn().mockReturnValue(of(projects))
 

package/src/projects/projects.ts

@@ -3,11 +3,16 @@ import {switchMap} from 'rxjs'
 import {getClientState} from '../client/clientStore'
 import {createFetcherStore} from '../utils/createFetcherStore'
 
+const API_VERSION = 'v2025-02-19'
+
 const projects = createFetcherStore({
   name: 'Projects',
   getKey: () => 'projects',
   fetcher: (instance) => () =>
-    getClientState(instance, {apiVersion: 'vX', scope: 'global'}).observable.pipe(
+    getClientState(instance, {
+      apiVersion: API_VERSION,
+      scope: 'global',
+    }).observable.pipe(
       switchMap((client) => client.observable.projects.list({includeMembers: false})),
     ),
 })

package/src/query/queryStore.test.ts

@@ -3,10 +3,9 @@ import {delay, filter, firstValueFrom, Observable, of, Subject} from 'rxjs'
 import {beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {getClientState} from '../client/clientStore'
-import {createSanityInstance} from '../instance/sanityInstance'
-import {getOrCreateResource} from '../resources/createResource'
-import {type StateSource} from '../resources/createStateSourceAction'
-import {errorHandler, getQueryState, queryStore, resolveQuery} from './queryStore'
+import {createSanityInstance, type SanityInstance} from '../store/createSanityInstance'
+import {type StateSource} from '../store/createStateSourceAction'
+import {getQueryState, resolveQuery} from './queryStore'
 
 vi.mock('./queryStoreConstants', async (importOriginal) => ({
   ...(await importOriginal<typeof import('./queryStoreConstants')>()),
@@ -18,6 +17,7 @@ vi.mock('../client/clientStore', () => ({
 }))
 
 describe('queryStore', () => {
+  let instance: SanityInstance
   let liveEvents: Subject<LiveEvent>
   let fetch: SanityClient['observable']['fetch']
   // Mock data for testing
@@ -29,6 +29,8 @@ describe('queryStore', () => {
   }
 
   beforeEach(() => {
+    instance = createSanityInstance({projectId: 'test', dataset: 'test'})
+
     fetch = vi
       .fn()
       .mockReturnValue(
@@ -50,8 +52,11 @@ describe('queryStore', () => {
     } as StateSource<SanityClient>)
   })
 
+  afterEach(() => {
+    instance.dispose()
+  })
+
   it('initializes query state and cleans up after unsubscribe', async () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const state = getQueryState(instance, query)
 
@@ -78,12 +83,9 @@ describe('queryStore', () => {
 
     // Verify state is cleared
     expect(state.getCurrent()).toBeUndefined()
-
-    instance.dispose()
   })
 
   it('maintains state when multiple subscribers exist', async () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const state = getQueryState(instance, query)
 
@@ -117,12 +119,9 @@ describe('queryStore', () => {
 
     // Verify state is cleared after all subscribers are gone
     expect(state.getCurrent()).toBeUndefined()
-
-    instance.dispose()
   })
 
   it('resolveQuery works without affecting subscriber cleanup', async () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
 
     const state = getQueryState(instance, query)
@@ -151,12 +150,9 @@ describe('queryStore', () => {
     unsubscribe()
     await new Promise((resolve) => setTimeout(resolve, 20))
     expect(state.getCurrent()).toBeUndefined()
-
-    instance.dispose()
   })
 
   it('handles abort signal in resolveQuery', async () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const abortController = new AbortController()
 
@@ -171,8 +167,6 @@ describe('queryStore', () => {
 
     // Verify state is cleared after abort
     expect(getQueryState(instance, query).getCurrent()).toBeUndefined()
-
-    instance.dispose()
   })
 
   it('refetches query when receiving live event with matching sync tag', async () => {
@@ -190,7 +184,6 @@ describe('queryStore', () => {
       ),
     )
 
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const state = getQueryState<{_id: string; _type: string; title: string}[]>(instance, query)
 
@@ -214,7 +207,6 @@ describe('queryStore', () => {
     expect(result).toContainEqual(updatedMovie)
 
     unsubscribe()
-    instance.dispose()
   })
 
   it('does not refetch for non-matching sync tags', async () => {
@@ -223,7 +215,6 @@ describe('queryStore', () => {
       of({result: mockData.movies, syncTags: mockSyncTags, ms: 0}).pipe(delay(0)),
     )
 
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const state = getQueryState(instance, query)
 
@@ -243,7 +234,6 @@ describe('queryStore', () => {
     expect(fetch).toHaveBeenCalledTimes(1)
 
     unsubscribe()
-    instance.dispose()
   })
 
   it('handles multiple live events with same sync tag', async () => {
@@ -258,7 +248,6 @@ describe('queryStore', () => {
       of({result: mockData.movies, syncTags: mockSyncTags, ms: 0}).pipe(delay(0)),
     )
 
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const state = getQueryState(instance, query)
 
@@ -284,11 +273,9 @@ describe('queryStore', () => {
     expect(vi.mocked(fetch).mock.calls[2][2]?.lastLiveEventId).toBe('event2')
 
     unsubscribe()
-    instance.dispose()
   })
 
   it('handles errors in query fetching', async () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const errorMessage = 'Query failed'
 
     // Override fetch to simulate error
@@ -306,29 +293,9 @@ describe('queryStore', () => {
     expect(() => state.getCurrent()).toThrow(errorMessage)
 
     unsubscribe()
-    instance.dispose()
-  })
-
-  it('throws an error if an errorHandler has been called', () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
-    const query = '*[_type == "movie"]'
-    const state = getQueryState(instance, query)
-
-    const resource = getOrCreateResource(instance, queryStore)
-
-    // Create an error and call the error handler
-    const testError = new Error('Global error from error handler')
-    const handler = errorHandler({state: resource.state, instance})
-    handler(testError)
-
-    // Verify the error is thrown when accessing state
-    expect(() => state.getCurrent()).toThrow('Global error from error handler')
-
-    instance.dispose()
   })
 
   it('delays query state removal after unsubscribe', async () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const state = getQueryState(instance, query)
     const unsubscribe = state.subscribe()
@@ -342,12 +309,9 @@ describe('queryStore', () => {
     // Wait for the cleanup delay and then state should be removed
     await new Promise((resolve) => setTimeout(resolve, 20))
     expect(state.getCurrent()).toBeUndefined()
-
-    instance.dispose()
   })
 
   it('preserves query state if a new subscriber subscribes before cleanup delay', async () => {
-    const instance = createSanityInstance({projectId: 'test', dataset: 'test'})
     const query = '*[_type == "movie"]'
     const state = getQueryState(instance, query)
     const unsubscribe1 = state.subscribe()
@@ -374,6 +338,5 @@ describe('queryStore', () => {
       {_id: 'movie2', _type: 'movie', title: 'Movie 2'},
     ])
     unsubscribe2()
-    instance.dispose()
   })
 })