wleistra Posts

wleistra

•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

We updgraded from version 11.0.0-rc.359 to 11.0.0-rc.366 and now see BAD_REQUEST error being returned for mutations which worked fine before to upgrade. Stack:

TRPCError: Unexpected end of JSON input
    at /dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/contentType.js:25:27
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.read (/dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/contentType.js:32:21)
    at async Object.getRawInput (/dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/contentType.js:91:40)
    at async inputValidatorMiddleware (/dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/middleware.js:44:26)
    at async callRecursive (/dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/procedureBuilder.js:154:32)
    at async callRecursive (/dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/procedureBuilder.js:154:32)
    at async procedure (/dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/procedureBuilder.js:184:24)
    at async /dir/node_modules/@trpc/server/dist/unstable-core-do-not-import/http/resolveResponse.js:137:30
    at async Promise.all (index 0)

6 replies

TtRPC

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

shared useTRPCClient hook conversion to v11

In our mono repo, we have 30 or so MFEs which all use the same TRPC client setup. So, we abstracted the inner workings of getting the TRPC client set up away in a different package as a hook. Now, I'm converting the code to v11, and I'm running into deprecation warnings and typescript errors. Our hook looks like this:

import { useState } from 'react';

import { createWSClient, getFetch, httpLink, splitLink, wsLink } from '@trpc/client';
import type { TRPCClient, TRPCLink } from '@trpc/client'; // [1] TRPCClient no longer exported

import type { AnyRouter } from '@trpc/server'; // [2] AnyRouter deprecated

type TRPC<TRouter extends AnyRouter> = {
  createClient: (opts: { links: TRPCLink<TRouter>[] }) => TRPCClient<TRouter>;
};

export const useTRPCClient = <TRouter extends AnyRouter>(trpc: TRPC<TRouter>, url: string, wsUrl?: string) => {
  const [trpcClient] = useState(() => {
    const http = httpLink({
      url,
      fetch: async (input, init) => {
        const fetch = getFetch();
        return fetch(input, { ...init, credentials: 'include' });
      },
      headers: () => {
        const originURL = window.location.href;
        return {
          'origin-url': originURL,
        };
      },
    });

    const wsClient = wsUrl ? createWSClient({ url: wsUrl }) : null;
    const ws = wsClient ? wsLink({ client: wsClient }) : null;

    return trpc.createClient({
      links: ws
        ? [
            splitLink({
              condition: (op) => op.type === 'subscription',
              true: ws,
              false: http,
            }),
          ]
        : [http],
    });
  });

  return trpcClient;
};

import { useState } from 'react';

import { createWSClient, getFetch, httpLink, splitLink, wsLink } from '@trpc/client';
import type { TRPCClient, TRPCLink } from '@trpc/client'; // [1] TRPCClient no longer exported

import type { AnyRouter } from '@trpc/server'; // [2] AnyRouter deprecated

type TRPC<TRouter extends AnyRouter> = {
  createClient: (opts: { links: TRPCLink<TRouter>[] }) => TRPCClient<TRouter>;
};

export const useTRPCClient = <TRouter extends AnyRouter>(trpc: TRPC<TRouter>, url: string, wsUrl?: string) => {
  const [trpcClient] = useState(() => {
    const http = httpLink({
      url,
      fetch: async (input, init) => {
        const fetch = getFetch();
        return fetch(input, { ...init, credentials: 'include' });
      },
      headers: () => {
        const originURL = window.location.href;
        return {
          'origin-url': originURL,
        };
      },
    });

    const wsClient = wsUrl ? createWSClient({ url: wsUrl }) : null;
    const ws = wsClient ? wsLink({ client: wsClient }) : null;

    return trpc.createClient({
      links: ws
        ? [
            splitLink({
              condition: (op) => op.type === 'subscription',
              true: ws,
              false: http,
            }),
          ]
        : [http],
    });
  });

  return trpcClient;
};

Issue 1: TRPCClient type is no longer exported from @trpc/client. I assume we can replace it with createClient: (opts: { links: TRPCLink<TRouter>[] }) => ReturnType<typeof createTRPCClient>; correct? Issue 2: the AnyRouter type deprecation, how can that be resolved?

14 replies

TtRPC

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

Axios, ExpressMiddleware and TRPCErrors

We have an express based TRPC server and our procedures are calling our endpoints using axios. So when our users credentials provided expired or are incorrect Axios will return with a 401 as it should. I need to get this UNAUTHORIZED 401 error to the frontend but no matter what I try TRPC throws is as a 500 INTERNAL_SERVER_ERROR. I tried error formatter and on error and I hoped to get the httpStatus code from the axios error somehow but I only get access to the message. Can someone here be so kind and point me in the right direction to forward the errors from our Axios Instances as such to the React TRPC client. 🙏

6 replies

TtRPC

•Created by wleistra on 1/27/2023 in #❓-help

Type issue react query with enabled.

We migrate to trpc and using @tanstack/react-query directly to the trpc syntax of trpc.procedureName.useQuery(). Previously TypeScript understood that if an input like { id: string } to the useQuery was possibly null or undefined (because it comes from useParams() react-router hook for example) and the option on the useQuery was set to { enabled: !!id } that by the time the call was made id would indeed be a string. Now that we migrated to using trpc TS errors out and expects us to do silly things like { id: string ?? '' }. I would love to get the old behavior back.

3 replies

TtRPC

•Created by wleistra on 1/18/2023 in #❓-help

Global context or shared context.

We are using react query and trpc and we ran into a undesired effect I hope someone could help me with. We have a monorepo with 20+ frontend applications (all in react/ts). Some of those apps/utilities export components that are used in other apps. Each utility/app has its own trpc server middleware for providing data to our components. Every app is wrapped in a trpc.provider and query Provider. So if we want to use a component from utility A requesting data from server A in app B we wrap that component in query provider from A. This works fine, except if app B utilizes multiple components from utility A in that case invalidating a query in one component from A, will not invalidate the other component query as both get their own context... Is there a way to share the same context somehow? 🙏

2 replies

TtRPC

•Created by wleistra on 1/11/2023 in #❓-help

Best practices on trpc and Sentry

We are currently migrating to trpc from Apollo server/graphql. We don't use next. What are the best practices for using error reporting tools like Sentry to get end to end (client to server) error handling or if that is challenging informative errors to sentry from trpc-server. Would love to hear your experiences. Thanks in advance.

1 replies