Bringing Prisma entities to the frontend

waspc/data/Generator/templates/db/schema.prisma

@@ -8,7 +8,7 @@ datasource db {
 generator client {
   provider = "prisma-client-js"
   {=! TODO(matija): this shouldn't be hardcoded, generator should provide this path. =}
-  output = "../server/node_modules/.prisma/client"
+  output = "{= clientOutputDir =}"
 }
 
 {=# modelSchemas =}

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

@@ -0,0 +1,18 @@
+{{={= =}=}}
+import {
+  {=# entities =}
+  {= name =},
+  {=/ entities =}
+} from '@prisma/client'
+
+export type {
+  {=# entities =}
+  {= name =},
+  {=/ entities =}
+} from '@prisma/client'
+
+export type WaspEntity = 
+  {=# entities =}
+  | {= name =}
+  {=/ entities =}
+  | never

waspc/examples/todoApp/src/client/Todo.tsx

@@ -8,14 +8,7 @@ import createTask from '@wasp/actions/createTask.js'
 import updateTaskIsDone from '@wasp/actions/updateTaskIsDone.js'
 import deleteCompletedTasks from '@wasp/actions/deleteCompletedTasks.js'
 import toggleAllTasks from '@wasp/actions/toggleAllTasks.js'
-
-// Copied from Prisma
-type Task = {
-  id: number
-  description: string
-  isDone: boolean
-  userId: number
-}
+import { Task } from '@wasp/entities'
 
 type GetTasksError = { message: string }
 
@@ -91,7 +84,7 @@ const Tasks = ({ tasks }: { tasks: NonEmptyArray<Task> }) => {
     <div>
       <table className='border-separate border-spacing-2'>
         <tbody>
-          {tasks.map((task, idx) => <Task task={task} key={idx} />)}
+          {tasks.map((task, idx) => <TaskView task={task} key={idx} />)}
         </tbody>
       </table>
     </div>
@@ -100,7 +93,7 @@ const Tasks = ({ tasks }: { tasks: NonEmptyArray<Task> }) => {
 
 type UpdateTaskIsDonePayload = Pick<Task, "id" | "isDone">
 
-const Task = ({ task }: { task: Task }) => {
+const TaskView = ({ task }: { task: Task }) => {
   const updateTaskIsDoneOptimistically = useAction<UpdateTaskIsDonePayload, void, Task[]>(updateTaskIsDone, {
     optimisticUpdates: [{
       getQuerySpecifier: () => [getTasks],

waspc/examples/todoApp/src/client/pages/ProfilePage.js → waspc/examples/todoApp/src/client/pages/ProfilePage.tsx

@@ -1,10 +1,11 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
+import { User } from '@wasp/entities'
 
-export const ProfilePage = ({ user }) => {
+export const ProfilePage = ({ username }: User) => {
   return (
     <>
-    <div>I am Profile page for { user.username }!</div>
+    <div>I am Profile page for { username }!</div>
     <br />
       <Link to='/'>Go to dashboard</Link>
     </>

waspc/examples/todoApp/src/client/pages/Task.js → waspc/examples/todoApp/src/client/pages/Task.tsx

@@ -6,21 +6,22 @@ import { useAction } from '@wasp/actions'
 import updateTaskIsDone from '@wasp/actions/updateTaskIsDone'
 import getTask from '@wasp/queries/getTask.js'
 import getTasks from '@wasp/queries/getTasks.js'
+import { Task } from '@wasp/entities'
 
-const Todo = (props) => {
+const Todo = (props: any) => {
   const taskId = parseInt(props.match.params.id)
-  const { data: task, isFetching, error } = useQuery(getTask, { id: taskId })
+  const { data: task, isFetching, error } = useQuery<unknown, Task, Task | Task[]>(getTask, { id: taskId })
 
   const updateTaskIsDoneOptimistically = useAction(updateTaskIsDone, {
     optimisticUpdates: [
       {
         getQuerySpecifier: () => [getTask, { id: taskId }],
         // This query's cache should should never be emtpy
-        updateQuery: ({ isDone }, oldTask) => ({ ...oldTask, isDone }),
+        updateQuery: ({ isDone }: Pick<Task, "id" | "isDone">, oldTask: Task) => ({ ...oldTask, isDone }),
       },
       {
         getQuerySpecifier: () => [getTasks],
-        updateQuery: (updatedTask, oldTasks) => {
+        updateQuery: (updatedTask: Task, oldTasks: Task[]) => {
           if (oldTasks === undefined) {
             // cache is empty
             return [updatedTask]

waspc/examples/todoApp/src/server/actions.ts

@@ -1,6 +1,4 @@
 import HttpError from '@wasp/core/HttpError.js'
-import { Task } from '@wasp/entities/'
-import { AuthenticatedAction } from '@wasp/types'
 import { getSomeResource } from './serverSetup.js'
 import {
   CreateTask,

waspc/src/Wasp/Generator/Common.hs

@@ -4,9 +4,14 @@ module Wasp.Generator.Common
     nodeVersionRange,
     npmVersionRange,
     prismaVersion,
+    makeJsonWithEntityNameAndPrismaIdentifier,
+    entityNameToPrismaIdentifier,
   )
 where
 
+import Data.Aeson (KeyValue ((.=)), object)
+import qualified Data.Aeson as Aeson
+import Data.Char (toLower)
 import qualified Wasp.SemanticVersion as SV
 
 -- | Directory where the whole web app project (client, server, ...) is generated.
@@ -34,3 +39,17 @@ npmVersionRange = SV.Range [SV.backwardsCompatibleWith latestLTSVersion]
 
 prismaVersion :: SV.Version
 prismaVersion = SV.Version 4 5 0
+
+makeJsonWithEntityNameAndPrismaIdentifier :: String -> Aeson.Value
+makeJsonWithEntityNameAndPrismaIdentifier name =
+  object
+    [ "name" .= name,
+      "prismaIdentifier" .= entityNameToPrismaIdentifier name
+    ]
+
+-- | Takes a Wasp Entity name (like `SomeTask` from `entity SomeTask {...}`) and
+-- converts it into a corresponding Prisma identifier (like `prisma.someTask`).
+-- This is what Prisma implicitly does when translating `model` declarations to
+-- client SDK identifiers. Useful when creating `context.entities` JS objects in Wasp templates.
+entityNameToPrismaIdentifier :: String -> String
+entityNameToPrismaIdentifier entityName = toLower (head entityName) : tail entityName

waspc/src/Wasp/Generator/DbGenerator.hs

@@ -10,8 +10,9 @@ where
 
 import Data.Aeson (object, (.=))
 import Data.Maybe (fromMaybe, maybeToList)
-import StrongPath (Abs, Dir, Path', (</>))
+import StrongPath (Abs, Dir, File', Path', Rel, (</>))
 import qualified StrongPath as SP
+import StrongPath.TH (reldir)
 import System.Directory (doesFileExist)
 import Wasp.AppSpec (AppSpec, getEntities)
 import qualified Wasp.AppSpec as AS
@@ -21,13 +22,17 @@ import qualified Wasp.AppSpec.Entity as AS.Entity
 import Wasp.AppSpec.Valid (getApp)
 import Wasp.Generator.Common (ProjectRootDir)
 import Wasp.Generator.DbGenerator.Common
-  ( dbMigrationsDirInDbRootDir,
+  ( DbRootDir,
+    clientDbSchemaFileInProjectRootDir,
+    dbMigrationsDirInDbRootDir,
     dbRootDirInProjectRootDir,
     dbSchemaChecksumOnLastDbConcurrenceFileProjectRootDir,
     dbSchemaChecksumOnLastGenerateFileProjectRootDir,
     dbSchemaFileInDbTemplatesDir,
-    dbSchemaFileInProjectRootDir,
     dbTemplatesDirInTemplatesDir,
+    serverDbSchemaFileInProjectRootDir,
+    serverRootDirFromDbRootDir,
+    webAppRootDirFromDbRootDir,
   )
 import qualified Wasp.Generator.DbGenerator.Operations as DbOps
 import Wasp.Generator.FileDraft (FileDraft, createCopyDirFileDraft, createTemplateFileDraft)
@@ -43,10 +48,24 @@ import Wasp.Util (checksumFromFilePath, hexToString, ifM, (<:>))
 
 genDb :: AppSpec -> Generator [FileDraft]
 genDb spec =
-  genPrismaSchema spec <:> (maybeToList <$> genMigrationsDir spec)
+  genServerPrismaSchema spec
+    <:> genClientPrismaSchema spec
+    <:> (maybeToList <$> genMigrationsDir spec)
 
-genPrismaSchema :: AppSpec -> Generator FileDraft
-genPrismaSchema spec = do
+genClientPrismaSchema :: AppSpec -> Generator FileDraft
+genClientPrismaSchema =
+  genPrismaSchema webAppRootDirFromDbRootDir clientDbSchemaFileInProjectRootDir
+
+genServerPrismaSchema :: AppSpec -> Generator FileDraft
+genServerPrismaSchema =
+  genPrismaSchema serverRootDirFromDbRootDir serverDbSchemaFileInProjectRootDir
+
+genPrismaSchema ::
+  Path' (Rel DbRootDir) (Dir a) ->
+  Path' (Rel ProjectRootDir) File' ->
+  AppSpec ->
+  Generator FileDraft
+genPrismaSchema moduleRootDir destinationFile spec = do
   (datasourceProvider, datasourceUrl) <- case dbSystem of
     AS.Db.PostgreSQL -> return ("postgresql", "env(\"DATABASE_URL\")")
     AS.Db.SQLite ->
@@ -58,14 +77,15 @@ genPrismaSchema spec = do
         object
           [ "modelSchemas" .= map entityToPslModelSchema (AS.getDecls @AS.Entity.Entity spec),
             "datasourceProvider" .= (datasourceProvider :: String),
-            "datasourceUrl" .= (datasourceUrl :: String)
+            "datasourceUrl" .= (datasourceUrl :: String),
+            "clientOutputDir" .= SP.fromRelDir clientOutputDir
           ]
 
-  return $ createTemplateFileDraft dstPath tmplSrcPath (Just templateData)
+  return $ createTemplateFileDraft destinationFile tmplSrcPath (Just templateData)
   where
-    dstPath = dbSchemaFileInProjectRootDir
     tmplSrcPath = dbTemplatesDirInTemplatesDir </> dbSchemaFileInDbTemplatesDir
-    dbSystem = fromMaybe AS.Db.SQLite (AS.Db.system =<< AS.App.db (snd $ getApp spec))
+    dbSystem = fromMaybe AS.Db.SQLite $ AS.Db.system =<< AS.App.db (snd $ getApp spec)
+    clientOutputDir = moduleRootDir </> [reldir|node_modules/.prisma/client|]
 
     entityToPslModelSchema :: (String, AS.Entity.Entity) -> String
     entityToPslModelSchema (entityName, entity) =
@@ -116,7 +136,7 @@ warnIfDbNeedsMigration spec projectRootDir = do
         then warnProjectDiffersFromDb projectRootDir
         else return Nothing
   where
-    dbSchemaFp = SP.fromAbsFile $ projectRootDir </> dbSchemaFileInProjectRootDir
+    dbSchemaFp = SP.fromAbsFile $ projectRootDir </> serverDbSchemaFileInProjectRootDir
     dbSchemaChecksumFp = SP.fromAbsFile $ projectRootDir </> dbSchemaChecksumOnLastDbConcurrenceFileProjectRootDir
     entitiesExist = not . null $ getEntities spec
 
@@ -155,7 +175,7 @@ genPrismaClient spec projectRootDir = do
   where
     wasCurrentSchemaAlreadyGenerated :: IO Bool
     wasCurrentSchemaAlreadyGenerated = do
-      let dbSchemaFp = SP.fromAbsFile $ projectRootDir SP.</> dbSchemaFileInProjectRootDir
+      let dbSchemaFp = SP.fromAbsFile $ projectRootDir SP.</> serverDbSchemaFileInProjectRootDir
       let dbSchemaChecksumFp = SP.fromAbsFile $ projectRootDir SP.</> dbSchemaChecksumOnLastGenerateFileProjectRootDir
 
       dbSchemaChecksumFileExists <- doesFileExist dbSchemaChecksumFp

waspc/src/Wasp/Generator/DbGenerator/Common.hs

@@ -4,19 +4,23 @@ module Wasp.Generator.DbGenerator.Common
     dbSchemaChecksumOnLastDbConcurrenceFileProjectRootDir,
     dbSchemaChecksumOnLastGenerateFileProjectRootDir,
     dbSchemaFileInDbTemplatesDir,
-    dbSchemaFileInProjectRootDir,
     dbTemplatesDirInTemplatesDir,
     defaultMigrateArgs,
     getOnLastDbConcurrenceChecksumFileRefreshAction,
     MigrateArgs (..),
     RefreshOnLastDbConcurrenceChecksumFile (..),
+    DbRootDir,
+    serverRootDirFromDbRootDir,
+    webAppRootDirFromDbRootDir,
+    serverDbSchemaFileInProjectRootDir,
+    clientDbSchemaFileInProjectRootDir
   )
 where
 
 import StrongPath (Dir, File, File', Path', Rel, reldir, relfile, (</>))
-import qualified StrongPath as SP
 import Wasp.Common (DbMigrationsDir)
 import Wasp.Generator.Common (ProjectRootDir)
+import Wasp.Generator.ServerGenerator.Common (ServerRootDir)
 import Wasp.Generator.Templates (TemplatesDir)
 
 data DbRootDir
@@ -33,6 +37,12 @@ data DbSchemaChecksumOnLastDbConcurrenceFile
 -- to know if we need to regenerate schema.prisma during web app generation or not.
 data DbSchemaChecksumOnLastGenerateFile
 
+serverRootDirFromDbRootDir :: Path' (Rel DbRootDir) (Dir ServerRootDir)
+serverRootDirFromDbRootDir = [reldir|../server|]
+
+webAppRootDirFromDbRootDir :: Path' (Rel DbRootDir) (Dir ServerRootDir)
+webAppRootDirFromDbRootDir = [reldir|../web-app|]
+
 dbRootDirInProjectRootDir :: Path' (Rel ProjectRootDir) (Dir DbRootDir)
 dbRootDirInProjectRootDir = [reldir|db|]
 
@@ -42,13 +52,17 @@ dbTemplatesDirInTemplatesDir = [reldir|db|]
 dbSchemaFileInDbTemplatesDir :: Path' (Rel DbTemplatesDir) File'
 dbSchemaFileInDbTemplatesDir = [relfile|schema.prisma|]
 
-dbSchemaFileInDbRootDir :: Path' (Rel DbRootDir) File'
--- Generated schema file will be in the same relative location as the
--- template file within templates dir.
-dbSchemaFileInDbRootDir = SP.castRel dbSchemaFileInDbTemplatesDir
+clientDbSchemaFileInDbRootDir :: Path' (Rel DbRootDir) File'
+clientDbSchemaFileInDbRootDir = [relfile|schema.client.prisma|]
+
+serverDbSchemaFileInDbRootDir :: Path' (Rel DbRootDir) File'
+serverDbSchemaFileInDbRootDir = [relfile|schema.server.prisma|]
+
+clientDbSchemaFileInProjectRootDir :: Path' (Rel ProjectRootDir) File'
+clientDbSchemaFileInProjectRootDir = dbRootDirInProjectRootDir </> clientDbSchemaFileInDbRootDir
 
-dbSchemaFileInProjectRootDir :: Path' (Rel ProjectRootDir) File'
-dbSchemaFileInProjectRootDir = dbRootDirInProjectRootDir </> dbSchemaFileInDbRootDir
+serverDbSchemaFileInProjectRootDir :: Path' (Rel ProjectRootDir) File'
+serverDbSchemaFileInProjectRootDir = dbRootDirInProjectRootDir </> serverDbSchemaFileInDbRootDir
 
 dbMigrationsDirInDbRootDir :: Path' (Rel DbRootDir) (Dir DbMigrationsDir)
 dbMigrationsDirInDbRootDir = [reldir|migrations|]

waspc/src/Wasp/Generator/DbGenerator/Jobs.hs

@@ -1,7 +1,8 @@
 module Wasp.Generator.DbGenerator.Jobs
   ( migrateDev,
     migrateDiff,
-    generatePrismaClient,
+    generatePrismaClientForClient,
+    generatePrismaClientForServer,
     runStudio,
     migrateStatus,
     asPrismaCliArgs,
@@ -10,26 +11,18 @@ where
 
 import StrongPath (Abs, Dir, File', Path', Rel, (</>))
 import qualified StrongPath as SP
+import StrongPath.TH (relfile)
 import qualified System.Info
 import Wasp.Generator.Common (ProjectRootDir)
-import Wasp.Generator.DbGenerator.Common (MigrateArgs (..), dbSchemaFileInProjectRootDir)
+import Wasp.Generator.DbGenerator.Common (MigrateArgs (..), clientDbSchemaFileInProjectRootDir, serverDbSchemaFileInProjectRootDir)
 import qualified Wasp.Generator.Job as J
 import Wasp.Generator.Job.Process (runNodeCommandAsJob)
 import Wasp.Generator.ServerGenerator.Common (serverRootDirInProjectRootDir)
 
--- | NOTE: The expectation is that `npm install` was already executed
--- such that we can use the locally installed package.
--- This assumption is ok since it happens during compilation now.
-prismaInServerNodeModules :: Path' (Rel ProjectRootDir) File'
-prismaInServerNodeModules = serverRootDirInProjectRootDir </> [SP.relfile|./node_modules/.bin/prisma|]
-
-absPrismaExecutableFp :: Path' Abs (Dir ProjectRootDir) -> FilePath
-absPrismaExecutableFp projectDir = SP.toFilePath $ projectDir </> prismaInServerNodeModules
-
 migrateDev :: Path' Abs (Dir ProjectRootDir) -> MigrateArgs -> J.Job
 migrateDev projectDir migrateArgs = do
   let serverDir = projectDir </> serverRootDirInProjectRootDir
-  let schemaFile = projectDir </> dbSchemaFileInProjectRootDir
+  let schemaFile = projectDir </> serverDbSchemaFileInProjectRootDir
 
   -- NOTE(matija): We are running this command from server's root dir since that is where
   -- Prisma packages (cli and client) are currently installed.
@@ -63,7 +56,7 @@ asPrismaCliArgs migrateArgs = do
 migrateDiff :: Path' Abs (Dir ProjectRootDir) -> J.Job
 migrateDiff projectDir = do
   let serverDir = projectDir </> serverRootDirInProjectRootDir
-  let schemaFileFp = SP.toFilePath $ projectDir </> dbSchemaFileInProjectRootDir
+  let schemaFileFp = SP.toFilePath $ projectDir </> serverDbSchemaFileInProjectRootDir
   let prismaMigrateDiffCmdArgs =
         [ "migrate",
           "diff",
@@ -84,7 +77,7 @@ migrateDiff projectDir = do
 migrateStatus :: Path' Abs (Dir ProjectRootDir) -> J.Job
 migrateStatus projectDir = do
   let serverDir = projectDir </> serverRootDirInProjectRootDir
-  let schemaFileFp = SP.toFilePath $ projectDir </> dbSchemaFileInProjectRootDir
+  let schemaFileFp = SP.toFilePath $ projectDir </> serverDbSchemaFileInProjectRootDir
   let prismaMigrateDiffCmdArgs =
         [ "migrate",
           "status",
@@ -98,15 +91,30 @@ migrateStatus projectDir = do
 runStudio :: Path' Abs (Dir ProjectRootDir) -> J.Job
 runStudio projectDir = do
   let serverDir = projectDir </> serverRootDirInProjectRootDir
-  let schemaFile = projectDir </> dbSchemaFileInProjectRootDir
+  let schemaFile = projectDir </> serverDbSchemaFileInProjectRootDir
   let prismaStudioCmdArgs = ["studio", "--schema", SP.toFilePath schemaFile]
 
   runNodeCommandAsJob serverDir (absPrismaExecutableFp projectDir) prismaStudioCmdArgs J.Db
 
-generatePrismaClient :: Path' Abs (Dir ProjectRootDir) -> J.Job
-generatePrismaClient projectDir = do
-  let serverDir = projectDir </> serverRootDirInProjectRootDir
-  let schemaFile = projectDir </> dbSchemaFileInProjectRootDir
-  let prismaGenerateCmdArgs = ["generate", "--schema", SP.toFilePath schemaFile]
+generatePrismaClientForServer :: Path' Abs (Dir ProjectRootDir) -> J.Job
+generatePrismaClientForServer projectDir =
+  generatePrismaClient projectDir serverDbSchemaFileInProjectRootDir
 
-  runNodeCommandAsJob serverDir (absPrismaExecutableFp projectDir) prismaGenerateCmdArgs J.Db
+generatePrismaClientForClient :: Path' Abs (Dir ProjectRootDir) -> J.Job
+generatePrismaClientForClient projectDir =
+  generatePrismaClient projectDir clientDbSchemaFileInProjectRootDir
+
+generatePrismaClient :: Path' Abs (Dir ProjectRootDir) -> Path' (Rel ProjectRootDir) File' -> J.Job
+generatePrismaClient projectDir dbSchemaFile =
+  runNodeCommandAsJob projectDir prismaExecutable prismaGenerateCmdArgs J.Db
+  where
+    prismaExecutable = absPrismaExecutableFp projectDir
+    prismaGenerateCmdArgs = ["generate", "--schema", SP.toFilePath schemaFile]
+    schemaFile = projectDir </> dbSchemaFile
+
+-- | NOTE: The expectation is that `npm install` was already executed
+-- such that we can use the locally installed package.
+-- This assumption is ok since it happens during compilation now.
+absPrismaExecutableFp :: Path' Abs (Dir ProjectRootDir) -> FilePath
+absPrismaExecutableFp projectDir =
+  SP.fromAbsFile $ projectDir </> serverRootDirInProjectRootDir </> [relfile|./node_modules/.bin/prisma|]