onSuccess invalidate

I'm trying to follow along with Theo's T3 tutorial using the latest Next version and the app router. The "setInput("")" and the invalidation don't seem to be working inside of onSuccess, the console.log is being called, what am I missing? Is this supposed to work?

"use client";

import { useUser } from "@clerk/nextjs";
import Image from "next/image";
import { Loader } from "./loader";
import { api } from "~/trpc/react";
import { useState } from "react";

export function CreatePost() {
  const { user } = useUser();
  const utils = api.useUtils();
  const [input, setInput] = useState<string>("");
  const { mutate, isLoading } = api.post.create.useMutation({
    onSuccess: () => {
      console.log("THIS IS BEING LOGGED");
      // INPUT IS NO BEING RESET
      setInput("");
      // PAGE IS NOT SHOWING FRESH DATA
      void utils.post.getAll.invalidate();
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutate({ content: input });
  };

  if (!user) return <Loader />;

  return (
    <div className="flex flex-1 items-center gap-3">
      <form onSubmit={handleSubmit} className="flex grow">
        <input
          onChange={(e) => setInput(e.target.value)}
          placeholder="Start typing something..."
          type="text"
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading}
        >
          {isLoading ? <Loader size={18} /> : "Post"}
        </button>
      </form>
    </div>
  );
}

"use client";

import { useUser } from "@clerk/nextjs";
import Image from "next/image";
import { Loader } from "./loader";
import { api } from "~/trpc/react";
import { useState } from "react";

export function CreatePost() {
  const { user } = useUser();
  const utils = api.useUtils();
  const [input, setInput] = useState<string>("");
  const { mutate, isLoading } = api.post.create.useMutation({
    onSuccess: () => {
      console.log("THIS IS BEING LOGGED");
      // INPUT IS NO BEING RESET
      setInput("");
      // PAGE IS NOT SHOWING FRESH DATA
      void utils.post.getAll.invalidate();
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutate({ content: input });
  };

  if (!user) return <Loader />;

  return (
    <div className="flex flex-1 items-center gap-3">
      <form onSubmit={handleSubmit} className="flex grow">
        <input
          onChange={(e) => setInput(e.target.value)}
          placeholder="Start typing something..."
          type="text"
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading}
        >
          {isLoading ? <Loader size={18} /> : "Post"}
        </button>
      </form>
    </div>
  );
}

"use client";

import { useUser } from "@clerk/nextjs";
import Image from "next/image";
import { Loader } from "./loader";
import { api } from "~/trpc/react";
import { useState } from "react";

export function CreatePost() {
  const { user } = useUser();
  const utils = api.useUtils();
  const [input, setInput] = useState<string>("");
  const { mutate, isLoading } = api.post.create.useMutation({
    onSuccess: () => {
      console.log("THIS IS BEING LOGGED");
      // INPUT IS NO BEING RESET
      setInput("");
      // PAGE IS NOT SHOWING FRESH DATA
      void utils.post.getAll.invalidate();
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutate({ content: input });
  };

  if (!user) return <Loader />;

  return (
    <div className="flex flex-1 items-center gap-3">
      <form onSubmit={handleSubmit} className="flex grow">
        <input
          onChange={(e) => setInput(e.target.value)}
          placeholder="Start typing something..."
          type="text"
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading}
        >
          {isLoading ? <Loader size={18} /> : "Post"}
        </button>
      </form>
    </div>
  );
}

"use client";

import { useUser } from "@clerk/nextjs";
import Image from "next/image";
import { Loader } from "./loader";
import { api } from "~/trpc/react";
import { useState } from "react";

export function CreatePost() {
  const { user } = useUser();
  const utils = api.useUtils();
  const [input, setInput] = useState<string>("");
  const { mutate, isLoading } = api.post.create.useMutation({
    onSuccess: () => {
      console.log("THIS IS BEING LOGGED");
      // INPUT IS NO BEING RESET
      setInput("");
      // PAGE IS NOT SHOWING FRESH DATA
      void utils.post.getAll.invalidate();
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    mutate({ content: input });
  };

  if (!user) return <Loader />;

  return (
    <div className="flex flex-1 items-center gap-3">
      <form onSubmit={handleSubmit} className="flex grow">
        <input
          onChange={(e) => setInput(e.target.value)}
          placeholder="Start typing something..."
          type="text"
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading}
        >
          {isLoading ? <Loader size={18} /> : "Post"}
        </button>
      </form>
    </div>
  );
}

onSuccess invalidate

Similar Threads

Similar Threads

Similar Threads