PotatisMannen Posts - Answer Overflow

PotatisMannen

Explore posts from servers

•Created by PotatisMannen on 11/5/2023 in #questions

trpc mutations for fetching data

Recently was told that using mutations to fetch list data is bad. I can agree with this on a high level from the naming convention, but I'm curious what the deeper reasons are. Are there specific "internal" or architecture related reasons why mutations shouldnt be used to search data at all?

5 replies

TTCTheo's Typesafe Cult

•Created by PotatisMannen on 11/4/2023 in #questions

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.

21 replies

Gaming

Programming