wleistra Comments

wleistra

•Created by cssetian on 3/21/2024 in #❓-help

Is there a way to configure a trpc router to require an output() schema to be specified?

I initially thought this was also a great idea at first, then i had a route procedure returning A LOT of data and the output (zod) validation punishment was so hard that we ran out of memory on our node instance and had in other cases over 30 seconds performance penalty... Maybe it was an exceptional case we ran into. But something to consider.

4 replies

TtRPC

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

Keep old data when changing trpc procedure inputs

Check the import keepPreviousData from react query on the placeholderData prop.

2 replies

TtRPC

•Created by Varich on 10/5/2024 in #❓-help

automatically add current path to the useQuery

Have you considered adding it to the client (http (batch) link) on the frontend and sending it in the header, so at the backend you can grab the orgname from there?

2 replies

TtRPC

•Created by wleistra on 5/10/2024 in #❓-help

Unexpected end of JSON input error after upgrade to v11.0.0-rc.366 from rc.359

That's great to hear. Thanks for the update!

6 replies

TtRPC

•Created by wleistra on 5/10/2024 in #❓-help

Unexpected end of JSON input error after upgrade to v11.0.0-rc.366 from rc.359

Nope I had to revert the version back...

6 replies

TtRPC

•Created by wleistra on 3/5/2024 in #❓-help

shared useTRPCClient hook conversion to v11

Thanks @Alex / KATT 🐱 for the extra details on the comments.

14 replies

TtRPC

•Created by wleistra on 3/5/2024 in #❓-help

shared useTRPCClient hook conversion to v11

I worked around the issue by not returning the createClient but by returning the links instead. and have the createClient in the MFE's own useState.

14 replies

TtRPC

•Created by wleistra on 3/5/2024 in #❓-help

shared useTRPCClient hook conversion to v11

This is the information vscode gives about the deprecation:

'AnyRouter' is deprecated.ts(6385)
index.d.ts(12, 4): The declaration was marked as deprecated here.
⚠ Error(TS6385) | 
AnyRouter is deprecated.
(alias) type AnyRouter = Router<any, any>
import AnyRouter

'AnyRouter' is deprecated.ts(6385)
index.d.ts(12, 4): The declaration was marked as deprecated here.
⚠ Error(TS6385) | 
AnyRouter is deprecated.
(alias) type AnyRouter = Router<any, any>
import AnyRouter

Maybe a comment was missed along the way? When trying to use Router<any, any> directly it says Router is not exported from @trpc/server

14 replies

TtRPC

•Created by wleistra on 3/5/2024 in #❓-help

shared useTRPCClient hook conversion to v11

If there is a more efficient/better practice to achieve the sharing of the same client setup across all our Frontends without duplicating the code I'm all ears too... So far we successfully used this way with trpc 10

14 replies

TtRPC

•Created by wleistra on 3/5/2024 in #❓-help

shared useTRPCClient hook conversion to v11

And this is how we put it all together

import type { ReactNode } from 'react';
import React from 'react';

import { createQueryClient, useTRPCClient } from '@company/utils';
import { QueryClientProvider } from '@tanstack/react-query';

import { trpc } from './trpc';

const queryClient = createQueryClient();

interface MFEQueryProviderProps {
  children: ReactNode;
}

export const MFEQueryProvider = ({ children }: MFEQueryProviderProps) => {
  const trpcClient = useTRPCClient(trpc, process.env.API_URL ?? '');

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
};

import type { ReactNode } from 'react';
import React from 'react';

import { createQueryClient, useTRPCClient } from '@company/utils';
import { QueryClientProvider } from '@tanstack/react-query';

import { trpc } from './trpc';

const queryClient = createQueryClient();

interface MFEQueryProviderProps {
  children: ReactNode;
}

export const MFEQueryProvider = ({ children }: MFEQueryProviderProps) => {
  const trpcClient = useTRPCClient(trpc, process.env.API_URL ?? '');

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </trpc.Provider>
  );
};

14 replies

TtRPC

•Created by wleistra on 3/5/2024 in #❓-help

shared useTRPCClient hook conversion to v11

We do! The prop trpc is coming from createReactRouter<AppRouter> like this

import type { AppRouter } from 'mfe-middleware';

import type { inferReactQueryProcedureOptions } from '@trpc/react-query';
import { createTRPCReact } from '@trpc/react-query';
import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';

/* eslint-disable import/no-unused-modules */
export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;
/* eslint-enable import/no-unused-modules */

export const trpc = createTRPCReact<AppRouter>();

import type { AppRouter } from 'mfe-middleware';

import type { inferReactQueryProcedureOptions } from '@trpc/react-query';
import { createTRPCReact } from '@trpc/react-query';
import type { inferRouterInputs, inferRouterOutputs } from '@trpc/server';

/* eslint-disable import/no-unused-modules */
export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
export type RouterInputs = inferRouterInputs<AppRouter>;
export type RouterOutputs = inferRouterOutputs<AppRouter>;
/* eslint-enable import/no-unused-modules */

export const trpc = createTRPCReact<AppRouter>();

14 replies

TtRPC

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

useUtils vs useQueryClient

Why do you use refetch and not invalidate?

8 replies

TtRPC

•Created by Bert on 11/25/2023 in #❓-help

tRPC is butchering object types in return types

@Bert make sure you are on version 10.44.0 or higher.

6 replies

TtRPC

•Created by Rule on 10/14/2023 in #❓-help

tRPC with with react-query prefetching in Next.js app directory.

I would also like to know what the best way is

7 replies