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!

Types on the Frontend

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>
  )
}

Types on the Frontend

Similar Threads

Types on the Frontend

Similar Threads

Similar Threads

Similar Threads