Theo's Typesafe Cult•15mo ago

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>
  );
}

6 Replies

julius•15mo ago

i think this is due to "bad" header forwarding. do you forward every header? iirc it has something to do with the transfer encoding header

nvegaterOP•15mo ago

Good point, this is how I configure my trpc client:

"use server";

import { getUrl, transformer } from "./shared";
import { httpBatchLink, httpLink, loggerLink, splitLink } from "@trpc/client";
import { experimental_createTRPCNextAppDirServer } from "@trpc/next/app-dir/server";
import { headers } from "next/headers";
import { type AppRouter } from "~/server/api/root";
import fetchPonyfill from "fetch-ponyfill";

export const api = experimental_createTRPCNextAppDirServer<AppRouter>({
  config() {
    return {
      transformer,
      links: [
        loggerLink({
          enabled: (op) =>
            process.env.NODE_ENV === "development" ||
            (op.direction === "down" && op.result instanceof Error),
        }),
        splitLink({
          condition(op) {
            // check for context property

skipBatch


            return op.context.skipBatch === true;
          },
          // when condition is true, use normal request
          true: httpLink({
            // vercel issue with fetch undici
            fetch: fetchPonyfill().fetch,
            url: getUrl(),
          }),
          // when condition is false, use batching
          false: httpBatchLink({
            fetch: fetchPonyfill().fetch,
            url: getUrl(),
            headers() {
              // Forward headers from the browser to the API
              return {
                ...Object.fromEntries(headers()),
                "x-trpc-source": "rsc",
              };
            },
          }),
        }),
      ],
    };
  },
});

the relevant part regarding your suggestion:

headers() {
              // Forward headers from the browser to the API
              return {
                ...Object.fromEntries(headers()),
                "x-trpc-source": "rsc",
              };
            },

Do you think the forwarded headers are correct?

julius•15mo ago

test

headers() {
  const h = new Map(headers())
  h.set("x-trpc-source", "rsc")
  h.remove("Transfer-Encoding")
  return Object.fromEntries(h)
}

headers() {
  const h = new Map(headers())
  h.set("x-trpc-source", "rsc")
  h.remove("Transfer-Encoding")
  return Object.fromEntries(h)
}

nvegaterOP•15mo ago

that worked!! thanks a lot! ... I'm curious, how did you know and where can I learn more about this topic ? 😄 and how can I mark your answer as the answer to this question 😄

julius•15mo ago

i ran into this issue a bit back and nailed the issue down to the streaming release and went from there 😅 wasn't fun debuggin that one

nvegaterOP•15mo ago

I also tried but I wasn't able to nailed it. I'm impressed 😄 thanks a lot!

Gaming

Programming

How to invalidate trpc queries in Next13