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
//@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
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.
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
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
I get it what your trpc getall return looks lime
So this is what is happening look at your returned data and try to figure it out
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 : {} , 
oh I see what you mean , it's definitely not undefined and does have length
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
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 trpcoh, that's what it's for
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...
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
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
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