Override error in React tutorial on the add userId to the database step

Before adding the userId to the schema the line
await db.insert(images).values({
await db.insert(images).values({
presents no problems. Once I add userId to the schema it presents the expected error. Once I push the new schema to the db this error presents:
No overload matches this call.
Overload 1 of 2, '(value: { name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }): PgInsertBase<...>', gave the following error.
Type 'string | null' is not assignable to type 'string | SQL<unknown> | Placeholder<string, any>'.
Type 'null' is not assignable to type 'string | SQL<unknown> | Placeholder<string, any>'.
Overload 2 of 2, '(values: { name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }[]): PgInsertBase<...>', gave the following error.
Object literal may only specify known properties, and 'name' does not exist in type '{ name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }[]'.
No overload matches this call.
Overload 1 of 2, '(value: { name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }): PgInsertBase<...>', gave the following error.
Type 'string | null' is not assignable to type 'string | SQL<unknown> | Placeholder<string, any>'.
Type 'null' is not assignable to type 'string | SQL<unknown> | Placeholder<string, any>'.
Overload 2 of 2, '(values: { name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }[]): PgInsertBase<...>', gave the following error.
Object literal may only specify known properties, and 'name' does not exist in type '{ name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }[]'.
Solution:
Coercing it with the following removes the problem and in theory should be fine because auth() is called in the middleware and the userId should only be empty if they fail auth correct?
userId: `${metadata.userId}`,
userId: `${metadata.userId}`,
...
Jump to solution
2 Replies
GUD
GUDOP6mo ago
Along with this error:
The expected type comes from property 'userId' which is declared here on type '{ name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }'
The expected type comes from property 'userId' which is declared here on type '{ name: string | SQL<unknown> | Placeholder<string, any>; url: string | SQL<unknown> | Placeholder<string, any>; userId: string | SQL<unknown> | Placeholder<string, any>; id?: number | ... 2 more ... | undefined; createdAt?: SQL<...> | ... 2 more ... | undefined; updatedAt?: SQL<...> | ... 3 more ... | undefined; }'
Oddly enough everything seems to work fine locally. Building throws an error about missing configuration for DATABASE_URL which I suspect is related to further steps in this segment of the tutorial. So I finished that segment of the tutorial and everything builds and works but VS Code is still identifying a problem with the values parameters It appears the error results from userId being declared as a not null varchar 256 while the clerk auth function returns a userId that can be either string or null. declaring the userId for the database insert like so fixes the problem but is clearly not the correct answer:
userId: metadata.userId ?? '',
userId: metadata.userId ?? '',
This doesn't seem correct though as it may allow Drizzle to create a record without an actual userId attached which we would like rejected presumably.
Solution
GUD
GUD6mo ago
Coercing it with the following removes the problem and in theory should be fine because auth() is called in the middleware and the userId should only be empty if they fail auth correct?
userId: `${metadata.userId}`,
userId: `${metadata.userId}`,
Want results from more Discord servers?
Add your server