Custom query fetching keys

[hajiskyy]

Is your feature request related to a problem? Please describe.

We use sanity in production, our pages, components etc. are all specd and controlled through sanity. As you can imagine, there are some times when I need to use some data across multiple components and to prevent fetching data multiple times, i have had to use the useAsyncData composable and the client fetch to have defined keys and useNuxtData to get the keyed data elsewhere when needed. This is fine, until I tried to implement the visual editing, now it says that i need to use the useSanityQuery to fetch data. Problem with that is, I can't define what the keys are going to be. i understand that, at the moment, the keys are randomly generated per request :(

Describe the solution you'd like to see

Is it possible to work towards allowing optional keys for useSanityQuery?, I can see that its options are an extension of the useAsyncData type. perhaps we could start from there and maybe add a key option, extract and/or overwrite the key if does/doesn't exist.

sanity/src/runtime/composables/index.ts

Lines 59 to 73 in b072b12

	interface UseSanityQueryOptions<T> extends AsyncDataOptions<T> {
	client?: string
	}
	export const useSanityQuery = <T = unknown, E = Error> (query: string, _params?: Record<string, unknown>, _options: UseSanityQueryOptions<T> = {}): AsyncData<T | null, E> => {
	const { client, ...options } = _options
	const sanity = useSanity(client)
	const params = _params ? reactive(_params) : undefined
	if (params) {
	options.watch = options.watch || []
	options.watch.push(params)
	}
	return useAsyncData('sanity-' + hash(query + (params ? JSON.stringify(params) : '')), () => sanity.fetch<T>(query, params || {}), options) as AsyncData<T | null, E>
	}

Describe alternatives you've considered

If it's not possible, is there some recommended approach to make this work?

[hajiskyy]

Couldn't seem to fork and make a PR for this module, possible a skill issue, but here is a potential fix for this.

interface UseSanityQueryOptions<T> extends AsyncDataOptions<T> {
  client?: string,
    /**
   * Optional key for useAsyncData.
   * !! If provided, this key COMPLETELY OVERRIDES the automatic key generation
   * based on query and params. YOU are responsible for ensuring this key is unique
   * for each distinct data request you want to cache separately.
   * Reusing the same key for different queries/params will lead to cache collisions.
   * Use with caution.
   */
  key?: string // ADDED
}

export const useSanityQuery = <T = unknown, E = Error> (query: string, _params?: Record<string, unknown>, _options: UseSanityQueryOptions<T> = {}): AsyncData<T | null, E> => {
  const { client, key, ...options } = _options // CHANGE

  if (key && typeof key !== 'string') {
    throw new TypeError('[sanity] [useSanityQuery] key must be a string: ' + key) // ADDED
  }

  const sanity = useSanity(client)
  const params = _params ? reactive(_params) : undefined
  const _key = key || 'sanity-' + hash(query + (params ? JSON.stringify(params) : '')); // ADDED

  if (params) {
    options.watch = options.watch || []
    options.watch.push(params)
  }

  return useAsyncData(_key, () => sanity.fetch<T>(query, params || {}), options) as AsyncData<T | null, E> // CHANGE
}

export const useLazySanityQuery = <T = unknown, E = Error> (query: string, _params?: Record<string, unknown>, _options: UseSanityQueryOptions<T> = {}): AsyncData<T | null, E> => {
  const { client, key, ...options } = _options // CHANGE

  if (key && typeof key !== 'string') {
    throw new TypeError('[sanity] [useSanityQuery] key must be a string: ' + key) // ADDED
  }

  const sanity = useSanity(client)
  const params = _params ? reactive(_params) : undefined
  const _key = key || 'sanity-' + hash(query + (params ? JSON.stringify(params) : '')) // ADDED

  if (params) {
    options.watch = options.watch || []
    options.watch.push(params)
  }
  return useLazyAsyncData(_key, () => sanity.fetch<T>(query, params || {}), options) as AsyncData<T | null, E> // CHANGE
}