Fix React Query types (#31002)

New React Query types don't allow skipToken for useSuspenseQuery. Fix @convex-dev/react-query types to match this.

GitOrigin-RevId: e59e9308573ebdfc2e4d5556baa9dba2aaef8eca

Author: thomasballinger

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@convex-dev/react-query",
-  "version": "0.0.0-alpha.6",
+  "version": "0.0.0-alpha.7",
   "license": "Apache-2.0",
   "type": "module",
   "scripts": {
@@ -53,7 +53,8 @@
     "react-dom": "^18.0.0",
     "tshy": "^2.0.0",
     "typescript": "~5.0.3",
-    "vite": "5.2.14"
+    "vite": "5.2.14",
+    "vitest": "~1.6.0"
   },
   "exports": {
     ".": {

src/example.tsx

@@ -4,6 +4,7 @@ import {
   QueryClientProvider,
   useMutation,
   useQuery,
+  useSuspenseQuery,
 } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ConvexProvider, ConvexReactClient } from "convex/react";
@@ -51,7 +52,7 @@ function Weather() {
     // This query doesn't update reactively, it refetches like a normal queryFn.
     convexAction(api.weather.getSFWeather, {}),
   );
-  if (isPending || error) return "?";
+  if (isPending || error) return <span>?</span>;
   const fetchedAt = new Date(data.fetchedAt);
   return (
     <div className="weather">

src/index.test.ts

@@ -0,0 +1,50 @@
+import { useQuery, useSuspenseQuery } from "@tanstack/react-query";
+import { test, describe } from "vitest";
+import { convexAction, convexQuery } from "./index.js";
+import { api } from "../convex/_generated/api.js";
+
+describe("query options factory types", () => {
+  test("with useQuery", () => {
+    if (1 + 2 === 3) return; // test types only
+
+    type ActionFunc = typeof api.weather.getSFWeather;
+    {
+      const action = convexAction(api.weather.getSFWeather, {});
+      const result = useQuery(action);
+      const data: ActionFunc["_returnType"] | undefined = result.data;
+      console.log(data);
+    }
+
+    {
+      const action = convexAction(api.weather.getSFWeather, "skip");
+      const result = useQuery(action);
+      // Skip doesn't need to cause data in types since there's no point
+      // to always passing "skip".
+      const data: ActionFunc["_returnType"] | undefined = result.data;
+      console.log(data);
+
+      // @ts-expect-error Actions with "skip" can't be used with useSuspenseQuery
+      useSuspenseQuery(action);
+    }
+
+    type QueryFunc = typeof api.messages.list;
+    {
+      const query = convexQuery(api.messages.list, {});
+      const result = useQuery(query);
+      const data: QueryFunc["_returnType"] | undefined = result.data;
+      console.log(data);
+    }
+
+    {
+      const query = convexQuery(api.messages.list, "skip");
+      const result = useQuery(query);
+      // Skip doesn't need to cause data in types since there's no point
+      // to always passing "skip".
+      const data: QueryFunc["_returnType"] | undefined = result.data;
+      console.log(data);
+
+      // @ts-expect-error Queries with "skip" can't be used with useSuspenseQuery
+      useSuspenseQuery(query);
+    }
+  });
+});

src/index.ts

@@ -5,6 +5,7 @@ import {
   QueryFunctionContext,
   QueryKey,
   UseQueryOptions,
+  UseSuspenseQueryOptions,
   hashKey,
   notifyManager,
 } from "@tanstack/react-query";
@@ -415,18 +416,37 @@ export class ConvexQueryClient {
  */
 export const convexQuery = <
   ConvexQueryReference extends FunctionReference<"query">,
+  Args extends FunctionArgs<ConvexQueryReference> | "skip",
 >(
   funcRef: ConvexQueryReference,
-  queryArgs: FunctionArgs<ConvexQueryReference>,
-): Pick<
-  UseQueryOptions<
-    FunctionReturnType<ConvexQueryReference>,
-    Error,
-    FunctionReturnType<ConvexQueryReference>,
-    ["convexQuery", ConvexQueryReference, FunctionArgs<ConvexQueryReference>]
-  >,
-  "queryKey" | "queryFn" | "staleTime"
-> => {
+  queryArgs: Args,
+): Args extends "skip"
+  ? Pick<
+      UseQueryOptions<
+        FunctionReturnType<ConvexQueryReference>,
+        Error,
+        FunctionReturnType<ConvexQueryReference>,
+        [
+          "convexQuery",
+          ConvexQueryReference,
+          FunctionArgs<ConvexQueryReference>,
+        ]
+      >,
+      "queryKey" | "queryFn" | "staleTime" | "enabled"
+    >
+  : Pick<
+      UseSuspenseQueryOptions<
+        FunctionReturnType<ConvexQueryReference>,
+        Error,
+        FunctionReturnType<ConvexQueryReference>,
+        [
+          "convexQuery",
+          ConvexQueryReference,
+          FunctionArgs<ConvexQueryReference>,
+        ]
+      >,
+      "queryKey" | "queryFn" | "staleTime"
+    > => {
   return {
     queryKey: [
       "convexQuery",
@@ -436,6 +456,7 @@ export const convexQuery = <
       queryArgs,
     ],
     staleTime: Infinity,
+    ...(queryArgs === "skip" ? { enabled: false } : {}),
   };
 };
 
@@ -458,18 +479,37 @@ export const convexQuery = <
  */
 export const convexAction = <
   ConvexActionReference extends FunctionReference<"action">,
+  Args extends FunctionArgs<ConvexActionReference> | "skip",
 >(
   funcRef: ConvexActionReference,
-  args: FunctionArgs<ConvexActionReference>,
-): Pick<
-  UseQueryOptions<
-    FunctionReturnType<ConvexActionReference>,
-    Error,
-    FunctionReturnType<ConvexActionReference>,
-    ["convexAction", ConvexActionReference, FunctionArgs<ConvexActionReference>]
-  >,
-  "queryKey" | "queryFn" | "staleTime"
-> => {
+  args: Args,
+): Args extends "skip"
+  ? Pick<
+      UseQueryOptions<
+        FunctionReturnType<ConvexActionReference>,
+        Error,
+        FunctionReturnType<ConvexActionReference>,
+        [
+          "convexAction",
+          ConvexActionReference,
+          FunctionArgs<ConvexActionReference>,
+        ]
+      >,
+      "queryKey" | "queryFn" | "staleTime" | "enabled"
+    >
+  : Pick<
+      UseSuspenseQueryOptions<
+        FunctionReturnType<ConvexActionReference>,
+        Error,
+        FunctionReturnType<ConvexActionReference>,
+        [
+          "convexAction",
+          ConvexActionReference,
+          FunctionArgs<ConvexActionReference>,
+        ]
+      >,
+      "queryKey" | "queryFn" | "staleTime"
+    > => {
   return {
     queryKey: [
       "convexAction",
@@ -478,6 +518,7 @@ export const convexAction = <
       // TODO bigints are not serializable
       args,
     ],
+    ...(args === "skip" ? { enabled: false } : {}),
   };
 };
 

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2020",
+    "target": "ES2022",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "NodeNext",
@@ -15,6 +15,8 @@
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
+    /* for vitest :/ */
+    "skipLibCheck": true,
 
     "strict": true,