Using tRPC browser-side only (and combining createCaller with react-query) #5751

lunacrafts · 2024-05-29T12:40:42Z

lunacrafts
May 29, 2024

Hello everyone,

First of all, I'd like to mention that I use tRPC in an unconventional way. Sometimes I write tRPC packages that are primarily initialized on the browser side, using flags isServer: false and allowOutsideOfServer: true. I mention this because it usually raises some questions, but this approach totally makes sense in some scenarios.

The problem I am facing, which I believe should be solvable by more advanced users, is that when I initialize the code entirely on the browser side, I am unable to use it in conjunction with react-query.

Following example is a pseudo-code of potential usage.

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { type HyperRevPopRouter, router } from '@mirrorboards/hyper-revpop';
import { createTRPCReact } from '@trpc/react-query';
import React, { PropsWithChildren, useState } from 'react';

import { initTRPC } from '@trpc/server';

const t = initTRPC.create({
  allowOutsideOfServer: true,
  isServer: false,
});

export const trpc = createTRPCReact<HyperRevPopRouter>();

export const Provider: React.FC<PropsWithChildren> = (props) => {
  const [queryClient] = useState(() => new QueryClient());

  const [trpcClient] = useState(() => {
    const hipoteticalClient = t.createCallerFactory(router);

    return hipoteticalClient.caller({});
  });

  return <trpc.Provider client={trpcClient} queryClient={queryClient}>
    <QueryClientProvider client={queryClient}>
      {props.children}
    </QueryClientProvider>
  </trpc.Provider>
}

Real-world code

Following code is a example from code-base. Connect method returns instance of tRPC client (result of caller() method, like in above example)

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { type HyperRevPopRouter, HyperRevPopClient } from '@mirrorboards/hyper-revpop';
import { createTRPCReact } from '@trpc/react-query';
import React, { PropsWithChildren, useState } from 'react';

import { initTRPC } from '@trpc/server';

const t = initTRPC.create({
  allowOutsideOfServer: true,
  isServer: false,
});

export const trpc = createTRPCReact<HyperRevPopRouter>();

export const Provider: React.FC<PropsWithChildren> = (props) => {
  const [queryClient] = useState(() => new QueryClient());

  const [trpcClient] = useState(() => {
    return new HyperRevPopClient().connect({
      address: 'wss://foo'
    });
  });

  return <trpc.Provider client={trpcClient} queryClient={queryClient}>
    <QueryClientProvider client={queryClient}>
      {props.children}
    </QueryClientProvider>
  </trpc.Provider>
}

Property 'runtime' is missing in type 'DecoratedProcedureRecord<{ subscribe: Router<{ _config: RootConfig<{ ctx: RevPopClientContext; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; subscriptions: {}; }> & { ...; }; }> & { ...; }' but required in type 'TRPCClient<Router<{ _config: RootConfig<{ ctx: RevPopClientContext; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; subscriptions: {}; }> & { ...; }>'.ts(2741)
createTRPCClient.d.ts(11, 14): 'runtime' is declared here.
context.d.ts(17, 5): The expected type comes from property 'client' which is declared here on type 'IntrinsicAttributes & TRPCProviderProps<Router<{ _config: RootConfig<{ ctx: RevPopClientContext; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; subscriptions: {}; }> & { ...; }, unknown>'
(property) ProxyTRPCContextProps<Router<{ _config: RootConfig<{ ctx: RevPopClientContext; meta: object; errorShape: DefaultErrorShape; transformer: DefaultDataTransformer; }>; ... 5 more ...; subscriptions: {}; }> & { ...; }, unknown>.client: TRPCClient<Router<{
    _config: RootConfig<{
        ctx: RevPopClientContext;
        meta: object;
        errorShape: DefaultErrorShape;
        transformer: DefaultDataTransformer;
    }>;
    ... 5 more ...;
    subscriptions: {};
}> & {
    ...;
}>

brezzy1337 · 2024-11-15T06:56:24Z

brezzy1337
Nov 15, 2024

Hey, I'm running into the same issue trying to implemented React Server Components for next.js app router: https://trpc.io/docs/client/react/server-components#3-create-a-query-client-factory

Did you make and progress on this error?

0 replies

KATT · 2024-11-15T07:51:28Z

KATT
Nov 15, 2024
Maintainer

cc @lunacrafts @brezzy1337

Make an issue and post a repro, would love for this to work

1 reply

brezzy1337 Nov 15, 2024

Client side components are working great! But yeah I'll post the issue I'm having that that server side component.

lunacrafts · 2024-11-15T09:00:34Z

lunacrafts
Nov 15, 2024
Author

I'm not sure if we're experiencing the same issue with @brezzy1337. On my side, I would like to use trpc router on client-side only without any server.

I reproduced the issue in this repository.
https://github.com/lunacrafts/trpc-5751-client-side-trpc

Implementation is a bit naive, but It represents the issue
https://stackblitz.com/~/github.com/lunacrafts/trpc-5751-client-side-trpc?file=src/Provider.tsx

2 replies

capaj Feb 22, 2025

@lunacrafts when I open the stakcblitz link it runs ok-even logs out the

when I click the Welcome home!

so to me it looks like it is working-or is there some other bug you were trying to showcase with this stakcblitz?

capaj Feb 24, 2025

I clarified with @lunacrafts-the problem is that even though the caller itself works fine, the react-query proxy is not.

KingBael09 · 2025-01-18T18:50:09Z

KingBael09
Jan 18, 2025

Any updates on this?

0 replies

capaj · 2025-02-22T19:32:55Z

capaj
Feb 22, 2025

Very weird-I tried to use it the same as @lunacrafts here: https://github.com/capaj/faktorio/blob/5375b94a56d2a64226b4d0d3301b27e3efeb5215/faktorio-fe/src/App.tsx#L60

and it keeps crashing on

router.mjs:226 Uncaught (in promise) TRPCError: No procedure found on path "__untypedClient,__untypedClient,query"
   at router.mjs:226:31
(anonymous)	@	router.mjs:226
await in (anonymous)		
apply	@	createProxy.mjs:46
queryFn	@	createUtilityFunctions.mjs:83
fetchFn	@	query.ts:434
run	@	retryer.ts:153
start	@	retryer.ts:218
fetch	@	query.ts:546
fetchQuery	@	queryClient.ts:425
fetchQuery	@	createUtilityFunctions.mjs:80
fetch	@	utilsProxy.mjs:51
(anonymous)	@	utilsProxy.mjs:77
apply	@	createProxy.mjs:46
onClick	@	poc.tsx:82
callCallback2	@	react-dom.development.js:4164
invokeGuardedCallbackDev	@	react-dom.development.js:4213
invokeGuardedCallback	@	react-dom.development.js:4277
invokeGuardedCallbackAndCatchFirstError	@	react-dom.development.js:4291
executeDispatch	@	react-dom.development.js:9041
processDispatchQueueItemsInOrder	@	react-dom.development.js:9073
processDispatchQueue	@	react-dom.development.js:9086
dispatchEventsForPlugins	@	react-dom.development.js:9097
(anonymous)	@	react-dom.development.js:9288
batchedUpdates$1	@	react-dom.development.js:26179
batchedUpdates	@	react-dom.development.js:3991
dispatchEventForPluginEventSystem	@	react-dom.development.js:9287
dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay	@	react-dom.development.js:6465
dispatchEvent	@	react-dom.development.js:6457
dispatchDiscreteEvent	@	react-dom.development.js:6430

whenever I try to call my test query endpoint. @KATT any ideas why it is resolving the fullpath to __untypedClient,__untypedClient,query ?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Using tRPC browser-side only (and combining createCaller with react-query) #5751

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 5 comments 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Using tRPC browser-side only (and combining createCaller with react-query) #5751

Uh oh!

Uh oh!

lunacrafts May 29, 2024

Real-world code

Replies: 5 comments · 3 replies

Uh oh!

brezzy1337 Nov 15, 2024

Uh oh!

KATT Nov 15, 2024 Maintainer

Uh oh!

brezzy1337 Nov 15, 2024

Uh oh!

lunacrafts Nov 15, 2024 Author

Uh oh!

capaj Feb 22, 2025

Uh oh!

capaj Feb 24, 2025

Uh oh!

KingBael09 Jan 18, 2025

Uh oh!

capaj Feb 22, 2025

lunacrafts
May 29, 2024

Replies: 5 comments 3 replies

brezzy1337
Nov 15, 2024

KATT
Nov 15, 2024
Maintainer

lunacrafts
Nov 15, 2024
Author

KingBael09
Jan 18, 2025

capaj
Feb 22, 2025