Add full-stack compile-time type safety (#1090)

Author: sodic

waspc/data/Generator/templates/react-app/src/actions/_action.js

@@ -0,0 +1,10 @@
+{{={= =}=}}
+import { createAction } from './core'
+{=& operationTypeImportStmt =}
+
+const action = createAction<{= operationTypeName =}>(
+  '{= actionRoute =}',
+  {=& entitiesArray =},
+)
+
+export default action

waspc/data/Generator/templates/react-app/src/actions/_action.ts

@@ -1,3 +1,13 @@
-import { Action } from '.'
+import { type Action } from '.'
+import type { Expand, _Awaited } from '../universal/types'
 
-export function createAction<Input, Output>(actionRoute: string, entitiesUsed: unknown[]): Action<Input, Output>
+export function createAction<BackendAction extends GenericBackendAction>(
+  actionRoute: string,
+  entitiesUsed: unknown[]
+): ActionFor<BackendAction>
+
+type ActionFor<BackendAction extends GenericBackendAction> = Expand<
+  Action<Parameters<BackendAction>[0], _Awaited<ReturnType<BackendAction>>>
+>
+
+type GenericBackendAction = (args: never, context: any) => Promise<unknown>

waspc/data/Generator/templates/react-app/src/actions/core.d.ts

@@ -5,9 +5,12 @@ import {
   UseMutationOptions,
   useQueryClient,
 } from '@tanstack/react-query'
-import { Query } from '../queries';
+import { type Query } from '../queries';
 
-export type Action<Input, Output> = (args?: Input) => Promise<Output>;
+export type Action<Input, Output> = 
+  [Input] extends [never] ? 
+  (args?: unknown) => Promise<Output> :
+  (args: Input) => Promise<Output>
 
 /**
  * An options object passed into the `useAction` hook and used to enhance the

waspc/data/Generator/templates/react-app/src/actions/index.ts

@@ -45,7 +45,7 @@ api.interceptors.response.use(undefined, (error) => {
  * standard format to be further used by the client. It is also assumed that given API
  * error has been formatted as implemented by HttpError on the server.
  */
-export function handleApiError (error: AxiosError<{ message?: string, data?: unknown }>): void {
+export function handleApiError(error: AxiosError<{ message?: string, data?: unknown }>): void {
   if (error?.response) {
     // If error came from HTTP response, we capture most informative message
     // and also add .statusCode information to it.

waspc/data/Generator/templates/react-app/src/api.ts

@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { Redirect } from 'react-router-dom'
-import useAuth from '../useAuth.js'
+import useAuth from '../useAuth'
 
 
 const createAuthRequiredPage = (Page) => {

waspc/data/Generator/templates/react-app/src/auth/pages/createAuthRequiredPage.jsx

@@ -1,16 +1,19 @@
+import { deserialize as superjsonDeserialize } from 'superjson'
 import { useQuery } from '../queries'
 import api, { handleApiError } from '../api'
 import { HttpMethod } from '../types'
+// todo(filip): turn into a proper import
+import { type SanitizedUser as User } from '../../../server/src/_types/' 
 
-export default function useAuth(queryFnArgs, config) {
+export default function useAuth(queryFnArgs?: unknown, config?: any) {
   return useQuery(getMe, queryFnArgs, config)
 }
 
-export async function getMe() {
+export async function getMe(): Promise<User | null> {
   try {
     const response = await api.get('/auth/me')
 
-    return response.data
+    return superjsonDeserialize(response.data)
   } catch (error) {
     if (error.response?.status === 401) {
       return null

waspc/data/Generator/templates/react-app/src/auth/useAuth.js renamed to waspc/data/Generator/templates/react-app/src/auth/useAuth.ts

@@ -1,12 +1,17 @@
 import api, { handleApiError } from '../api'
 import { HttpMethod } from '../types'
+import { 
+  serialize as superjsonSerialize,
+  deserialize as superjsonDeserialize,
+ } from 'superjson'
 
 export type OperationRoute = { method: HttpMethod, path: string }
 
 export async function callOperation(operationRoute: OperationRoute & { method: HttpMethod.Post }, args: any) {
   try {
-    const response = await api.post(operationRoute.path, args)
-    return response.data
+    const superjsonArgs = superjsonSerialize(args)
+    const response = await api.post(operationRoute.path, superjsonArgs)
+    return superjsonDeserialize(response.data)
   } catch (error) {
     handleApiError(error)
   }

waspc/data/Generator/templates/react-app/src/operations/index.ts

@@ -11,7 +11,7 @@ const updateHandlers = makeUpdateHandlersMap(hashQueryKey)
 /**
  * Remembers that specified query is using specified resources.
  * If called multiple times for same query, resources are added, not reset.
- * @param {string} queryCacheKey - Unique key under used to identify query in the cache.
+ * @param {string[]} queryCacheKey - Unique key under used to identify query in the cache.
  * @param {string[]} resources - Names of resources that query is using.
  */
 export function addResourcesUsedByQuery(queryCacheKey, resources) {

waspc/data/Generator/templates/react-app/src/operations/resources.js

@@ -0,0 +1,11 @@
+{{={= =}=}}
+import { createQuery } from './core'
+{=& operationTypeImportStmt =}
+
+
+const query = createQuery<{= operationTypeName =}>(
+  '{= queryRoute =}',
+  {=& entitiesArray =},
+)
+
+export default query

waspc/data/Generator/templates/react-app/src/queries/_query.js

@@ -1,3 +1,13 @@
-import { type Query } from './index'
+import { type Query } from '.'
+import type { Expand, _Awaited } from '../universal/types'
 
-export function createQuery<Input, Output>(queryRoute: string, entitiesUsed: any[]): Query<Input, Output>
+export function createQuery<BackendQuery extends GenericBackendQuery>(
+  queryRoute: string,
+  entitiesUsed: any[]
+): QueryFor<BackendQuery>
+
+type QueryFor<BackendQuery extends GenericBackendQuery> = Expand<
+  Query<Parameters<BackendQuery>[0], _Awaited<ReturnType<BackendQuery>>>
+>
+
+type GenericBackendQuery = (args: never, context: any) => Promise<unknown>

waspc/data/Generator/templates/react-app/src/queries/_query.ts

@@ -1,14 +1,10 @@
 import { UseQueryResult } from "@tanstack/react-query";
 
-import { type HttpMethod } from "../types";
-
 export type Query<Input, Output> = {
-    (args: Input): Promise<Output>
-    queryCacheKey: string[]
-    route: { method: HttpMethod, path: string }
+    (queryCacheKey: string[], args: Input): Promise<Output>
 }
 
-export function useQuery<Input, Output, Error = unknown>(
+export function useQuery<Input, Output>(
     queryFn: Query<Input, Output>,
     queryFnArgs?: Input, options?: any
 ): UseQueryResult<Output, Error>

waspc/data/Generator/templates/react-app/src/queries/core.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react'
+import { serialize as superjsonSerialize } from 'superjson'
 import { rest, type ResponseResolver, type RestContext } from 'msw'
 import { setupServer, type SetupServer } from 'msw/node'
 import { BrowserRouter as Router } from 'react-router-dom'
@@ -9,27 +10,39 @@ import { Query } from '../../queries'
 import config from '../../config'
 import { HttpMethod } from '../../types'
 
+export type Route = { method: HttpMethod; path: string }
+
+export type MockQuery = <Input, Output, MockOutput extends Output>(
+  query: Query<Input, Output>,
+  resJson: MockOutput
+) => void
+
+export type MockApi = (route: Route, resJson: unknown) => void
+
 // Inspired by the Tanstack React Query helper:
 // https://github.com/TanStack/query/blob/4ae99561ca3383d6de3f4aad656a49ba4a17b57a/packages/react-query/src/__tests__/utils.tsx#L7-L26
 export function renderInContext(ui: ReactElement): RenderResult {
   const client = new QueryClient()
   const { rerender, ...result } = render(
-    <QueryClientProvider client={client}><Router>{ui}</Router></QueryClientProvider>
+    <QueryClientProvider client={client}>
+      <Router>{ui}</Router>
+    </QueryClientProvider>
   )
   return {
     ...result,
     rerender: (rerenderUi: ReactElement) =>
       rerender(
-        <QueryClientProvider client={client}><Router>{rerenderUi}</Router></QueryClientProvider>
-      )
+        <QueryClientProvider client={client}>
+          <Router>{rerenderUi}</Router>
+        </QueryClientProvider>
+      ),
   }
 }
 
-type QueryRoute = Query<any, any>['route']
-
 export function mockServer(): {
-  server: SetupServer,
-  mockQuery: ({ route }: { route: QueryRoute }, resJson: any) => void
+  server: SetupServer
+  mockQuery: MockQuery
+  mockApi: MockApi
 } {
   const server: SetupServer = setupServer()
 
@@ -40,28 +53,41 @@ export function mockServer(): {
   })
   afterAll(() => server.close())
 
-  function mockQuery({ route }: { route: QueryRoute }, resJson: any): void {
-    if (!Object.values(HttpMethod).includes(route.method)) {
-      throw new Error(`Unsupported query method for mocking: ${route.method}. Supported method strings are: ${Object.values(HttpMethod).join(', ')}.`)
-    }
+  const mockQuery: MockQuery = (query, mockData) => {
+    const route = (query as unknown as { route: Route }).route
+    mockRoute(server, route, (_req, res, ctx) =>
+      res(ctx.json(superjsonSerialize(mockData)))
+    )
+  }
+
+  const mockApi: MockApi = (route, mockData) => {
+    mockRoute(server, route, (_req, res, ctx) => res(ctx.json(mockData)))
+  }
+
+  return { server, mockQuery, mockApi }
+}
 
-    const url = `${config.apiUrl}${route.path}`
-    const responseHandler: ResponseResolver<any, RestContext, any> = (_req, res, ctx) => {
-      return res(ctx.json(resJson))
-    }
+function mockRoute(
+  server: SetupServer,
+  route: Route,
+  responseHandler: ResponseResolver<any, RestContext, any>
+) {
+  if (!Object.values(HttpMethod).includes(route.method)) {
+    throw new Error(
+      `Unsupported query method for mocking: ${
+        route.method
+      }. Supported method strings are: ${Object.values(HttpMethod).join(', ')}.`
+    )
+  }
 
-    // NOTE: Technically, we only need to care about POST for Queries
-    // and GET for the /auth/me route. However, an additional use case
-    // for this function could be to mock APIs, so more methods are supported.
-    const handlers: Record<HttpMethod, Parameters<typeof server.use>[0]> = {
-      [HttpMethod.Get]: rest.get(url, responseHandler),
-      [HttpMethod.Post]: rest.post(url, responseHandler),
-      [HttpMethod.Put]: rest.put(url, responseHandler),
-      [HttpMethod.Delete]: rest.delete(url, responseHandler),
-    }
+  const url = `${config.apiUrl}${route.path}`
 
-    server.use(handlers[route.method])
+  const handlers: Record<HttpMethod, Parameters<typeof server.use>[0]> = {
+    [HttpMethod.Get]: rest.get(url, responseHandler),
+    [HttpMethod.Post]: rest.post(url, responseHandler),
+    [HttpMethod.Put]: rest.put(url, responseHandler),
+    [HttpMethod.Delete]: rest.delete(url, responseHandler),
   }
 
-  return { server, mockQuery }
+  server.use(handlers[route.method])
 }

waspc/data/Generator/templates/react-app/src/queries/index.d.ts

@@ -1,4 +1,5 @@
 {{={= =}=}}
+import { type Expand } from "../universal/types.js";
 import { type Request, type Response } from 'express'
 import { type ParamsDictionary as ExpressParams, type Query as ExpressQuery } from 'express-serve-static-core'
 import prisma from "../dbClient.js"
@@ -72,20 +73,11 @@ type Context<Entities extends _Entity[]> = Expand<{
 }>
 
 {=# isAuthEnabled =}
-type ContextWithUser<Entities extends _Entity[]> = Expand<Context<Entities> & UserInContext>
+type ContextWithUser<Entities extends _Entity[]> = Expand<Context<Entities> & { user: SanitizedUser}>
 
-export type UserInContext = {
-  // TODO: This type must match the logic in core/auth.js (if we remove the
-  // password field from the object there, we must do the same here). Ideally,
-  // these two things would live in the same place:
-  // https://github.com/wasp-lang/wasp/issues/965
-  user: Omit<{= userEntityName =}, 'password'>
-}
+// TODO: This type must match the logic in core/auth.js (if we remove the
+// password field from the object there, we must do the same here). Ideally,
+// these two things would live in the same place:
+// https://github.com/wasp-lang/wasp/issues/965
+export type SanitizedUser = Omit<{= userEntityName =}, 'password'>
 {=/ isAuthEnabled =}
-
-// This is a helper type used exclusively for DX purposes. It's a No-op for the
-// compiler, but expands the type's representatoin in IDEs (i.e., inlines all
-// type constructors) to make it more readable for the user.
-//
-// Check this SO answer for details: https://stackoverflow.com/a/57683652
-type Expand<T extends object> = T extends infer O ? { [K in keyof O]: O[K] } : never

waspc/data/Generator/templates/react-app/src/test/vitest/helpers.tsx

@@ -7,7 +7,7 @@ import prisma from '../dbClient.js'
           consider in the future if it is worth removing this duplication. =}
 
 export default async function (args, context) {
-  return {= jsFn.importIdentifier =}(args, {
+  return {= jsFn.importIdentifier =}(args as never, {
     ...context,
     entities: {
       {=# entities =}
@@ -16,3 +16,5 @@ export default async function (args, context) {
     },
   })
 }
+
+export type {= operationTypeName =} = typeof {= jsFn.importIdentifier =} 

waspc/data/Generator/templates/server/src/_types/index.ts

@@ -7,7 +7,7 @@ import prisma from '../dbClient.js'
           consider in the future if it is worth removing this duplication. =}
 
 export default async function (args, context) {
-  return {= jsFn.importIdentifier =}(args, {
+  return {= jsFn.importIdentifier =}(args as never, {
     ...context,
     entities: {
       {=# entities =}
@@ -16,3 +16,5 @@ export default async function (args, context) {
     },
   })
 }
+
+export type {= operationTypeName =} = typeof {= jsFn.importIdentifier =}