Theo's Typesafe Cult•13mo ago

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•13mo ago

can you provide a repo that shows a minimal reproduction?

PotatisMannenOP•13mo ago

https://github.com/merveillevaneck/puppet-master

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

PotatisMannenOP•13mo 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•13mo 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

PotatisMannenOP•13mo 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•13mo ago

be less deffensive when you ask for help in the future. might make things easier

PotatisMannenOP•13mo ago

Im more than happy to hear whats wrong with the actual code 🙂 “a million things wrong” doesnt really explain much

cje•13mo 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.

PotatisMannenOP•13mo 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•13mo ago

so not sure why you feel the need to point it out

PotatisMannenOP•13mo ago

Are yall serious 😂 its fine yall. Ill just eventually figure it out myself. Sorry for wasting everyones time 🕰️

Gaming

Programming

create t3 app @ latest mutation result not mappable