20 replies

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.

TTC

Theo's Typesafe Cult•3y ago•

20 replies

PotatisMannen

create t3 app @ latest mutation result not mappable

  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.

create t3 app @ latest mutation result not mappable

Similar Threads

create t3 app @ latest mutation result not mappable

Similar Threads

Similar Threads

Similar Threads