TTC
Theo's Typesafe Cultβ€’9mo ago
FleetAdmiralJakob πŸ—• πŸ—— πŸ—™

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
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘β€’9mo 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 πŸ—• πŸ—— πŸ—™
FleetAdmiralJakob πŸ—• πŸ—— πŸ—™OPβ€’9mo 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
agadooβ€’9mo 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
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘β€’9mo 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
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘β€’9mo 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,
});
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘β€’9mo 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
agadooβ€’9mo 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;
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘
π•Ύπ–Žπ–‘π–›π–Šπ–— π•Ύπ–™π–Šπ–Šπ–‘β€’9mo 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
agadooβ€’9mo 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)
Want results from more Discord servers?
Add your server