feat(stega): allow setting stega options on client.fetch (#427)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/client",
-  "version": "6.9.3",
+  "version": "6.9.4-canary.1",
   "description": "Client for retrieving, creating and patching data from Sanity.io",
   "keywords": [
     "sanity",
@@ -142,7 +142,7 @@
     "@types/node": "^20.8.8",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
-    "@vitest/coverage-v8": "^1.0.4",
+    "@vitest/coverage-v8": "1.0.4",
     "eslint": "^8.55.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.0.1",
@@ -158,8 +158,8 @@
     "sse-channel": "^4.0.0",
     "terser": "^5.26.0",
     "typescript": "^5.3.3",
-    "vitest": "^1.0.4",
-    "vitest-github-actions-reporter": "^0.11.1"
+    "vitest": "1.0.4",
+    "vitest-github-actions-reporter": "0.11.1"
   },
   "engines": {
     "node": ">=14.18"

src/data/dataMethods.ts

@@ -69,6 +69,11 @@ export function _fetch<R, Q extends QueryParams>(
   params?: Q,
   options: FilteredResponseQueryOptions | UnfilteredResponseQueryOptions = {},
 ): Observable<RawQueryResponse<R> | R> {
+  if ('stega' in options && options['stega'] !== undefined && options['stega'] !== false) {
+    throw new Error(
+      `It looks like you're using options meant for '@sanity/client/stega'. Make sure you're using the right import. Or set 'stega' in 'fetch' to 'false'.`,
+    )
+  }
   const mapResponse =
     options.filterResponse === false ? (res: Any) => res : (res: Any) => res.result
   const {cache, next, ...opts} = {

src/stega/SanityStegaClient.ts

@@ -15,7 +15,12 @@ import type {
   RawQueryResponse,
   UnfilteredResponseQueryOptions,
 } from '../types'
-import {defaultStegaConfig, initStegaConfig, splitConfig} from './config'
+import {
+  defaultStegaConfig,
+  initStegaConfig,
+  splitConfig,
+  splitStegaConfigFromFetchOptions,
+} from './config'
 import {stegaEncodeSourceMap} from './stegaEncodeSourceMap'
 import {ClientStegaConfig, InitializedClientStegaConfig, InitializedStegaConfig} from './types'
 
@@ -120,9 +125,13 @@ export class ObservableSanityStegaClient extends INTERNAL_DO_NOT_USE_DIRECTLY_Ob
   fetch<R, Q extends QueryParams>(
     query: string,
     params?: Q,
-    options: FilteredResponseQueryOptions | UnfilteredResponseQueryOptions = {},
+    _options: FilteredResponseQueryOptions | UnfilteredResponseQueryOptions = {},
   ): Observable<RawQueryResponse<R> | R> {
-    if (!this.stegaConfig.enabled) {
+    const {stegaConfig, fetchOptions: options} = splitStegaConfigFromFetchOptions(
+      _options,
+      this.stegaConfig,
+    )
+    if (!stegaConfig.enabled) {
       return super.fetch<R, Q>(query, params, options as Any)
     }
     const {filterResponse: originalFilterResponse = true} = options
@@ -138,7 +147,7 @@ export class ObservableSanityStegaClient extends INTERNAL_DO_NOT_USE_DIRECTLY_Ob
       .pipe(
         map((res: Any) => {
           const {result: _result, resultSourceMap} = res as RawQueryResponse<R>
-          const result = stegaEncodeSourceMap(_result, resultSourceMap, this.stegaConfig)
+          const result = stegaEncodeSourceMap(_result, resultSourceMap, stegaConfig)
           return originalFilterResponse ? result : {...res, result}
         }),
       )
@@ -253,9 +262,13 @@ export class SanityStegaClient extends INTERNAL_DO_NOT_USE_DIRECTLY_SanityClient
   fetch<R, Q extends QueryParams>(
     query: string,
     params?: Q,
-    options: FilteredResponseQueryOptions | UnfilteredResponseQueryOptions = {},
+    _options: FilteredResponseQueryOptions | UnfilteredResponseQueryOptions = {},
   ): Promise<RawQueryResponse<R> | R> {
-    if (!this.stegaConfig.enabled) {
+    const {stegaConfig, fetchOptions: options} = splitStegaConfigFromFetchOptions(
+      _options,
+      this.stegaConfig,
+    )
+    if (!stegaConfig.enabled) {
       return super.fetch<R, Q>(query, params, options as Any)
     }
     const {filterResponse: originalFilterResponse = true} = options
@@ -270,7 +283,7 @@ export class SanityStegaClient extends INTERNAL_DO_NOT_USE_DIRECTLY_SanityClient
       )
       .then((res: Any) => {
         const {result: _result, resultSourceMap} = res as RawQueryResponse<R>
-        const result = stegaEncodeSourceMap(_result, resultSourceMap, this.stegaConfig)
+        const result = stegaEncodeSourceMap(_result, resultSourceMap, stegaConfig)
         return originalFilterResponse ? result : {...res, result}
       })
   }

src/stega/config.ts

@@ -1,4 +1,8 @@
-import type {ClientConfig} from '../types'
+import type {
+  ClientConfig,
+  FilteredResponseQueryOptions,
+  UnfilteredResponseQueryOptions,
+} from '../types'
 import type {ClientStegaConfig, InitializedStegaConfig, StegaConfig} from './types'
 
 export const defaultStegaConfig: StegaConfig = {
@@ -53,3 +57,20 @@ export const initStegaConfig = (
 
   return newConfig
 }
+
+export function splitStegaConfigFromFetchOptions(
+  options: (FilteredResponseQueryOptions | UnfilteredResponseQueryOptions) & {
+    stega?: boolean | StegaConfig
+  },
+  initializedStegaConfig: InitializedStegaConfig,
+): {
+  fetchOptions: FilteredResponseQueryOptions | UnfilteredResponseQueryOptions
+  stegaConfig: InitializedStegaConfig
+} {
+  const {stega = {}, ...fetchOptions} = options
+  const stegaConfig = initStegaConfig(
+    typeof stega === 'boolean' ? {enabled: stega} : stega,
+    initializedStegaConfig,
+  )
+  return {fetchOptions, stegaConfig}
+}

src/stega/types.ts

@@ -134,3 +134,12 @@ export type Encoder = (context: {
   resultPath: ContentSourceMapParsedPath
   value: string
 }) => string
+
+// Extends the `client.fetch` call with a `stega` option
+declare module '../types' {
+  /** @public */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  export interface ResponseQueryOptions<T = 'next'> extends RequestOptions {
+    stega?: boolean | StegaConfig
+  }
+}

src/types.ts

@@ -663,7 +663,7 @@ export interface ListenOptions {
 }
 
 /** @public */
-export type ResponseQueryOptions<T = 'next'> = RequestOptions & {
+export interface ResponseQueryOptions<T = 'next'> extends RequestOptions {
   perspective?: ClientPerspective
   resultSourceMap?: boolean | 'withKeyArraySelector'
   cache?: RequestInit['cache']

test/client.test-d.ts

@@ -0,0 +1,61 @@
+import {ContentSourceMap, createClient} from '@sanity/client'
+import {describe, expectTypeOf, test} from 'vitest'
+
+describe('client.fetch', () => {
+  const client = createClient({})
+  test('simple query', async () => {
+    expectTypeOf(client.fetch('*')).toMatchTypeOf<Promise<any>>()
+    expectTypeOf(client.fetch('*[_type == $type]', {type: 'post'})).toMatchTypeOf<Promise<any>>()
+  })
+  test('generics', async () => {
+    expectTypeOf(client.fetch<number>('count(*)')).toMatchTypeOf<Promise<number>>()
+    expectTypeOf(
+      client.fetch<number, {type: string}>('count(*[_type == $type])', {type: 'post'}),
+    ).toMatchTypeOf<Promise<number>>()
+    // @ts-expect-error -- should fail
+    expectTypeOf(client.fetch<number, {type: string}>('count(*[_type == $type])')).toMatchTypeOf<
+      Promise<number>
+    >()
+    expectTypeOf(
+      // @ts-expect-error -- should fail
+      client.fetch<number, {type: string}>('count(*[_type == $type])', {_type: 'post'}),
+    ).toMatchTypeOf<Promise<number>>()
+  })
+  test('filterResponse: false', async () => {
+    expectTypeOf(client.fetch<number>('count(*)', {}, {filterResponse: true})).toMatchTypeOf<
+      Promise<number>
+    >()
+    expectTypeOf(client.fetch<number>('count(*)', {}, {filterResponse: false})).toMatchTypeOf<
+      Promise<{
+        result: number
+        ms: number
+        query: string
+        resultSourceMap?: ContentSourceMap
+      }>
+    >()
+    expectTypeOf(
+      client.fetch<number, {type: string}>(
+        'count(*[_type == $type])',
+        {type: 'post'},
+        {filterResponse: true},
+      ),
+    ).toMatchTypeOf<Promise<number>>()
+    expectTypeOf(
+      client.fetch<number, {type: string}>(
+        'count(*[_type == $type])',
+        {type: 'post'},
+        {filterResponse: false},
+      ),
+    ).toMatchTypeOf<
+      Promise<{
+        result: number
+        ms: number
+        query: string
+        resultSourceMap?: ContentSourceMap
+      }>
+    >()
+  })
+  test('stega: false', async () => {
+    expectTypeOf(client.fetch('*', {}, {stega: false})).toMatchTypeOf<Promise<any>>()
+  })
+})

test/stega/client.test-d.ts

@@ -0,0 +1,59 @@
+import {SanityClient} from '@sanity/client'
+import {ContentSourceMap, createClient, SanityStegaClient} from '@sanity/client/stega'
+import {describe, expectTypeOf, test} from 'vitest'
+
+describe('client.fetch', () => {
+  const client: SanityClient | SanityStegaClient = createClient({})
+  test('simple query', async () => {
+    expectTypeOf(client.fetch('*')).toMatchTypeOf<Promise<any>>()
+    expectTypeOf(client.fetch('*[_type == $type]', {type: 'post'})).toMatchTypeOf<Promise<any>>()
+  })
+  test('generics', async () => {
+    expectTypeOf(client.fetch<number>('count(*)')).toMatchTypeOf<Promise<number>>()
+    expectTypeOf(
+      client.fetch<number, {type: string}>('count(*[_type == $type])', {type: 'post'}),
+    ).toMatchTypeOf<Promise<number>>()
+    // @ts-expect-error -- should fail
+    expectTypeOf(client.fetch<number, {type: string}>('count(*[_type == $type])')).toMatchTypeOf<
+      Promise<number>
+    >()
+    expectTypeOf(
+      // @ts-expect-error -- should fail
+      client.fetch<number, {type: string}>('count(*[_type == $type])', {_type: 'post'}),
+    ).toMatchTypeOf<Promise<number>>()
+  })
+  test('filterResponse: false', async () => {
+    expectTypeOf(client.fetch<number>('count(*)', {}, {filterResponse: true})).toMatchTypeOf<
+      Promise<number>
+    >()
+    expectTypeOf(client.fetch<number>('count(*)', {}, {filterResponse: false})).toMatchTypeOf<
+      Promise<{
+        result: number
+        ms: number
+        query: string
+        resultSourceMap?: ContentSourceMap
+      }>
+    >()
+    expectTypeOf(
+      client.fetch<number, {type: string}>(
+        'count(*[_type == $type])',
+        {type: 'post'},
+        {filterResponse: true},
+      ),
+    ).toMatchTypeOf<Promise<number>>()
+    expectTypeOf(
+      client.fetch<number, {type: string}>(
+        'count(*[_type == $type])',
+        {type: 'post'},
+        {filterResponse: false},
+      ),
+    ).toMatchTypeOf<
+      Promise<{
+        result: number
+        ms: number
+        query: string
+        resultSourceMap?: ContentSourceMap
+      }>
+    >()
+  })
+})