Theo's Typesafe Cult•8mo ago

trpc v11 error: The transformer property has moved to httpLink/httpBatchLink/wsLink

Just upgraded tRPC to v11 and I directly got this error: Type typeof SuperJSON is not assignable to type TypeError<"The transformer property has moved to httpLink/httpBatchLink/wsLink"> Type typeof SuperJSON is not assignable to type "The transformer property has moved to httpLink/httpBatchLink/wsLink" My client initialization of tRPC:

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import type { AppRouter } from "@weatherio/api";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data deserialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

import { httpBatchLink, loggerLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import superjson from "superjson";

import type { AppRouter } from "@weatherio/api";

const getBaseUrl = () => {
  if (typeof window !== "undefined") return ""; // browser should use relative url
  if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
  return `http://localhost:${process.env.PORT ?? 3000}`; // dev SSR should use localhost
};

/** A set of type-safe react-query hooks for your tRPC API. */
export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      /**
       * Transformer used for data deserialization from the server.
       *
       * @see https://trpc.io/docs/data-transformers
       */
      transformer: superjson,

      /**
       * Links used to determine request flow from client to server.
       *
       * @see https://trpc.io/docs/links
       */
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  /**
   * Whether tRPC should await queries when server rendering pages.
   *
   * @see https://trpc.io/docs/nextjs#ssr-boolean-default-false
   */
  ssr: false,
});

Solution:

Basically, turn this ```ts export const api = createTRPCNext<AppRouter>({ config() {...

Jump to solution

9 Replies

𝕾𝖎𝖑𝖛𝖊𝖗 𝕾𝖙𝖊𝖊𝖑•7mo ago

Temporarily you're able to remove transformer property from the object you're returning. tRPC docs say that you should only specify a transformer in their httpBatchLink(). Thus, that approach will work out, it will make TS yell at you due to the type mismatch. That should at least help you move forward until TS wizard comes here and magically fixes types on initTRPC

FleetAdmiralJakob 🗕 🗗 🗙•7mo ago

Hi, yes, I figured out thst I have to love the transformer out of the object thst im returning down to below the ssr stuff.

agadoo•7mo ago

I've had a similar issue - also upgraded to v11. when i leave the transformer as it is, everything works fine (i do get a TS error but can ignore it and still build/deploy); when I try moving the transformer into httpBatchLink as suggested, the public procedures work fine but the private ones don't (i get the code:'UNAUTHORISED' error; with the transformer moved into httpBatchLink, ctx.session is now null in the privateProcedure which would explain why this is happening). any ideas? (same for httpLink by the way) ok it's something to do with the cookies not being passed. if I console log out ctx.headers in the working old version i can see all the relevant stuff being passed (next-auth.csrf-token, session, user etc). moving transform to httpBatchLink it is just generic headers with no session/user/nextauth info

𝕾𝖎𝖑𝖛𝖊𝖗 𝕾𝖙𝖊𝖊𝖑•7mo ago

You shouldn't get typeErrs, unless you've entirely got rid of transformer. The idea was to move it out from it's inital wrapping object

Solution

𝕾𝖎𝖑𝖛𝖊𝖗 𝕾𝖙𝖊𝖊𝖑•7mo ago

Basically, turn this

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof               Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  ssr: false,
});

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      transformer: superjson,
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof               Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  ssr: false,
});

into this

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof               Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  ssr: false,
  transformer: superjson,
});

export const api = createTRPCNext<AppRouter>({
  config() {
    return {
      links: [
        loggerLink({
          enabled: (opts) =>
            process.env.NODE_ENV === "development" ||
            (opts.direction === "down" && opts.result instanceof               Error),
        }),
        httpBatchLink({
          url: `${getBaseUrl()}/api/trpc`,
          transformer: superjson,
        }),
      ],
    };
  },
  ssr: false,
  transformer: superjson,
});

𝕾𝖎𝖑𝖛𝖊𝖗 𝕾𝖙𝖊𝖊𝖑•7mo ago

Unless you've done your type of ts magic underneath the hood, that should work out just fine even while using private procedures

agadoo•7mo ago

yeah honestly am just using the default t3 setup -

export const api = createTRPCClient<AppRouter>({
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    // privateProcedures fail if this is uncommented
    // httpBatchLink({
    //   transformer,
    //   url: getUrl(),
    // }),
    /**
     * Custom RSC link that lets us invoke procedures without using http requests. Since Server
     * Components always run on the server, we can just call the procedure as a function.
     */
    () =>
      ({ op }) =>
        observable((observer) => {
          createContext()
            .then((ctx) => {
             
              return callTRPCProcedure({
                procedures: appRouter._def.procedures,
                path: op.path,
                getRawInput: async () => await op.input,
                ctx,
                type: op.type,
              });
            })
            .then((data) => {
              observer.next({ result: { data } });
              observer.complete();
            })
            .catch((cause: TRPCErrorResponse) => {
              observer.error(TRPCClientError.from(cause));
            });
        }),
  ],
  //@ts-expect-error this works but is deprecated
  transformer,
});

export const api = createTRPCClient<AppRouter>({
  links: [
    loggerLink({
      enabled: (op) =>
        process.env.NODE_ENV === "development" ||
        (op.direction === "down" && op.result instanceof Error),
    }),
    // privateProcedures fail if this is uncommented
    // httpBatchLink({
    //   transformer,
    //   url: getUrl(),
    // }),
    /**
     * Custom RSC link that lets us invoke procedures without using http requests. Since Server
     * Components always run on the server, we can just call the procedure as a function.
     */
    () =>
      ({ op }) =>
        observable((observer) => {
          createContext()
            .then((ctx) => {
             
              return callTRPCProcedure({
                procedures: appRouter._def.procedures,
                path: op.path,
                getRawInput: async () => await op.input,
                ctx,
                type: op.type,
              });
            })
            .then((data) => {
              observer.next({ result: { data } });
              observer.complete();
            })
            .catch((cause: TRPCErrorResponse) => {
              observer.error(TRPCClientError.from(cause));
            });
        }),
  ],
  //@ts-expect-error this works but is deprecated
  transformer,
});

transformer is just from the shared.ts

import superjson from "superjson";
export const transformer = superjson;

import superjson from "superjson";
export const transformer = superjson;

𝕾𝖎𝖑𝖛𝖊𝖗 𝕾𝖙𝖊𝖊𝖑•7mo ago

That seems like a strange behaviour, though I'm not that familiar with RSC version of T3 yet, to help out. All I can suggest is to debug the ctx everywhere starting from observable callback

agadoo•7mo ago

ty, that was my thought too, will give it a go. this is all because i've got another package that i absolutely can't do without that needs react-query ^5 (trpc 10 needs ^4 i believe)

Gaming

Programming

trpc v11 error: The transformer property has moved to httpLink/httpBatchLink/wsLink