9 replies

How to invalidate trpc queries in Next13

The code speaks for itself. I want to invalidate a trpc query in a server action but I get a super weird error. (I know I can do it with state and client component). Is there a way to do that in the server action ?

Error: Unhandled Runtime Error
Error: invalid json response body at http://localhost:3000/api/trpc/user.myName,post.getLatest?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%2C%221%22%3A%7B%22json%22%3Anull%2C%22meta%22%3A%7B%22values%22%3A%5B%22undefined%22%5D%7D%7D%7D reason: Unexpected token I in JSON at position 0

import { api } from "~/trpc/server";
import { createPost } from "~/utils/actions";
import { Button } from "~/components/ui/Button";
import { revalidatePath } from "next/cache";

export async function CrudShowcase() {
  const latestPost = await api.post.getLatest.query();

  async function create(formData: FormData) {
    "use server";
    await createPost(formData);
    revalidatePath("/");
  }

  return (
    <div className="w-full max-w-xs">
      {latestPost ? (
        <p className="truncate">Your most recent post: {latestPost.text}</p>
      ) : (
        <p>You have no posts yet.</p>
      )}

      <form action={create} className="flex flex-col gap-2">
        <input
          type="text"
          name="text"
          placeholder="Title"
          className="w-full rounded bg-primary p-2 text-background"
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

import { api } from "~/trpc/server";
import { createPost } from "~/utils/actions";
import { Button } from "~/components/ui/Button";
import { revalidatePath } from "next/cache";

export async function CrudShowcase() {
  const latestPost = await api.post.getLatest.query();

  async function create(formData: FormData) {
    "use server";
    await createPost(formData);
    revalidatePath("/");
  }

  return (
    <div className="w-full max-w-xs">
      {latestPost ? (
        <p className="truncate">Your most recent post: {latestPost.text}</p>
      ) : (
        <p>You have no posts yet.</p>
      )}

      <form action={create} className="flex flex-col gap-2">
        <input
          type="text"
          name="text"
          placeholder="Title"
          className="w-full rounded bg-primary p-2 text-background"
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

TTC

Theo's Typesafe Cult•3y ago•

9 replies

nvegater

How to invalidate trpc queries in Next13

import { api } from "~/trpc/server";
import { createPost } from "~/utils/actions";
import { Button } from "~/components/ui/Button";
import { revalidatePath } from "next/cache";

export async function CrudShowcase() {
  const latestPost = await api.post.getLatest.query();

  async function create(formData: FormData) {
    "use server";
    await createPost(formData);
    revalidatePath("/");
  }

  return (
    <div className="w-full max-w-xs">
      {latestPost ? (
        <p className="truncate">Your most recent post: {latestPost.text}</p>
      ) : (
        <p>You have no posts yet.</p>
      )}

      <form action={create} className="flex flex-col gap-2">
        <input
          type="text"
          name="text"
          placeholder="Title"
          className="w-full rounded bg-primary p-2 text-background"
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

import { api } from "~/trpc/server";
import { createPost } from "~/utils/actions";
import { Button } from "~/components/ui/Button";
import { revalidatePath } from "next/cache";

export async function CrudShowcase() {
  const latestPost = await api.post.getLatest.query();

  async function create(formData: FormData) {
    "use server";
    await createPost(formData);
    revalidatePath("/");
  }

  return (
    <div className="w-full max-w-xs">
      {latestPost ? (
        <p className="truncate">Your most recent post: {latestPost.text}</p>
      ) : (
        <p>You have no posts yet.</p>
      )}

      <form action={create} className="flex flex-col gap-2">
        <input
          type="text"
          name="text"
          placeholder="Title"
          className="w-full rounded bg-primary p-2 text-background"
        />
        <Button type="submit">Submit</Button>
      </form>
    </div>
  );
}

How to invalidate trpc queries in Next13

Similar Threads

How to invalidate trpc queries in Next13

Similar Threads

Similar Threads

Similar Threads