ambitious-aqua

error while using react-query prefetching and SSR in nextJs with Shadcn/ui

Hello, I'm creating a data-table component with shadcn/ui and I've noticed that when when I try to fetch the data and pass it to component It takes a little while to render, since the component takes a data prop of type <Stock[]>, but the data returned by the query adds an undefined type to it so I have to wait until Its successful then pass it to the component. So I thought If of prefetching the query according to the docs to make it a little faster, but I get this error in the console and nothing changed pretty much. Here is the code to the important files (since the post is too long I had to put in a file) and the error from the console: the error:

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["stock"]

Warning: Encountered two children with the same key, `0`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Query data cannot be undefined. Please make sure to return a value other than undefined from your query function. Affected query key: ["stock"]

Warning: Encountered two children with the same key, `0`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

code_1.txt

5 Replies

ambitious-aquaOP•3y ago

Can someone answer me please 🥲 @TkDodo 🔮 sorry for mentioning but can you please take a look 🙏

generous-apricot•3y ago

Show your code in a structured way. This is hard to help And if your code is too long to post, who would read it??

ambitious-aquaOP•3y ago

The code is not even long compared to some I've already seen in some other posts, it's cause im new to discord and I don't have nitro to write a long post, the code is just copy paste from the documentation just instead of the Posts component it has I've put mine.

flat-fuchsia•3y ago

this code transforms your Promise to a resolved promise of undefined:

.catch((error) => console.error(error)),

.catch((error) => console.error(error)),

it's in my FAQs: https://tkdodo.eu/blog/react-query-fa-qs#logging

React Query FAQs

Answering the most frequently asked React Query questions

ambitious-aquaOP•3y ago

Thank you sir

Gaming

Programming

error while using react-query prefetching and SSR in nextJs with Shadcn/ui

Did you find this page helpful?