Theo's Typesafe Cult•14mo ago

Help setting up primsa + planetscale with t3 app.

I have followed the docs when trying to setup a new t3 app and using all the default values everything worked fine. I then tried adding a planetscale database to the project. From what I understand everything is correct, but when trying to create a post it doesn't appear to save it in the database. I am seeing no errors from the UI or in the npm run dev output in the terminal so unsure what the problem appears to be. I have: Updated my .env file to have the database connection string. Added next auth info & discord app info Run npx prisma db push And can see the tables have populated in the planetscale web UI. Is there some other step I have missed to enable the database upserts?

1 Reply

oldbenOP•14mo ago

Bump. Looks like the form submit is failing somewhere, but without any errors or logs I am not understanding what the problem is. Here is a video of me trying to console log around and in the mutation. https://youtu.be/l0Z8kppWPLQ Any idea how I can turn on logging for this part of the app to see what the problem is? Bump. I didn't figure out what the issue was. I ended up deleting the t3 app on my machine and setting up a new one without the next experimental features. I created my own CreatePost component:

 
function CreatePost() {
  const [name, setName] = useState("");

  const {
    data: post,
    isLoading: queryLoading,
    refetch,
  } = api.post.getLatest.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });

const { isLoading: postLoading, mutate: postPost } =
    api.post.create.useMutation({
      onSuccess: async () => {
        await refetch();
        setName("");
      },
    });

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (postLoading || queryLoading) return;

    setName(e.target.value);
  };

  const renderPost = () => {
    let newPost = "No posts to show";
    if (queryLoading) {
      newPost = "Loading ...";
    }

    if (!queryLoading && post) {
      return (newPost = post.name);
    }

    return <span>{newPost}</span>;
  };
  const buttonLoading = postLoading || queryLoading;
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <p className="text-md text-center text-white">{renderPost()}</p>
      <input value={name} onChange={handleNameChange} />
      <button
        type="button"
        className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
        onClick={(e) => {
          e.preventDefault();
          try {
            postPost({ name: name.trim() });
          } catch (err) {}
        }}
        disabled={buttonLoading}
      >
        {buttonLoading ? "loading..." : "Create Post"}
      </button>
    </div>
  );
}

 
function CreatePost() {
  const [name, setName] = useState("");

  const {
    data: post,
    isLoading: queryLoading,
    refetch,
  } = api.post.getLatest.useQuery(undefined, {
    refetchOnWindowFocus: false,
  });

const { isLoading: postLoading, mutate: postPost } =
    api.post.create.useMutation({
      onSuccess: async () => {
        await refetch();
        setName("");
      },
    });

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (postLoading || queryLoading) return;

    setName(e.target.value);
  };

  const renderPost = () => {
    let newPost = "No posts to show";
    if (queryLoading) {
      newPost = "Loading ...";
    }

    if (!queryLoading && post) {
      return (newPost = post.name);
    }

    return <span>{newPost}</span>;
  };
  const buttonLoading = postLoading || queryLoading;
  return (
    <div className="flex flex-col items-center justify-center gap-4">
      <p className="text-md text-center text-white">{renderPost()}</p>
      <input value={name} onChange={handleNameChange} />
      <button
        type="button"
        className="rounded-full bg-white/10 px-10 py-3 font-semibold text-white no-underline transition hover:bg-white/20"
        onClick={(e) => {
          e.preventDefault();
          try {
            postPost({ name: name.trim() });
          } catch (err) {}
        }}
        disabled={buttonLoading}
      >
        {buttonLoading ? "loading..." : "Create Post"}
      </button>
    </div>
  );
}

Gaming

Programming

Help setting up primsa + planetscale with t3 app.