I Cant connect to my planetscale database, also using drizzle please help.
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
In my project i have a database file with my scheme.ts file which contains a simple model for my users table with firstname, id, last name etc. i then have an index.ts file which is the connection file. I am 100% sure that it is using the correct details of the planetscale database as i am console.logging the output and seeing all the correct details in the console. My drizzle.config file is in the root directory and i am quite sure that it doesnt have any errors either as i have migrated and added records and both the drizzle studio and planetscale seem to be communicating well with no errors. The problem comes when i am trying to display the information in the user table (which is only one record) on my dashboard page. i keep gettings errors and it just wont show me the data. Please can someone help me i am desperate at this point.
Answered by Ray
because you are trying to query the database in a client component, you should use it on a server component
30 Replies
@Asian black bear In my project i have a database file with my scheme.ts file which contains a simple model for my users table with firstname, id, last name etc. i then have an index.ts file which is the connection file. I am 100% sure that it is using the correct details of the planetscale database as i am console.logging the output and seeing all the correct details in the console. My drizzle.config file is in the root directory and i am quite sure that it doesnt have any errors either as i have migrated and added records and both the drizzle studio and planetscale seem to be communicating well with no errors. The problem comes when i am trying to display the information in the user table (which is only one record) on my dashboard page. i keep gettings errors and it just wont show me the data. Please can someone help me i am desperate at this point.
because you are trying to query the database in a client component, you should use it on a server component
Answer
@Ray because you are trying to query the database in a client component, you should use it on a server component
Asian black bearOP
Failed to compile
./app/dashboard/page.tsx:1:9
Parsing ecmascript source code failed
2 | import { db } from "@/database/index";
3 |
4 | interface User {
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
./app/dashboard/page.tsx:1:9
Parsing ecmascript source code failed
1 | import { useEffect, useState } from "react";| ^^^^^^^^^
2 | import { db } from "@/database/index";
3 |
4 | interface User {
You're importing a component that needs useEffect. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
Learn more: https://nextjs.org/docs/getting-started/react-essentials
but then i get this error when doing that
you don't need
useState and useEffectAsian black bearOP
Ok so how should the code look like?
all you need is turn the component to async and
const user = await db.query.users.findFirst()Asian black bearOP
ok i will try this now, do i even need the interface part then?
thank you mate
your a massive help for a noob like me
no, drizzle should return the type of the result for you
@Ray https://nextjs.org/learn/dashboard-app
have a look on this course
Asian black bearOP
Ok i will do i think i did that a while ago
will check it out again and pay attention
Cape lion
Ray is a nice man.
He has extensive knowledge about Next.js.
Asian black bearOP
i dont know why everytime i ask ai it keeps telling me to use the useffect and usestates
@Asian black bear i dont know why everytime i ask ai it keeps telling me to use the useffect and usestates
have you mentioned you want to fetch on server side?
Asian black bearOP
i will try this and see what it says
is this what you mean?
Cape lion
const data = await db.query.users. findFirst;
Asian black bearOP
Unhandled Runtime Error
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
<div children={function}>
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
<div children={function}>
also it still has error under the data
const data = await db.query.users.findFirst()Asian black bearOP
you didn't call it
Asian black bearOP
I did it thank you so much
massive help
no prob