Michael Schaufelberger
Michael Schaufelberger
Explore posts from servers
TtRPCTTCTheo's Typesafe CultXXataDTDrizzle Team
PostsComments
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
Okay, this is not true. It only works if there's a prefetch going on. Probably related to https://github.com/vercel/next.js/discussions/60640
24 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
Note: This has fixed itself after upgrading to a new @tanstack/react-query version. Only updating the rc version of tRPC was somehow insufficient 🤷‍♂️ 
    "@tanstack/react-query": "^5.60.6",
    "@tanstack/react-query-devtools": "^5.60.6",
    "@trpc/client": "11.0.0-rc.638",
    "@trpc/react-query": "11.0.0-rc.638",
    "@trpc/server": "11.0.0-rc.638",
    "@tanstack/react-query": "^5.60.6",
    "@tanstack/react-query-devtools": "^5.60.6",
    "@trpc/client": "11.0.0-rc.638",
    "@trpc/react-query": "11.0.0-rc.638",
    "@trpc/server": "11.0.0-rc.638",
24 replies
TtRPC
Created by kinsyu on 6/22/2024 in #❓-help
createTRPCReact cannot be named without a reference to x
What's your tsconfig? Do you have something regarding declaration enabled? I think I had similar issues with declaration or declarationMap enabled...
9 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
i'll try upgrading soon to the newest rc anyways. because of #Can I use the "Streaming with Server Components" strategy with tRPC? seems to be working.
24 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
Thank you! This helps a lot. Now I know that this is the issue 🙏
24 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
This is sooo awesome!
68 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
Yep, looks good. It's working now 🎉 😀
68 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
Ah, ok, yeah, this was breaking before with iirc _def errors. I'll try
68 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
something maybe offtopic: the trpc example now produces a hydration error because of toLocaleString on my machine. which makes sense, since the browser has a different locale configured. not sure if that's intended for such an example
68 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
I mean that there's an additional fetch request in the network tab.
68 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
Huh, interestingly, it still doesn't work with rc.441 (same code as before) However, as soon as the page is exported as an async function (export default function Home vs export default async function Home) it works. This happens in dev and prod mode.
68 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
This sounds great, thank you! I'll gladly test it.
68 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
What version of tanstack react-query do you use? Maybe that's the issue and not trpc itself... Since, I don't think trpc is deciding if it should run during SSR or not... If you do something like this 
headers: {
    'x-trpc-source':
       typeof window !== 'undefined' ? 'react-query' : 'react-query-ssr',
    },
headers: {
    'x-trpc-source':
       typeof window !== 'undefined' ? 'react-query' : 'react-query-ssr',
    },
in the httpBatchStream, and also log the headers in the protected procedure middleware - does it get logged? Because I think my setup is wrongfully calling the useSuspense query on the server during SSR and, since the server during rendering is somehow not authed, it fails...
24 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
Yes, I have 
"@tanstack/react-query": "^5.49.2",
"@tanstack/react-query-devtools": "^5.49.2",

"@trpc/client": "11.0.0-rc.403",
"@trpc/react-query": "11.0.0-rc.403",
"@trpc/server": "11.0.0-rc.403",
"@tanstack/react-query": "^5.49.2",
"@tanstack/react-query-devtools": "^5.49.2",

"@trpc/client": "11.0.0-rc.403",
"@trpc/react-query": "11.0.0-rc.403",
"@trpc/server": "11.0.0-rc.403",
24 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
Hi Julius I've tried this and updated the TanStack query library. However, I'm still experiencing the same behaviour. The repro based on today's state of the trpc app dir example is here: https://github.com/michaelschufi/trpc-next-app-dir-2 The significant changes I made: https://github.com/michaelschufi/trpc-next-app-dir-2/commit/f7de44043d686b7fffad68ae23011edcc4fb1205
68 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
So what I would expect is: The trpc handler should be hit 1-2 times instead of 3 times. - Once for the void trpc.foo.prefetch(); in page.tsx ('x-trpc-source': 'rsc') - Maybe once for the trpc.foo.useSuspenseQuery(); in foo.tsx ('x-trpc-source': 'react-query') in case the server prefetch failed. But it should never be called during SSR with the trpc client component in rcc.tsx ('x-trpc-source': 'react-query-ssr'). Are those assumptions correct?
24 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
rsc.ts (the RSC query client) 
const createContextCached = cache(
  async (...args: unknown[]): Promise<Context> => {
    console.log('createContextCached', args);
    const _headers = new Headers(headers());
    _headers.set('x-trpc-source', 'rsc');

    const authObj = auth();

    return {
      req: undefined,
      headers: Object.fromEntries(_headers),
      auth: authObj,
      identity: await getIdentity(authObj),
    };
  },
);

/**
 * Create a stable getter for the query client that
 * will return the same client during the same request.
 */
const getQueryClient = cache(createQueryClient);
const caller = createCallerFactory(appRouter)(createContextCached);

export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
  caller,
  getQueryClient,
);
const createContextCached = cache(
  async (...args: unknown[]): Promise<Context> => {
    console.log('createContextCached', args);
    const _headers = new Headers(headers());
    _headers.set('x-trpc-source', 'rsc');

    const authObj = auth();

    return {
      req: undefined,
      headers: Object.fromEntries(_headers),
      auth: authObj,
      identity: await getIdentity(authObj),
    };
  },
);

/**
 * Create a stable getter for the query client that
 * will return the same client during the same request.
 */
const getQueryClient = cache(createQueryClient);
const caller = createCallerFactory(appRouter)(createContextCached);

export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
  caller,
  getQueryClient,
);
rcc.tsx 
export const trpc = createTRPCReact<AppRouter>();

let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
  if (typeof window === 'undefined') {
    // Server: always make a new query client
    return createQueryClient();
  } else {
    // Browser: use singleton pattern to keep the same query client
    return (clientQueryClientSingleton ??= createQueryClient());
  }
};

export function Provider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        unstable_httpBatchStreamLink({
          transformer,
          url: getBaseUrl() + '/api/trpc',
          headers: {
            'x-trpc-source':
              typeof window !== 'undefined' ? 'react-query' : 'react-query-ssr',
          },
        }),
      ],
    }),
  );
  
  return ...
export const trpc = createTRPCReact<AppRouter>();

let clientQueryClientSingleton: QueryClient | undefined = undefined;
const getQueryClient = () => {
  if (typeof window === 'undefined') {
    // Server: always make a new query client
    return createQueryClient();
  } else {
    // Browser: use singleton pattern to keep the same query client
    return (clientQueryClientSingleton ??= createQueryClient());
  }
};

export function Provider(props: { children: React.ReactNode }) {
  const queryClient = getQueryClient();

  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        unstable_httpBatchStreamLink({
          transformer,
          url: getBaseUrl() + '/api/trpc',
          headers: {
            'x-trpc-source':
              typeof window !== 'undefined' ? 'react-query' : 'react-query-ssr',
          },
        }),
      ],
    }),
  );
  
  return ...
foo.tsx (Component with useSuspenseQuery) 
'use client';

import { trpc } from '../api/trpc/client/rcc';

export function Foo() {
  const [foo] = trpc.foo.useSuspenseQuery();

  return <div>{JSON.stringify(foo)}</div>;
}
'use client';

import { trpc } from '../api/trpc/client/rcc';

export function Foo() {
  const [foo] = trpc.foo.useSuspenseQuery();

  return <div>{JSON.stringify(foo)}</div>;
}
24 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
Hmm, does your trpc client component client run during SSR? I'm experiencing strange behaviour... My next.js receives 3 trpc requests for the following page: foo/page.tsx 
import { HydrateClient, trpc } from '@/app/api/trpc/client/rsc';
import { Foo } from '../../foo';

const FooPage = async () => {
  void trpc.foo.prefetch();

  return (
    <HydrateClient>
      <Foo />
    </HydrateClient>
  );
};

export default FooPage;
import { HydrateClient, trpc } from '@/app/api/trpc/client/rsc';
import { Foo } from '../../foo';

const FooPage = async () => {
  void trpc.foo.prefetch();

  return (
    <HydrateClient>
      <Foo />
    </HydrateClient>
  );
};

export default FooPage;
Server Logs 
[MIDDLEWARE]: http://localhost:3000/foo null
createContextCached []
isAuthed { 'x-trpc-source': 'react-query-ssr', 'ctx.auth.userId': 'missing' }
a [TRPCClientError]: Not authenticated
    at ...
    (error info of the previous posted error)
}
isAuthed { 'x-trpc-source': 'rsc', 'ctx.auth.userId': 'exists' }
isAuthed { 'x-trpc-source': 'react-query', 'ctx.auth.userId': 'exists' }
[MIDDLEWARE]: http://localhost:3000/foo null
createContextCached []
isAuthed { 'x-trpc-source': 'react-query-ssr', 'ctx.auth.userId': 'missing' }
a [TRPCClientError]: Not authenticated
    at ...
    (error info of the previous posted error)
}
isAuthed { 'x-trpc-source': 'rsc', 'ctx.auth.userId': 'exists' }
isAuthed { 'x-trpc-source': 'react-query', 'ctx.auth.userId': 'exists' }
24 replies
TtRPC
Created by Michael Schaufelberger on 6/21/2024 in #❓-help
How do I use the rsc-rq-prefetch example with a protected procedure?
Hi @testsubject1137 Have you had some success with more recent versions in the meantime? Even with rc.403, I'm getting an error in my isAuthed trpc middleware. 
const isAuthed = t.middleware(({ next, ctx }) => {
  if (!ctx.auth.userId) {
    throw new TRPCError({ code: 'UNAUTHORIZED', message: 'Not authenticated' });
  }

  return next({
    ctx: {
      auth: ctx.auth,
    },
  });
});
const isAuthed = t.middleware(({ next, ctx }) => {
  if (!ctx.auth.userId) {
    throw new TRPCError({ code: 'UNAUTHORIZED', message: 'Not authenticated' });
  }

  return next({
    ctx: {
      auth: ctx.auth,
    },
  });
});
since, as you've said, the server is running the client component query during ssr.
24 replies
TtRPC
Created by Michael Schaufelberger on 6/12/2024 in #❓-help
Can I use the "Streaming with Server Components" strategy with tRPC?
Makes sense. Thanks for the explanation.
68 replies