Theo's Typesafe Cult•3mo ago

T3 Stack with App router - Can't see new posts after mutation

Hey, I'm using the default T3 stack with App router, TRPC and Drizzzzzle. I have 2 pages: /posts and /posts/new. Why when submitting a new post, when I go to /posts I do not see the newly created post, only after a refresh? Please help, I'm losing my mind over App Router and kinda frankly hating it so far

3 Replies

Neto•3mo ago

Did you revalidate the path?

Neto•3mo ago

https://nextjs.org/docs/app/api-reference/functions/revalidatePath

Functions: revalidatePath | Next.js

API Reference for the revalidatePath function.

DorOP•3mo ago

I took a look on it now and tried to implement it and it doesn't solve the problem. The only thing that solved my issue is importing useQueryClient from @tanstack/react-query and using queryClient.invalidateQueries() But I feel very uncomfortable with that, there must be a better solution

  const mutation = api.post.create.useMutation({
    async onSuccess(data) {
      // show message post was created!
      await queryClient.invalidateQueries() <--- this is the only thing that shows me the new data in /posts
      router.push("/posts");
    },
  });

  const mutation = api.post.create.useMutation({
    async onSuccess(data) {
      // show message post was created!
      await queryClient.invalidateQueries() <--- this is the only thing that shows me the new data in /posts
      router.push("/posts");
    },
  });

Gaming

Programming

T3 Stack with App router - Can't see new posts after mutation