Fix directly calling operations on the frontend

waspc/data/Generator/templates/sdk/wasp/auth/useAuth.ts

@@ -1,23 +1,24 @@
 {{={= =}=}}
 import { deserialize as superjsonDeserialize } from 'superjson'
-import { useQuery, addMetadataToQuery } from 'wasp/client/operations'
+import { useQuery, buildAndRegisterQuery } from 'wasp/client/operations'
+import type { QueryFunction, Query  } from 'wasp/client/operations/rpc'
 import { api, handleApiError } from 'wasp/client/api'
 import { HttpMethod } from 'wasp/client'
 import type { AuthUser } from '../server/auth/user.js'
 import { UseQueryResult } from '@tanstack/react-query'
 
 // PUBLIC API
-export const getMe: () => Promise<AuthUser | null> = createUserGetter()
+export const getMe: Query<void, AuthUser | null> = createUserGetter()
 
 // PUBLIC API
-export default function useAuth(queryFnArgs?: unknown, config?: any): UseQueryResult<AuthUser> {
-  return useQuery(getMe, queryFnArgs, config)
-}  
+export default function useAuth(): UseQueryResult<AuthUser | null> {
+  return useQuery(getMe)
+}
 
-function createUserGetter() {
+function createUserGetter(): Query<void, AuthUser | null> {
   const getMeRelativePath = 'auth/me'
   const getMeRoute = { method: HttpMethod.Get, path: `/${getMeRelativePath}` }
-  async function getMe(): Promise<AuthUser | null> {
+  const getMe: QueryFunction<void, AuthUser | null> = async () =>  {
     try {
       const response = await api.get(getMeRoute.path)
 
@@ -31,11 +32,9 @@ function createUserGetter() {
     }
   }
 
-  addMetadataToQuery(getMe, {
-    relativeQueryPath: getMeRelativePath,
+  return buildAndRegisterQuery(getMe, {
+    queryCacheKey: [getMeRelativePath],
     queryRoute: getMeRoute,
     entitiesUsed: {=& entitiesGetMeDependsOn =},
   })
-
-  return getMe
 }

waspc/data/Generator/templates/sdk/wasp/client/operations/actions/core.ts

@@ -1,13 +1,13 @@
-import type { Expand, _Awaited, _ReturnType } from 'wasp/universal/types'
-import { type Action } from '../core.js'
+import type { _Awaited, _ReturnType } from 'wasp/universal/types'
+import type { OperationRpcFor, GenericBackendOperation } from '../rpc.js'
 import { callOperation, makeOperationRoute } from '../internal/index.js'
 import {
   registerActionInProgress,
   registerActionDone,
 } from '../internal/resources.js'
 
 // PRIVATE API
-export function createAction<BackendAction extends GenericBackendAction>(
+export function createAction<BackendAction extends GenericBackendOperation>(
   relativeActionRoute: string,
   entitiesUsed: unknown[]
 ): ActionFor<BackendAction> {
@@ -41,8 +41,5 @@ export function createAction<BackendAction extends GenericBackendAction>(
 }
 
 // PRIVATE API
-export type ActionFor<BackendAction extends GenericBackendAction> =
-  Action<Parameters<BackendAction>[0], _Awaited<_ReturnType<BackendAction>>>
-
-
-type GenericBackendAction = (args: never, context: any) => unknown
+export type ActionFor<BackendAction extends GenericBackendOperation> =
+  OperationRpcFor<BackendAction>

waspc/data/Generator/templates/sdk/wasp/client/operations/core.ts → waspc/data/Generator/templates/sdk/wasp/client/operations/hooks.ts

@@ -7,47 +7,34 @@ import {
   useQuery as rqUseQuery,
   UseQueryResult,
 } from "@tanstack/react-query";
+import { Action, Query } from "./rpc";
 export { configureQueryClient } from "./queryClient";
 
-// PRIVATE API (but should maybe be public, users use values of this type)
-export type Query<Input, Output> = {
-  (queryCacheKey: string[], args: Input): Promise<Output>;
-};
-
 // PUBLIC API
 export function useQuery<Input, Output>(
-  queryFn: Query<Input, Output>,
+  query: Query<Input, Output>,
   queryFnArgs?: Input,
   options?: any
-): UseQueryResult<Output, Error>;
-
-// PUBLIC API
-export function useQuery(queryFn, queryFnArgs, options) {
-  if (typeof queryFn !== "function") {
-    throw new TypeError("useQuery requires queryFn to be a function.");
+): UseQueryResult<Output, Error> {
+  if (typeof query !== 'function') {
+    throw new TypeError('useQuery requires queryFn to be a function.')
   }
-  if (!queryFn.queryCacheKey) {
-    throw new TypeError(
-      "queryFn needs to have queryCacheKey property defined."
-    );
+
+  if (!query.queryCacheKey) {
+    throw new TypeError('queryFn needs to have queryCacheKey property defined.')
   }
 
   const queryKey =
     queryFnArgs !== undefined
-      ? [...queryFn.queryCacheKey, queryFnArgs]
-      : queryFn.queryCacheKey;
+      ? [...query.queryCacheKey, queryFnArgs]
+      : query.queryCacheKey
   return rqUseQuery({
     queryKey,
-    queryFn: () => queryFn(queryKey, queryFnArgs),
+    queryFn: () => query(queryFnArgs),
     ...options,
-  });
+  })
 }
 
-// PRIVATE API (but should maybe be public, users use values of this type)
-export type Action<Input, Output> = [Input] extends [never]
-  ? (args?: unknown) => Promise<Output>
-  : (args: Input) => Promise<Output>;
-
 // PRIVATE API (but should maybe be public, users define values of this type)
 /**
  * An options object passed into the `useAction` hook and used to enhance the

waspc/data/Generator/templates/sdk/wasp/client/operations/index.ts

@@ -10,7 +10,7 @@ export {
     useQuery,
     // PUBLIC API
     type OptimisticUpdateDefinition,
-} from './core'
+} from './hooks'
 
 export {
     // PUBLIC API

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/core.ts

@@ -1,53 +1,64 @@
 import { Route } from 'wasp/client'
-import type { Expand, _Awaited, _ReturnType } from 'wasp/universal/types'
-import { type Query } from '../core.js'
+import type { _Awaited, _ReturnType } from 'wasp/universal/types'
+import type { 
+  ClientOperation,
+  GenericBackendOperation,
+  OperationRpcFor,
+  QueryFunction,
+  QueryMetadata,
+} from '../rpc.js'
 import { callOperation, makeOperationRoute } from '../internal/index.js'
 import {
   addResourcesUsedByQuery,
   getActiveOptimisticUpdates,
 } from '../internal/resources'
 
-export function createQuery<BackendQuery extends GenericBackendQuery>(
+// PRIVATE API (unsed in SDK)
+export function createQuery<BackendQuery extends GenericBackendOperation>(
   relativeQueryPath: string,
   entitiesUsed: string[]
 ): QueryFor<BackendQuery> {
   const queryRoute = makeOperationRoute(relativeQueryPath)
+  const queryCacheKey = [relativeQueryPath]
 
-  async function query(queryKey, queryArgs) {
+  const queryFn: QueryFunctionFor<BackendQuery> = async (queryArgs) => { 
     const serverResult = await callOperation(queryRoute, queryArgs)
-    return getActiveOptimisticUpdates(queryKey).reduce(
+    return getActiveOptimisticUpdates(queryCacheKey).reduce(
       (result, update) => update(result),
       serverResult,
     )
   }
 
-  addMetadataToQuery(query, { relativeQueryPath, queryRoute, entitiesUsed })
-
-  return query
+  return buildAndRegisterQuery(
+    queryFn,
+    { queryCacheKey, queryRoute, entitiesUsed },
+  )
 }
 
-// PRIVATE API
-export function addMetadataToQuery(
-  query: (...args: any[]) => Promise<unknown>,
-  metadata: {
-    relativeQueryPath: string
-    queryRoute: Route
-    entitiesUsed: string[]
-  }
-): void
-
-// PRIVATE API
-export function addMetadataToQuery(
-  query,
-  { relativeQueryPath, queryRoute, entitiesUsed }
-) {
-  query.queryCacheKey = [relativeQueryPath]
+// PRIVATE API (used in SDK)
+export function buildAndRegisterQuery<Input, Output>(
+  queryFn: ClientOperation<Input, Output>,
+  { queryCacheKey, queryRoute, entitiesUsed }: 
+  { queryCacheKey: string[], queryRoute: Route, entitiesUsed: string[] }
+): QueryForFunction<typeof queryFn> {
+  const query = queryFn as QueryForFunction<typeof queryFn>
+
+  query.queryCacheKey = queryCacheKey 
   query.route = queryRoute
   addResourcesUsedByQuery(query.queryCacheKey, entitiesUsed)
+
+  return query
+
 }
 
-export type QueryFor<BackendQuery extends GenericBackendQuery> = 
-  Query<Parameters<BackendQuery>[0], _Awaited<_ReturnType<BackendQuery>>>
+// PRIVATE API (but should maybe be public, users define values of this type)
+export type QueryFor<BackendQuery extends GenericBackendOperation> =
+  QueryForFunction<QueryFunctionFor<BackendQuery>>
+
+type QueryFunctionFor<BackendQuery extends GenericBackendOperation> =
+  OperationRpcFor<BackendQuery>
 
+// PRIVATE API (needed in SDK)
+type QueryForFunction<QF extends QueryFunction<never, unknown>> = 
+  QF & QueryMetadata
 
-type GenericBackendQuery = (args: never, context: any) => unknown

waspc/data/Generator/templates/sdk/wasp/client/operations/queries/index.ts

@@ -12,5 +12,5 @@ export const {= operationName =}: QueryFor<{= operationTypeName =}> = createQuer
 )
 {=/ queries =}
 
-// PRIVATE API
-export { addMetadataToQuery } from './core'
+// PRIVATE API (used in SDK)
+export { buildAndRegisterQuery } from './core'

waspc/data/Generator/templates/sdk/wasp/client/operations/rpc.ts

@@ -0,0 +1,38 @@
+import { type Route } from "wasp/client";
+import type {
+  _Awaited,
+  _ReturnType,
+} from "wasp/universal/types"
+
+// PRIVATE API (but should maybe be public, users define values of this type)
+export type Query<Input, Output> = QueryFunction<Input, Output> & QueryMetadata
+
+// PRIVATE API (but should maybe be public, users define values of this type)
+export type Action<Input, Output> = ClientOperation<Input, Output>
+
+// PRIVATE API
+export type QueryFunction<Input, Output> = ClientOperation<Input, Output>
+
+// PRIVATE API
+export type QueryMetadata = {
+  queryCacheKey: string[]
+  route: Route
+}
+
+// PRIVATE API (needed in SDK)
+export type OperationRpcFor<BackendOperation extends GenericBackendOperation> =
+  Parameters<BackendOperation> extends []
+    ? ClientOperation<void, _Awaited<_ReturnType<BackendOperation>>>
+    : ClientOperation<
+        Parameters<BackendOperation>[0],
+        _Awaited<_ReturnType<BackendOperation>>
+      >
+
+// PRIVATE API (but should maybe be public, users use values of this type)
+// Read this to understand the type: https://github.com/wasp-lang/wasp/pull/1090#discussion_r1159732471
+export type ClientOperation<Input, Output> = [Input] extends [never]
+  ? (args?: unknown) => Promise<Output>
+  : (args: Input) => Promise<Output>;
+
+// PRIVATE API (needed in SDK)
+export type GenericBackendOperation = (args: never, context: any) => unknown

waspc/data/Generator/templates/sdk/wasp/client/test/vitest/helpers.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter as Router } from 'react-router-dom'
 import { render, RenderResult, cleanup } from '@testing-library/react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { beforeAll, afterEach, afterAll } from 'vitest'
-import { Query } from 'wasp/client/operations/core'
+import { Query } from 'wasp/client/operations/rpc'
 import { config } from 'wasp/client'
 import { HttpMethod, Route } from 'wasp/client'
 

waspc/data/Generator/templates/sdk/wasp/package.json

@@ -110,7 +110,7 @@
 
       {=! todo(filip): Fixes below are for type errors in 0.13.1, remove ASAP =}
       {=! Used by our code (SDK for full-stack type safety), uncodumented (but accessible) for users. =}
-      "./client/operations/core": "./dist/client/operations/core.js",
+      "./client/operations/rpc": "./dist/client/operations/rpc.js",
       "./server/crud/Tasks": "./dist/server/crud/Tasks.js",
       "./server/operations/actions":  "./dist/server/operations/actions/index.js",
       "./server/operations/queries": "./dist/server/operations/queries/index.js",

waspc/examples/todoApp/src/App.tsx

@@ -1,10 +1,12 @@
-import { useSocket } from "wasp/client/webSocket";
-import { Link } from "wasp/client/router";
-import { logout, useAuth } from "wasp/client/auth";
-import { useQuery, getDate } from "wasp/client/operations";
+import { useSocket } from 'wasp/client/webSocket'
+import { Link } from 'wasp/client/router'
+import { logout, useAuth } from 'wasp/client/auth'
+import { useQuery, getDate } from 'wasp/client/operations'
 
 import './Main.css'
 import { getName } from './user'
+// Necessary to trigger type tests.
+import './TestRpcTypes'
 
 export function App({ children }: any) {
   const { data: user } = useAuth()