Proper way to fetch data from database to client component NextJS 14
Answered
Asiatic Lion posted this in #help-forum
Asiatic LionOP
Hello,
I have a kind of hard time to wrap my head around, how to efficiently and cleanly retrieve data from database to my client components.
I have a database connection done with Drizzle, and for majority of data retrievals on page level, I retrieve data with server action while page loads.
Now the issue I'm running, is that how conveniently fetch data to my client components, especially when client components are deeply nested in the DOM.
Example: I have LanguageSelect-component, which shows a list of all available languages defined in the database. This component is used in multiple places, on multiple pages.
Select is always part of react-hook-form, so that already is a client component. For now I've handled that in the way, that data is retrieved at the "lowest" point page.tsx, where Select field is required, and then prop-drilled to the form where it's used, and options passed as prop to the field.
This feels really difficult way to accomplish this, when in my mind, that component should always just take care of itself, and get
On of options that I thought would be to create just API for all these use-cases, and then implement something like
Any suggestions are very welcome, how this issue could be solved the cleanest way?
I have a kind of hard time to wrap my head around, how to efficiently and cleanly retrieve data from database to my client components.
I have a database connection done with Drizzle, and for majority of data retrievals on page level, I retrieve data with server action while page loads.
Now the issue I'm running, is that how conveniently fetch data to my client components, especially when client components are deeply nested in the DOM.
Example: I have LanguageSelect-component, which shows a list of all available languages defined in the database. This component is used in multiple places, on multiple pages.
Select is always part of react-hook-form, so that already is a client component. For now I've handled that in the way, that data is retrieved at the "lowest" point page.tsx, where Select field is required, and then prop-drilled to the form where it's used, and options passed as prop to the field.
This feels really difficult way to accomplish this, when in my mind, that component should always just take care of itself, and get
onSelect-function as a prop, so select is aware of what should happen when something is selected.On of options that I thought would be to create just API for all these use-cases, and then implement something like
React-Query or useSWR to project, and use those to fetch options from API on client, but that sounds kind of overcomplicating it.Any suggestions are very welcome, how this issue could be solved the cleanest way?
Answered by Sun bear
yes, but dont just use the useContext hook. its better to create a custom hook like useLanguages which would check if the context is null and always return the languages if under language provider, making the data from context type safe like when drilling it with props
8 Replies
Sun bear
you should always fetch data in top level server component if you can. prop drilling is difficult to maintain and debug, however you can create a top level context and a hook to use that context inside client components on that branch.
Asiatic LionOP
So since I need that example
LanguageSelector in multiple locations in my /dashboard/* pages, I should wrap /dashboard/layout.tsx page in React-Context, that would somehow be populated on first page load? Which could then be used across dashboard with useContext-hook?Sun bear
yes, but dont just use the useContext hook. its better to create a custom hook like useLanguages which would check if the context is null and always return the languages if under language provider, making the data from context type safe like when drilling it with props
Answer
Asiatic LionOP
But isn't context wrapper a client component, so if I wrap whole application in context, doesn't it make whole dashboard as client component?
Sun bear
no, children of context provider are not converted to client components
you can try wrapping layout in context then using an async component underneath it to fetch some data it will work as expected
Asiatic LionOP
Ok, I'll give that a try!
Asiatic LionOP
@Sun bear thanks for help! That did the trick! 👍