Add auto type inference to loadQuery + useQuery

apps/astro/package.json

@@ -24,7 +24,7 @@
     "astro-portabletext": "^0.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "3.53.0",
+    "sanity": "3.55.0",
     "tailwindcss": "^3.4.9",
     "typescript": "5.5.3"
   }

apps/common/package.json

@@ -86,15 +86,15 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "styled-components": "6.1.12",
     "typescript": "5.5.3"
   },
   "peerDependencies": {
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
     "rxjs": "^7.8.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "styled-components": "^6.1.8"
   },
   "engines": {

apps/next-no-cache/package.json

@@ -36,7 +36,7 @@
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "react-wrap-balancer": "^1.1.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "sanity-plugin-asset-source-unsplash": "^3.0.1",
     "server-only": "^0.0.1",
     "styled-components": "^6.1.12"

apps/next-server-only/package.json

@@ -36,7 +36,7 @@
     "react": "19.0.0-rc-fb9a90fa48-20240614",
     "react-dom": "19.0.0-rc-fb9a90fa48-20240614",
     "react-wrap-balancer": "^1.1.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "sanity-plugin-asset-source-unsplash": "^3.0.1",
     "server-only": "^0.0.1",
     "styled-components": "^6.1.12"

apps/next-with-i18n/package.json

@@ -27,7 +27,7 @@
     "next-sanity": "^9.4.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "server-only": "0.0.1"
   },
   "devDependencies": {

apps/page-builder-demo/package.json

@@ -25,7 +25,7 @@
     "clsx": "^2.1.1",
     "eslint": "^8.57.0",
     "eslint-config-next": "14.2.5",
-    "groq": "^3.53.0",
+    "groq": "^3.55.0",
     "next": "14.2.5",
     "next-sanity": "9.4.5",
     "postcss": "8.4.41",

apps/studio/package.json

@@ -18,7 +18,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "sanity-plugin-asset-source-unsplash": "^3.0.1",
     "styled-components": "6.1.12",
     "typescript": "5.5.3"

package.json

@@ -33,8 +33,8 @@
     "@sanity/types": "3.53.0",
     "@sanity/util": "3.53.0",
     "@sanity/vision": "3.53.0",
-    "groq": "3.53.0",
-    "sanity": "3.53.0"
+    "groq": "3.55.0",
+    "sanity": "3.55.0"
   },
   "devDependencies": {
     "@sanity/pkg-utils": "6.9.3",

packages/presentation/package.json

@@ -122,7 +122,7 @@
     "happy-dom": "^14.12.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "styled-components": "6.1.12",
     "typescript": "5.4.5",
     "vitest": "^2.0.5"

packages/preview-url-secret/package.json

@@ -149,7 +149,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "typescript": "5.4.5",
     "vitest": "^2.0.5"
   },

packages/react-loader/README.md

@@ -87,7 +87,7 @@ const query = `*[_type == "product" && slug.current == $slug][0]`
 export const loader: LoaderFunction = async ({params}) => {
   return json({
     params,
-    initial: await loadQuery<Product>(query, params),
+    initial: await loadQuery(query, params),
   })
 }
 
@@ -98,7 +98,7 @@ export default function ProductPage() {
     throw new Error('No slug, 404?')
   }
 
-  const {data} = useQuery<Product>(query, params, {initial})
+  const {data} = useQuery(query, params, {initial})
 
   // Use `data` in your view, it'll mirror what the loader returns in production mode,
   // while Live Mode it becomes reactive and respons in real-time to your edits in the Presentation tool.
@@ -171,7 +171,7 @@ const query = `*[_type == "product" && slug.current == $slug][0]`
 export const loader: LoaderFunction = async ({params}) => {
   return json({
     params,
-    initial: await loadQuery<Product>(query, params),
+    initial: await loadQuery(query, params),
   })
 }
 

packages/react-loader/src/defineUseQuery.ts

@@ -1,4 +1,4 @@
-import type {QueryParams} from '@sanity/client'
+import type {ClientReturn, QueryParams} from '@sanity/client'
 import type {QueryStore, QueryStoreState} from '@sanity/core-loader'
 import isEqual from 'fast-deep-equal'
 import {useEffect, useMemo, useState, useSyncExternalStore} from 'react'
@@ -12,23 +12,31 @@ export function defineUseQuery({
   studioUrlStore,
 }: Pick<QueryStore, 'createFetcherStore'> & {
   studioUrlStore: ReturnType<typeof defineStudioUrlStore>
-}): <QueryResponseResult, QueryResponseError>(
-  query: string,
+}): <
+  const QueryString extends string,
+  QueryResponseResult extends ClientReturn<QueryString>,
+  QueryResponseError,
+>(
+  query: QueryString,
   params?: QueryParams,
   options?: UseQueryOptions<QueryResponseResult>,
 ) => QueryStoreState<QueryResponseResult, QueryResponseError> & WithEncodeDataAttribute {
   const DEFAULT_PARAMS = {}
-  return <QueryResponseResult, QueryResponseError>(
-    query: string,
+  return <
+    const QueryString extends string,
+    QueryResponseResult extends ClientReturn<QueryString>,
+    QueryResponseError,
+  >(
+    query: QueryString,
     params: QueryParams = DEFAULT_PARAMS,
     options: UseQueryOptions<QueryResponseResult> = {},
   ) => {
+    const $params = useMemo(() => JSON.stringify(params), [params])
+
     const initial = useMemo(
       () => (options.initial ? {perspective: 'published' as const, ...options.initial} : undefined),
       [options.initial],
     )
-    const $params = useMemo(() => JSON.stringify(params), [params])
-
     const [snapshot, setSnapshot] = useState<
       QueryStoreState<QueryResponseResult, QueryResponseError>
     >(() => {

packages/react-loader/src/types.ts

@@ -1,5 +1,6 @@
 import type {
   ClientPerspective,
+  ClientReturn,
   ContentSourceMap,
   QueryParams,
   ResponseQueryOptions,
@@ -42,7 +43,7 @@ export interface UseQueryOptions<QueryResponseResult = unknown> {
    * ```ts
    * const query = `*[_type == "author" && slug.current == $slug][0]`
    * export const getServerSideProps = async ({params}) => {
-   *   const initial = await loadQuery<AuhthorType>(query, params)
+   *   const initial = await loadQuery(query, params)
    *   return { props: { params, initial } }
    * }
    * export default function Page({params, initial}) {
@@ -62,7 +63,7 @@ export interface UseQueryOptionsUndefinedInitial {
    * ```ts
    * const query = `*[_type == "author" && slug.current == $slug][0]`
    * export const getServerSideProps = async ({params}) => {
-   *   const initial = await loadQuery<AuhthorType>(query, params)
+   *   const initial = await loadQuery(query, params)
    *   return { props: { params, initial } }
    * }
    * export default function Page({params, initial}) {
@@ -84,7 +85,7 @@ export interface UseQueryOptionsDefinedInitial<QueryResponseResult = unknown> {
    * ```ts
    * const query = `*[_type == "author" && slug.current == $slug][0]`
    * export const getServerSideProps = async ({params}) => {
-   *   const initial = await loadQuery<AuhthorType>(query, params)
+   *   const initial = await loadQuery(query, params)
    *   return { props: { params, initial } }
    * }
    * export default function Page({params, initial}) {
@@ -104,14 +105,14 @@ export type UseLiveModeHook = (
 ) => void
 
 export interface QueryStore {
-  loadQuery: <QueryResponseResult>(
-    query: string,
+  loadQuery: <const QueryString extends string>(
+    query: QueryString,
     params?: QueryParams,
     options?: Pick<
       ResponseQueryOptions,
       'perspective' | 'cache' | 'next' | 'useCdn' | 'stega' | 'tag' | 'headers'
     >,
-  ) => Promise<QueryResponseInitial<QueryResponseResult>>
+  ) => Promise<QueryResponseInitial<ClientReturn<QueryString>>>
   setServerClient: ReturnType<typeof createCoreQueryStore>['setServerClient']
   useQuery: {
     <QueryResponseResult = unknown, QueryResponseError = unknown>(

packages/svelte-loader/README.md

@@ -178,13 +178,13 @@ Create a server `load` function for our page that will handle fetching data from
 
 ```ts
 // src/routes/[slug]/+page.server.ts
-import {pageQuery, type PageResult} from '$lib/queries'
+import {pageQuery} from '$lib/queries'
 import type {PageServerLoad} from './$types'
 
 export const load: PageServerLoad = async ({params, locals: {loadQuery}}) => {
   const {slug} = params
 
-  const initial = await loadQuery<PageResult>(pageQuery, {slug})
+  const initial = await loadQuery(pageQuery, {slug})
 
   return {initial, params: {slug}}
 }

packages/svelte-loader/src/types.ts

@@ -55,7 +55,7 @@ export interface UseQueryOptions<QueryResponseResult = unknown> {
    * ```ts
    * const query = `*[_type == "author" && slug.current == $slug][0]`
    * export const getServerSideProps = async ({params}) => {
-   *   const initial = await loadQuery<AuhthorType>(query, params)
+   *   const initial = await loadQuery(query, params)
    *   return { props: { params, initial } }
    * }
    * export default function Page({params, initial}) {
@@ -76,7 +76,7 @@ export interface UseQueryOptionsUndefinedInitial {
    * ```ts
    * const query = `*[_type == "author" && slug.current == $slug][0]`
    * export const getServerSideProps = async ({params}) => {
-   *   const initial = await loadQuery<AuhthorType>(query, params)
+   *   const initial = await loadQuery(query, params)
    *   return { props: { params, initial } }
    * }
    * export default function Page({params, initial}) {
@@ -100,7 +100,7 @@ export interface UseQueryOptionsDefinedInitial<QueryResponseResult = unknown> {
    * ```ts
    * const query = `*[_type == "author" && slug.current == $slug][0]`
    * export const getServerSideProps = async ({params}) => {
-   *   const initial = await loadQuery<AuhthorType>(query, params)
+   *   const initial = await loadQuery(query, params)
    *   return { props: { params, initial } }
    * }
    * export default function Page({params, initial}) {

packages/visual-editing-helpers/package.json

@@ -115,7 +115,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "react": "^18.3.1",
-    "sanity": "^3.53.0",
+    "sanity": "^3.55.0",
     "typescript": "5.4.5",
     "valibot": "0.31.1",
     "vitest": "^2.0.5"