wleistra Comments

'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

TtRPC

•Created by rustclan on 9/22/2023 in #❓-help

return type of a query endpoint

In react query you can use invalidate for that purpose, this will invalidate the query and fetch from server. Invalidate is available on the useContext of trpc.

8 replies

TtRPC

•Created by kamama on 10/8/2023 in #❓-help

How to update query data after mutation

Look at the tanstack query documentation for optimistic updates and trpc wrapper for equivalent functions.

2 replies

TtRPC

•Created by aminos. on 8/27/2023 in #❓-help

tRPC querying data via function not working

The error is pretty self explanatory. You are calling a hook somewhere that is not a hook or component. I cannot see from your code example what the problem is but if you have your code snippet running in a function try rename it as useFetchSocialData or make sure the code is ran as part of the top level of a component. You can also not call a hook conditionally (inside an if) so keep that in mind as well. Also your fetch functions should be probably inside the useEffects or using a useCallback if they are called from other places and your useEffects currently have missing dependencies on the dependency array. They are now recreated on every rerender.

3 replies

TtRPC

•Created by mw on 8/20/2023 in #❓-help

I have a websocket + REST project. Should I be using splitLink like this to combine WS and HTTP?

This is how we are doing it for our product and it seems to work well

7 replies

TtRPC

•Created by jackhammer8234 on 7/15/2023 in #❓-help

Multiple Inputs on TRPC Procedure?

Define your input as a an object of which one key is the cart array and the second key in the object is the user details. Something along the lines of procedure.input(z.object({cart: [], user: {...}) if you use zod. If you want to give a possible user object on every call you probably want to have a look at trpc middleware and the context.

2 replies

TtRPC

•Created by wleistra on 6/20/2023 in #❓-help

Axios, ExpressMiddleware and TRPCErrors

I found a solution. The cause key on the error object was my Axios error, and after an isAxiosError check, it can be cast as such, and there I get the actual response from my Axios query. So now I could use the errorFormatter on context creation to return those codes to the client instead of the previous 500/INTERNAL_SERVER_ERROR generic error seen there.

6 replies

TtRPC

•Created by wleistra on 6/20/2023 in #❓-help

Axios, ExpressMiddleware and TRPCErrors

The issue I'm having is that I cannot access the error response from axios in OnError or ErrorFormatter to base any robust logic to throw the trpcError with unauthorized code. What I would like to avoid is rely on the error message and do some kind of if string of message includes 401... So I was hoping there would be another way or some way to work with the error (httpStatus) from Axios that TRPC receives.

6 replies