create t3 app @ latest mutation result not mappable

Ive made sample t3 app with the latest build just to create a trpc router that helps me reach an external API. all that needs to happen is that this API is pinged with a keyword and should return a json list. this json list returns, and i can even <pre> it out on the UI. but as soon as I map...nothing happens. P.S. I've gone ahead and tested the below code in a next 13 build and it runs perfectly fine. so the issue is 100% not the code. i think there is a bug with mapping over json arrays returned from TRPC endpoints...maybe this is related to some other issue that has been spotted already 🤷🏻
const { mutate, data, isLoading } =
api.businesses.getListOfMatches.useMutation();

console.log("list", data);

return (
<form
onSubmit={(e) => {
e.preventDefault();
// createPost.mutate({ name });
mutate(name);
}}
className="flex flex-col gap-2"
>
<input
type="text"
placeholder="Title"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full rounded-full px-4 py-2 text-black"
/>
<button
type="submit"
className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
disabled={createPost.isLoading}
>
{createPost.isLoading ? "Submitting..." : "Submit"}
</button>
{data?.map((item: any) => {
<pre>{JSON.stringify(item)}</pre>;
})}
</form>
);
}
const { mutate, data, isLoading } =
api.businesses.getListOfMatches.useMutation();

console.log("list", data);

return (
<form
onSubmit={(e) => {
e.preventDefault();
// createPost.mutate({ name });
mutate(name);
}}
className="flex flex-col gap-2"
>
<input
type="text"
placeholder="Title"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full rounded-full px-4 py-2 text-black"
/>
<button
type="submit"
className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
disabled={createPost.isLoading}
>
{createPost.isLoading ? "Submitting..." : "Submit"}
</button>
{data?.map((item: any) => {
<pre>{JSON.stringify(item)}</pre>;
})}
</form>
);
}
the console logs clearly show data. i have no idea why this is not mapping the data.
11 Replies
cje
cje13mo ago
can you provide a repo that shows a minimal reproduction?
PotatisMannen
PotatisMannenOP13mo ago
GitHub
GitHub - merveillevaneck/puppet-master: testing PSIRA registration ...
testing PSIRA registration lookups using trpc and scraping - GitHub - merveillevaneck/puppet-master: testing PSIRA registration lookups using trpc and scraping
PotatisMannen
PotatisMannenOP13mo ago
following up with repro instructions in a sec.... make sure to do the following: - assign a db to the project (can be a db related to another project as the drizzle config does have a table prefix set up so it wont interfere with the rest of your data) - add the db url to .env as the DATABASE_URL field - run pnpm db:gen - run pnpm db:push - run pnpm dev - go to localhost:3000 - type in vetus and hit enter - see no items mapped into the UI but see console log with data showing up i dont have time to make another isolated smaller nextjs project to test. as im trying to continue testing this third party API for a deadline next week. but this repo should allow to at least debug the issue and figure out if its really a bug let me know if i should submit a bug report on next or trpc
cje
cje13mo ago
try this
names?.map((item: string) => {
return <span key={item}>{item}</span>;
})}
names?.map((item: string) => {
return <span key={item}>{item}</span>;
})}
also there are about a million things wrong with your code starting with fetching from useMutation but thats why youre not seeing data on the page
PotatisMannen
PotatisMannenOP13mo ago
thank the heavens you spotted my mistake okay, a million things is a bit of an exaggeration....but thanks for giving that..uhh...advise i guess also id like to point out that this is a fast and easy prototype that im not planning on replicating as is, so not sure why you feel the need to point it out
Finn
Finn13mo ago
be less deffensive when you ask for help in the future. might make things easier
PotatisMannen
PotatisMannenOP13mo ago
Im more than happy to hear whats wrong with the actual code 🙂 “a million things wrong” doesnt really explain much
cje
cje13mo ago
offering to open an issue on trpc or next, but refusing to provide a minimal reproduction repo, is a huge waste of maintainers time, especially when the cause was a simple syntax error in your own code. over there they would probably just have closed your issue without a response.
PotatisMannen
PotatisMannenOP12mo ago
Ya thats fair. Not arguing with you about that at all! I also dont claim to not have made a mistake. As i said “you found my mistake”. I guess im more referring to the claim that theres a million things wrong with the code. You’re not wrong, but would love to hear what the actual problems are 🙂
Finn
Finn12mo ago
so not sure why you feel the need to point it out
deranged
PotatisMannen
PotatisMannenOP12mo ago
Are yall serious 😂 its fine yall. Ill just eventually figure it out myself. Sorry for wasting everyones time 🕰️
Want results from more Discord servers?
Add your server