Error encountered: TypeScript type error in my server-side action in Next.js

Question

Error encountered: TypeScript type error in my server-side action in Next.js

Currently seeking assistance with a server action in my Next.js application. I am encountering a type error that I can't seem to identify the root cause of. This issue arises when there are three values being passed into db.insert for orderProduct, and it consistently errors out on the first value regardless of the field.

File: create-order.tsx

products.map(async ({ productId, quantity, variantId }) => {
  await db.insert(orderProduct).values({
    productVariantId: variantId,
    productId: productId,
    quantity,
    orderId: order[0].id,
  })
})

Schema:

export const orderProduct = pgTable('order_product', {
  id: serial('id').primaryKey(),
  quantity: integer('quantity').notNull(),
  productVariantId: serial('productVariantId')
    .notNull()
    .references(() => productVariants.id, { onDelete: 'cascade' }),
  productId: serial('productId')
    .notNull()
    .references(() => products.id, { onDelete: 'cascade' }),
  orderId: serial('orderId')
    .notNull()
    .references(() => orders.id, { onDelete: 'cascade' }),
})

Types:

import * as z from 'zod'

export const createOrderSchema = z.object({
  total: z.number(),
  status: z.string(),
  paymentIntentId: z.string(),
  products: z.array(
    z.object({
      quantity: z.number(),
      productId: z.string(),
      variantId: z.string(),
    }),
  ),
})

Error Message:

No overload matches this call.
  Overload 2 of 2, '(values: { quantity: number | SQL<unknown> | Placeholder<string, any>; id?: number | SQL<unknown> | Placeholder<string, any> | undefined; productId?: number | SQL<...> | Placeholder<...> | undefined; productVariantId?: number | ... 2 more ... | undefined; orderId?: number | ... 2 more ... | undefined; }[]): PgInsertBase<...>', gave the following error.
    Object literal may only specify known properties, and 'productVariantId' does not exist in type '{ quantity: number | SQL<unknown> | Placeholder<string, any>; id?: number | SQL<unknown> | Placeholder<string, any> | undefined; productId?: number | SQL<...> | Placeholder<...> | undefined; productVariantId?: number | ... 2 more ... | undefined; orderId?: number | ... 2 more ... | undefined; }[]'.ts(2769)

I continue to receive this error even if I rearrange the values within my db.insert function.

javascript typescript next.js orm drizzle

Answer 1

Answer №1

After some investigation, I have discovered the solution. In my code, instead of using z.string() for the productId and variantId, it should be z.number()

import * as z from 'zod'

export const createOrderSchema = z.object({
  total: z.number(),
  status: z.string(),
  paymentIntentId: z.string(),
  products: z.array(
    z.object({
      quantity: z.number(),
      productId: z.number(),
      variantId: z.number(),
    }),
  ),
})

Answer 2

After some investigation, I have discovered the solution. In my code, instead of using z.string() for the productId and variantId, it should be z.number()

import * as z from 'zod'

export const createOrderSchema = z.object({
  total: z.number(),
  status: z.string(),
  paymentIntentId: z.string(),
  products: z.array(
    z.object({
      quantity: z.number(),
      productId: z.number(),
      variantId: z.number(),
    }),
  ),
})

Answer 3

Answer №2

Implementing Modular Design:

To maintain consistency and accuracy, it is important to establish base schemas such as DbProductSchema and DbOrderSchema.
Customize schemas for specific use cases by utilizing methods like extend, pick, or omit.

Following Schema Naming Conventions:

Add a prefix of "Db" to base schemas that mirror database structures (e.g., DbProductSchema).
Consider descriptive names like create, read, update, or basic for operation schemas.

order-product.schema.ts

import * as z from 'zod';

// Establishing the base schema for products to ensure uniformity in operations.
const DbProductOrderSchema = z.object({
  productId: z.number(),
  quantity: z.number(),
  variantId: z.number(),
});

// Defining specific schemas for product operations like creation and reading.
export const OrderProductSchema = {
  create: DbProductOrderSchema,
  read: DbProductOrderSchema.extend({
    id: z.string().uuid(), // Adding a unique ID for identification
  }),
};

order.schema.ts

import * as z from 'zod';
import { OrderProductSchema } from './order-product.schema'; // Importing product schema for reusability

// Building the base schema for order data, including products using the basic ProductSchema.
const DbOrderSchema = z.object({
  total: z.number(),
  status: z.string(),
  paymentIntentId: z.string(),
  orderDate: z.date(),
  products: z.array(OrderProductSchema.create), // Ensuring products adhere to the basic schema
});

// Defining specific schemas for order operations like creation and reading.
export const OrderSchema = {
  create: DbOrderSchema.omit({ orderDate: true }).extend({
    orderDate: z.coerce.date(), // Coercing string to date format
  }), // Designed for creating new orders
  read: DbOrderSchema.extend({
    id: z.string().uuid(), // Including a unique ID for order identification
  }),
};

This approach will streamline project management tasks. An example for handling dates has been provided; similarly, you can incorporate product schemas as needed.

Answer 4

Implementing Modular Design:

To maintain consistency and accuracy, it is important to establish base schemas such as DbProductSchema and DbOrderSchema.
Customize schemas for specific use cases by utilizing methods like extend, pick, or omit.

Following Schema Naming Conventions:

Add a prefix of "Db" to base schemas that mirror database structures (e.g., DbProductSchema).
Consider descriptive names like create, read, update, or basic for operation schemas.

order-product.schema.ts

import * as z from 'zod';

// Establishing the base schema for products to ensure uniformity in operations.
const DbProductOrderSchema = z.object({
  productId: z.number(),
  quantity: z.number(),
  variantId: z.number(),
});

// Defining specific schemas for product operations like creation and reading.
export const OrderProductSchema = {
  create: DbProductOrderSchema,
  read: DbProductOrderSchema.extend({
    id: z.string().uuid(), // Adding a unique ID for identification
  }),
};

order.schema.ts

import * as z from 'zod';
import { OrderProductSchema } from './order-product.schema'; // Importing product schema for reusability

// Building the base schema for order data, including products using the basic ProductSchema.
const DbOrderSchema = z.object({
  total: z.number(),
  status: z.string(),
  paymentIntentId: z.string(),
  orderDate: z.date(),
  products: z.array(OrderProductSchema.create), // Ensuring products adhere to the basic schema
});

// Defining specific schemas for order operations like creation and reading.
export const OrderSchema = {
  create: DbOrderSchema.omit({ orderDate: true }).extend({
    orderDate: z.coerce.date(), // Coercing string to date format
  }), // Designed for creating new orders
  read: DbOrderSchema.extend({
    id: z.string().uuid(), // Including a unique ID for order identification
  }),
};

This approach will streamline project management tasks. An example for handling dates has been provided; similarly, you can incorporate product schemas as needed.

Error encountered: TypeScript type error in my server-side action in Next.js

Answer №1

Answer №2

Similar questions

Extending a module in a TypeScript definition file

Having trouble with Next-auth integration, MongoDB database, and AWS SES functionality not functioning correctly

Obtain precise JSON information using Node.js

What is preventing me from retrieving the data stored in my JSON?

Issue with Angular and CharJS: TypeError occurs when trying to read property '15' of an undefined value

What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

How do I maintain line breaks while using ajax to post a message via a url?

Adjust the zoom level when a location is detected using Mapbox

Find the item that has a specific value in its sub-property

Error message from @firebase/database: The Firebase Database URL could not be identified. Please ensure that you provide a Project ID when initializing firebase.initializeApp(). This issue is specific

The assets path is the directory within the installed package that houses the main application files following the completion of a

The Bootstrap 4 modal appears to be failing to load properly, as it is only

How to turn off JavaScript using Selenium WebDriver?

The JavaScript array created from parsing JSON returns a value of undefined

Exploring the World of AJAX with CodeIgniter

Tips on utilizing normalizr to flatten an array with various object types?

Steps for displaying an HTML table in Excel by clicking on a button

Show a collection of titles for unique post types

What is an alternative method to trigger a Bootstrap modal without using jQuery or bootstrap.js JavaScript code?

What are the steps to execute a module designed for NodeJS v6 LTS ES2015 in Meteor 1.4.x?