how to properly handle passing trpc results as parameters?

I have the post data fetched like this: const {data} = api.posts.getAll.useQuery(); then I passed it to a component
//@ts-ignore <FeedThread posts={data} />} I ignored the undefined error because I'd like to handle the display in the component. the picture shows how I defined FeedThread the problem is the if statement was never true even if the posts is empty or undefined the log shows the array is emptu , but in the code posts.length is undefined I can do if (!posts.length) which works, but I'd like to know if there's a proper way to handle this situation edit: ok now that the data is not null, post.length is still undefined. I'm baffled
23 Replies
dopeinc
dopeinc2y ago
Fetch the post inside the feed thread first unless they should be somewhere else that eay you dont need to ts ignore? -and im not sure about the other question seems like you have an object of array can you do post.post ? I would console log the data before entering the feed thing and see from@there
低级黑小明👑
because I'm trying to make this a reusable component,, many other parts of the site need to display some sort of feed data, that's why I'm doing this.
dopeinc
dopeinc2y ago
I see Also checking if an array is null or undefined and <0 is common error checking for arrays
低级黑小明👑
seems like post.length is undefined no matter what
dopeinc
dopeinc2y ago
What is post is it an object or an array
低级黑小明👑
it's this const {data} = api.posts.getAll.useQuery();, basically it's what I get from trpc
dopeinc
dopeinc2y ago
I get it what your trpc getall return looks lime
dopeinc
dopeinc2y ago
So this is what is happening look at your returned data and try to figure it out
dopeinc
dopeinc2y ago
You are trying to acces lenght on a object is my biggest guest Figure out what you are returning for your get All query and either return only the array or access object property properly Ive never seen type declared as : () always : {} , thinkies
低级黑小明👑
oh I see what you mean , it's definitely not undefined and does have length
dopeinc
dopeinc2y ago
Can also be me whos wrong about the type thing I always extract my type to a type TypeProps = { delcared here} makes it easier to read
低级黑小明👑
but within 1 second it's defined and undefined at the same time
dopeinc
dopeinc2y ago
type ItemProps = { href: string; name: string; }; export const Item = ({ href, name }: ItemProps) => { Yeah because you are probably accessing a null object at first than your query gets in So the frist pale blue is query -> to server then server -> back to client You could read on trpc
低级黑小明👑
oh, that's what it's for
dopeinc
dopeinc2y ago
Logger Link | tRPC
loggerLink is a link that lets you implement a logger for your tRPC client. It allows you to see more clearly what operations are queries, mutations, or subscriptions, their requests, and responses. The link, by default, prints a prettified log to the browser's console. However, you can customize the logging behavior and the way it prints to the...
dopeinc
dopeinc2y ago
t3 enables it by defaulkt but its not there by default you need to implement it look for that code in your src youll find it
低级黑小明👑
alright, I extracted the type , it can read the length now
低级黑小明👑
it's worked!!!! omg than you so much
dopeinc
dopeinc2y ago
Yw ! Extracting type make it easier to grasp imo You can set the thread as solved thank you and keep on programming
低级黑小明👑
it does. I'm new to all of this so it seems weird to me
dopeinc
dopeinc2y ago
No worries I only have 4 years behind the scene it wil always be weird we are always learning do you need to return an object ? I guess because you have an author in there ? I would rename the first post to something that makes more sens likes postWithAuthor.posts if you get it because posts.posts seems weird from an external point of view
低级黑小明👑
you are absolutely right. yes the naming wasn't corrret. I thought prisma and typescirpt would just return a post object with a user in it like traditional oop languages, but no, it's a post & user. It did cost problems down the line, I think I need to take a look in to the typescript type system
Want results from more Discord servers?
Add your server