Wasp-lang•2y ago

Types on the Frontend

To get this question and answer forum going, I'm going to repost a really good question from @breadchris: so the first thing that got me caught up when going through the demo is that I was trying to have shared types between the frontend and backend code. I could setup the backend with the types from prisma:

import {Task} from '@prisma/client'

export const createTask = async (args: Task, context: any) => {
  return context.entities.Task.create({
    data: {description: args.description}
  })
}

import {Task} from '@prisma/client'

export const createTask = async (args: Task, context: any) => {
  return context.entities.Task.create({
    data: {description: args.description}
  })
}

but those are obviously not accessible from the frontend:

const Task = ({props: {task: Task}}) => {
  return (
    <div>
      <input
        type='checkbox' id={props.task.id}
        checked={props.task.isDone}
      />
      {props.task.description}
    </div>
  )
}

const Task = ({props: {task: Task}}) => {
  return (
    <div>
      <input
        type='checkbox' id={props.task.id}
        checked={props.task.isDone}
      />
      {props.task.description}
    </div>
  )
}

I would expect to be able to use Task here since I a common task will be to return down an object in its entirety to be formatted and viewed. The workaround here is to put the types in the shared folder, but it would be nice to keep these types in sync with the database. I am not sure how difficult it is to do, but it seems like the "hack" is to copy the index.d.ts from prisma's client into a place that is accessible to the frontend code? the index.d.ts file is all types so it should be fine, but is obviously a dirty hack lol. Would love to know your thoughts!

4 Replies

Vinny (@Wasp)OP•2y ago

We have a blog post about Typescript that covers everything about Prisma types on the frontend! Check it out: https://wasp-lang.dev/blog/2022/11/29/typescript-feature-announcement#future-work . TLDR; we are aware and working on it!

Feature Announcement - TypeScript Support | Wasp

breadchris•2y ago

hahaha! my question exactly

Filip•2y ago

Just pasting this here for completeness: Also, take a look at the questions and my comment in this reddit thread: https://www.reddit.com/r/javascript/comments/z7xo9t/comment/iyd9mnn/?utm_source=share&utm_medium=web2x&context=3 It has a large overlap with what you're asking. I'm currently organizing our TypeScript-related thoughts into Github issues so I'll soon come back and directly address your question (and share links to relevant issues, after I create them). In the meantime, I think the blog post and the reddit comment answer most of it. In short, queries and actions don't necessarily have to return Prisma entities (the entity field in the declaration just means they use them). While we could give access to Prisma entities on the frontend and rely on users typing their queries correctly, we would ideally want to generate all frontend query types automatically by looking at the backend queries. That's what the reddit comment explores.

r/javascript - Wasp, DSL / framework for building full-stack JS (Re...

88 votes and 41 comments so far on Reddit

Filip•2y ago

Here's an issue covering everything TypeScript in Wasp: https://github.com/wasp-lang/wasp/issues/909

GitHub

TypeScript support in Wasp · Issue #909 · wasp-lang/wasp

This is an umbrella issue for tracking all TypeScript-related features in Wasp. TypeScript support for Wasp users: #589 #901 #902 #262 #899 #835 #910 #914 TypeScript support for Wasp developers: #1...

Gaming

Programming

Types on the Frontend