Angush Comments

Angush

Posts Comments

TtRPC

•Created by Angush on 10/6/2024 in #❓-help

Following documentation gives error: "You cannot dot into a client module from a server component."

ahh, finally found it. typo; 'use-client' rather than 'use client'.

6 replies

TtRPC

•Created by Angush on 10/6/2024 in #❓-help

Following documentation gives error: "You cannot dot into a client module from a server component."

I did notice while I was going through the guide that it instructs you to create this trpc/init.ts file to intialize the tRPC backend:

import { initTRPC } from '@trpc/server';
import { cache } from 'react';
export const createTRPCContext = cache(async () => {
  return { userId: 'user_123' };
});
const t = initTRPC.create({
  // transformer: superjson,
});
export const createTRPCRouter = t.router;
export const baseProcedure = t.procedure;

import { initTRPC } from '@trpc/server';
import { cache } from 'react';
export const createTRPCContext = cache(async () => {
  return { userId: 'user_123' };
});
const t = initTRPC.create({
  // transformer: superjson,
});
export const createTRPCRouter = t.router;
export const baseProcedure = t.procedure;

But when it's instructing you to create the trpc/server.tsx file with this code:

import 'server-only';
import { createHydrationHelpers } from '@trpc/react-query/rsc';
import { cache } from 'react';
import { createCallerFactory, createTRPCContext } from './init';
import { makeQueryClient } from './query-client';
import { appRouter } from './routers/_app';

export const getQueryClient = cache(makeQueryClient);
const caller = createCallerFactory(appRouter)(createTRPCContext);
export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
  caller,
  getQueryClient,
);

import 'server-only';
import { createHydrationHelpers } from '@trpc/react-query/rsc';
import { cache } from 'react';
import { createCallerFactory, createTRPCContext } from './init';
import { makeQueryClient } from './query-client';
import { appRouter } from './routers/_app';

export const getQueryClient = cache(makeQueryClient);
const caller = createCallerFactory(appRouter)(createTRPCContext);
export const { trpc, HydrateClient } = createHydrationHelpers<typeof appRouter>(
  caller,
  getQueryClient,
);

It imports createCallerFactory from that previous init file, despite never telling you to make that an export. So I took a guess and added this to the end: export const createCallerFactory = t.createCallerFactory But I'm wondering, if the documentation had that error, does it have others? Or am I an idiot and this is this just user error, with something I'm overlooking? I'm happy to share any other files needed.

6 replies

TtRPC

•Created by Angush on 10/6/2024 in #❓-help

Following documentation gives error: "You cannot dot into a client module from a server component."

The @/trpc/client.tsx file is also basically lifted wholesale from the documentation, except for renaming the export (and one import) and enabling superjson:

'use client'

import type { QueryClient } from '@tanstack/react-query'
import { QueryClientProvider } from '@tanstack/react-query'
import { httpBatchLink } from '@trpc/client'
import { createTRPCReact } from '@trpc/react-query'
import { useState } from 'react'
import { makeQueryClient } from './query-client'
import type { AppRouter } from './routes'
import superjson from 'superjson'

export const trpcClient = createTRPCReact<AppRouter>()

let clientQueryClientSingleton: QueryClient
function getQueryClient() {
  if (typeof window === 'undefined') return makeQueryClient()
  return (clientQueryClientSingleton ??= makeQueryClient())
}
function getUrl() {
  const base = (() => {
    if (typeof window !== 'undefined') return ''
    return 'http://localhost:3000'
  })()
  return `${base}/api/trpc`
}
export function TRPCProvider(props: Readonly<{ children: React.ReactNode }>) {
  const queryClient = getQueryClient()
  const [trpc] = useState(() =>
    trpcClient.createClient({
      links: [
        httpBatchLink({
          transformer: superjson,
          url: getUrl(),
        }),
      ],
    })
  )
  return (
    <trpcClient.Provider client={trpc} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {props.children}
      </QueryClientProvider>
    </trpcClient.Provider>
  )
}

'use client'

import type { QueryClient } from '@tanstack/react-query'
import { QueryClientProvider } from '@tanstack/react-query'
import { httpBatchLink } from '@trpc/client'
import { createTRPCReact } from '@trpc/react-query'
import { useState } from 'react'
import { makeQueryClient } from './query-client'
import type { AppRouter } from './routes'
import superjson from 'superjson'

export const trpcClient = createTRPCReact<AppRouter>()

let clientQueryClientSingleton: QueryClient
function getQueryClient() {
  if (typeof window === 'undefined') return makeQueryClient()
  return (clientQueryClientSingleton ??= makeQueryClient())
}
function getUrl() {
  const base = (() => {
    if (typeof window !== 'undefined') return ''
    return 'http://localhost:3000'
  })()
  return `${base}/api/trpc`
}
export function TRPCProvider(props: Readonly<{ children: React.ReactNode }>) {
  const queryClient = getQueryClient()
  const [trpc] = useState(() =>
    trpcClient.createClient({
      links: [
        httpBatchLink({
          transformer: superjson,
          url: getUrl(),
        }),
      ],
    })
  )
  return (
    <trpcClient.Provider client={trpc} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        {props.children}
      </QueryClientProvider>
    </trpcClient.Provider>
  )
}

Every other file involved has also not been changed much from the documentation, if at all.

6 replies