Instructions for incorporating a TypeScript type into a Prisma model

Question

Instructions for incorporating a TypeScript type into a Prisma model

I am trying to incorporate a Type Board into one of my Prisma models. However, I am encountering an error stating that "Type 'Board' is neither a built-in type, nor refers to another model, custom type, or enum." Can someone provide guidance on how to resolve this issue?

The structure of the Board type is as follows:

export type Board = {
  title: string;
  boardId?: string;
  id?: string;
  orgId: string;
  imageId: string;
  imageThumbUrl: string;
  imageFullUrl: string;
  imageUserName: string;
  imageLinkHTML: string;

  createdAt?: Date;
  updatedAt?: Date;
};

Within schema.prisma:

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./data/dev.db"
  // url      = env("DATABASE_URL")
}


model List {
  id        String @id @default(uuid())
  title     String
  order     Int

  boardId   String
  board     Board @relation(fields: [boardId], references: [id], onDelete: Cascade)

  cards     Card[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([boardId])
}

typescript next.js prisma

Answer 1

Answer №1

Board data is housed in MockApi.io database.

As a result, Prisma is not aware of this connection.

If you want to retrieve a Board from a List, you'll need to implement something like the following code:

const list = await prisma.list.findUnique({ where: { id: listId } })
const board = await mockApiIoClient.board.findById(list.boardId) // psuedocode

You should also delete the following line from the schema file:

  board     Board @relation(fields: [boardId], references: [id], onDelete: Cascade)

This relationship cannot be managed by Prisma.

Your code must act as a liaison between the two systems. Therefore, it is not Prisma's responsibility to handle or provide the Board type.

Prisma generates TypeScript types from the database schema. Including a TypeScript type within the schema doesn't align logically.

Answer 2

Board data is housed in MockApi.io database.

As a result, Prisma is not aware of this connection.

If you want to retrieve a Board from a List, you'll need to implement something like the following code:

const list = await prisma.list.findUnique({ where: { id: listId } })
const board = await mockApiIoClient.board.findById(list.boardId) // psuedocode

You should also delete the following line from the schema file:

  board     Board @relation(fields: [boardId], references: [id], onDelete: Cascade)

This relationship cannot be managed by Prisma.

Your code must act as a liaison between the two systems. Therefore, it is not Prisma's responsibility to handle or provide the Board type.

Prisma generates TypeScript types from the database schema. Including a TypeScript type within the schema doesn't align logically.

Answer 3

Answer №2

In Prisma models, you are unable to directly reference a TypeScript type.

Models in Prisma can only refer to other models and enums that are defined within the same schema file.

If you want to incorporate Board information into your model, you have two options: define a model for Board and store the data in your database, or simply store the boardId in the List model and load the Board information through a resolver or an API call.

If you choose to store Board data with the Prisma method:

model List {
  id        String @id @default(uuid())
  title     String
  order     Int

  boardId   String
  board     Board @relation(fields: [boardId], references: [id], onDelete: Cascade)

  cards     Card[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([boardId])
}

model Board {
  id        String @id @default(uuid())
  title String
  //... Other things
  imageLinkHTML: string;

  createdAt?: Date;
  updatedAt?: Date;
}

Alternatively, you could opt for a simpler approach by creating a List model in the database and storing just the boardId:

model List {
  id        String @id @default(uuid())
  title     String
  order     Int

  boardId   String

  cards     Card[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([boardId])
}

When retrieving Board data from mockapi.io, extend the Prisma type with your custom Board type after running npx prisma generate:

import { List } from "@prisma/client";

// Fetch List from your database using Prisma
// Fetch Board from mockapi.io
// Combine List and Board data and Extend the List type with {board: Board}

// Inside of your getAllLists query:
const listData = await prisma.list.findUnique({ where: {
id: yourId }}) // Get one List
const boardData: Board = await fetch("mockapi.io api") // Retrieve Board data from mockapi.io

const newListData: List & {board: Board} = {...listData, board: boardData}

Answer 4

In Prisma models, you are unable to directly reference a TypeScript type.

Models in Prisma can only refer to other models and enums that are defined within the same schema file.

If you want to incorporate Board information into your model, you have two options: define a model for Board and store the data in your database, or simply store the boardId in the List model and load the Board information through a resolver or an API call.

If you choose to store Board data with the Prisma method:

model List {
  id        String @id @default(uuid())
  title     String
  order     Int

  boardId   String
  board     Board @relation(fields: [boardId], references: [id], onDelete: Cascade)

  cards     Card[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([boardId])
}

model Board {
  id        String @id @default(uuid())
  title String
  //... Other things
  imageLinkHTML: string;

  createdAt?: Date;
  updatedAt?: Date;
}

Alternatively, you could opt for a simpler approach by creating a List model in the database and storing just the boardId:

model List {
  id        String @id @default(uuid())
  title     String
  order     Int

  boardId   String

  cards     Card[]

  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  @@index([boardId])
}

When retrieving Board data from mockapi.io, extend the Prisma type with your custom Board type after running npx prisma generate:

import { List } from "@prisma/client";

// Fetch List from your database using Prisma
// Fetch Board from mockapi.io
// Combine List and Board data and Extend the List type with {board: Board}

// Inside of your getAllLists query:
const listData = await prisma.list.findUnique({ where: {
id: yourId }}) // Get one List
const boardData: Board = await fetch("mockapi.io api") // Retrieve Board data from mockapi.io

const newListData: List & {board: Board} = {...listData, board: boardData}

Instructions for incorporating a TypeScript type into a Prisma model

Answer №1

Answer №2

Similar questions

Developing an interface that utilizes the values of an enum as keys

What causes TypeScript to malfunction when using spread in components?

What is the best way to retrieve the href attribute when working with cheerio?

The overload functionality in Typescript interfaces is not functioning as intended

Filtering a key-value pair from an array of objects using Typescript

Trying to determine the specific key of an object based on its value in TypeScript?

Cannot detect react-script in the "npm run build" command when setting up the create-next-app project

Discover the outcome of clicking on an object (mock tests)

When incorporating a JS React component in TypeScript, an error may occur stating that the JSX element type 'MyComponent' is not a valid constructor function for JSX elements

Insert Angular HTML tag into TypeScript

Seeking a solution to the useRef problem. Encountering difficulties with React Hook useRef functionality within a NextJS application

When navigating to '/blogs/', the index.js file in Next.js will automatically open

Retrieving user input from one component to be used in another component in Angular

Error: Atom key duplication detected in Next.js framework

UI5 Tooling generated an error stating that "sap is not defined" after a self-contained build

How to resolve the issue of not being able to access functions from inside the timer target function in TypeScript's

Updating a property in React by fetching data from API and storing it in the cache

What is the best way to save objects in the store (ngrx, ngxs) while preserving their methods functionality?

Can you please explain the purpose of the white space in the HTML code?

Using Typescript to remove an element from an array inside another array