jlarmst Posts

jlarmst

•Created by jlarmst on 10/14/2024 in #❓-help

v11 incompatible with `@tanstack/react-query` > 5.59.9

My code, for example, works fine with v5.59.9:

  const [greet] = trpc.tfdExample.greet.useSuspenseQuery(
    "there tfdExample!",
    {
      initialData,
    },
  );

  const [greet] = trpc.tfdExample.greet.useSuspenseQuery(
    "there tfdExample!",
    {
      initialData,
    },
  );

But, now errors in v5.59.13 with:

Argument of type '{ initialData: { greeting: `hello, ${string}!`; } | undefined; }' is not assignable to parameter of type 'UseTRPCSuspenseQueryOptions<{ greeting: `hello, ${string}!`; }, { greeting: `hello, ${string}!`; }, TRPCClientErrorLike<{ input: string; output: { greeting: `hello, ${string}!`; }; transformer: true; errorShape: DefaultErrorShape; }>>'.
  Property 'queryFn' is missing in type '{ initialData: { greeting: `hello, ${string}!`; } | undefined; }' but required in type 'UseTRPCSuspenseQueryOptions<{ greeting: `hello, ${string}!`; }, { greeting: `hello, ${string}!`; }, TRPCClientErrorLike<{ input: string; output: { greeting: `hello, ${string}!`; }; transformer: true; errorShape: DefaultErrorShape; }>>'.

Argument of type '{ initialData: { greeting: `hello, ${string}!`; } | undefined; }' is not assignable to parameter of type 'UseTRPCSuspenseQueryOptions<{ greeting: `hello, ${string}!`; }, { greeting: `hello, ${string}!`; }, TRPCClientErrorLike<{ input: string; output: { greeting: `hello, ${string}!`; }; transformer: true; errorShape: DefaultErrorShape; }>>'.
  Property 'queryFn' is missing in type '{ initialData: { greeting: `hello, ${string}!`; } | undefined; }' but required in type 'UseTRPCSuspenseQueryOptions<{ greeting: `hello, ${string}!`; }, { greeting: `hello, ${string}!`; }, TRPCClientErrorLike<{ input: string; output: { greeting: `hello, ${string}!`; }; transformer: true; errorShape: DefaultErrorShape; }>>'.

tRPC version is 11.0.0-rc.571

4 replies

TtRPC

•Created by jlarmst on 4/21/2024 in #❓-help

v11 `Invalid Content-Type header`

The most recent update of v11 seems to break with:

Invalid Content-Type header. This request may not be supported by your tRPC Adapter, or possibly by tRPC at all

Invalid Content-Type header. This request may not be supported by your tRPC Adapter, or possibly by tRPC at all

The related commits in the rc.346 are probably: - https://github.com/trpc/trpc/pull/5613 - https://github.com/trpc/trpc/pull/5652 I am using the react and vanilla fetch adapters, so according to the docs https://trpc.io/docs/migrate-from-v10-to-v11#explicit-content-type-checks-non-breaking my code should not be breaking I went ahead and downgraded to 11.0.0-next-beta.318 and it works fine

15 replies

TtRPC

•Created by jlarmst on 12/18/2023 in #❓-help

Usage with zod-validation-error

Has anyone tried using trpc with https://www.npmjs.com/package/zod-validation-error ?

2 replies

TtRPC

•Created by jlarmst on 12/16/2023 in #❓-help

SSR with initialData throws error

I'm using SSR with Astro and have a client that looks like

export type TfdExampleGreet = RouterOutput["tfdExample"]["greet"];
export type TfdExampleClientTrpcProps = {
  readonly initialData?: TfdExampleGreet;
};
function TfdExampleClientTrpc({
  initialData,
}: TfdExampleClientTrpcProps): JSX.Element {
  const [greet, greetQuery] = trpc.tfdExample.greet.useSuspenseQuery(
    "there tfdExample!",
    {
      initialData,
    },
  );

  console.log({ greet, greetQuery });

  return <p>{greet.greeting}</p>;
}

export type TfdExampleGreet = RouterOutput["tfdExample"]["greet"];
export type TfdExampleClientTrpcProps = {
  readonly initialData?: TfdExampleGreet;
};
function TfdExampleClientTrpc({
  initialData,
}: TfdExampleClientTrpcProps): JSX.Element {
  const [greet, greetQuery] = trpc.tfdExample.greet.useSuspenseQuery(
    "there tfdExample!",
    {
      initialData,
    },
  );

  console.log({ greet, greetQuery });

  return <p>{greet.greeting}</p>;
}

It works fine if I create a client:only react component or if I fetch the data with the vanilla client in Astro.
But, trying to use SSR with the component and passing the initialData received from the vanilla client throws an error

<template data-msg="Unexpected token U in JSON at position 4" data-stck="
    at TfdExampleClientTrpc (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55136:16)
    at Suspense
    at ErrorBoundary (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:51192:9)
    at DefaultFallback (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55052:3)
    at QueryClientProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:53955:7)
    at TRPCProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:54537:13)
    at TrpcProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55107:25)
    at ClientTrpc (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55120:3)"></template>

<template data-msg="Unexpected token U in JSON at position 4" data-stck="
    at TfdExampleClientTrpc (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55136:16)
    at Suspense
    at ErrorBoundary (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:51192:9)
    at DefaultFallback (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55052:3)
    at QueryClientProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:53955:7)
    at TRPCProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:54537:13)
    at TrpcProvider (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55107:25)
    at ClientTrpc (file:///var/task/packages/astro/tfd-example/dist/server/entry.mjs:55120:3)"></template>

Also, I'm using v11

    "@trpc/client": "11.0.0-alpha-next-2023-12-15-18-34-32.118",
    "@trpc/react-query": "11.0.0-alpha-next-2023-12-15-18-34-32.118",
    "@trpc/server": "11.0.0-alpha-next-2023-12-15-18-34-32.118",

    "@trpc/client": "11.0.0-alpha-next-2023-12-15-18-34-32.118",
    "@trpc/react-query": "11.0.0-alpha-next-2023-12-15-18-34-32.118",
    "@trpc/server": "11.0.0-alpha-next-2023-12-15-18-34-32.118",

Also, I know that the initialData is not undefined because I'm rendering it to the screen with Astro

9 replies