Viridian•11mo ago

TS(2742) error when trying to create client

NPM with Node v18.16.1. I get the following error when trying to create a client. I've imported all server-related things. AppRouter is:

import * as trpcExpress from '@trpc/server/adapters/express'
import { renderTrpcPanel } from 'trpc-panel'
import { createContext } from './context'
import { Handler } from 'express'
import { createRouter } from './createRouter'

export const createApi = (path: string): { trpc: Handler, panel: Handler } => {
  const router = createRouter();

  return {
    trpc: trpcExpress.createExpressMiddleware({
      router,
      createContext
    }),
    panel: (_, res) => res.send(renderTrpcPanel(router, { url: `${path}/trpc`}))
  }
}

export type AppRouter = ReturnType<typeof createRouter>

import * as trpcExpress from '@trpc/server/adapters/express'
import { renderTrpcPanel } from 'trpc-panel'
import { createContext } from './context'
import { Handler } from 'express'
import { createRouter } from './createRouter'

export const createApi = (path: string): { trpc: Handler, panel: Handler } => {
  const router = createRouter();

  return {
    trpc: trpcExpress.createExpressMiddleware({
      router,
      createContext
    }),
    panel: (_, res) => res.send(renderTrpcPanel(router, { url: `${path}/trpc`}))
  }
}

export type AppRouter = ReturnType<typeof createRouter>

3 Replies

funki•11mo ago

ignore my deleted msg, i didn't see ReturnType<>. but still, i think that's fishy. what does createRouter look like?

Viridian•11mo ago

Let me see;

import { initTRPC } from '@trpc/server';
import { Context } from './context';
import { createCharacterRouter } from './character/router';
import { createSteamIdRouter } from './steamId/router';


export const createRouter = () => {
  const t = initTRPC.context<Context>().create();

  const router = t.router({
    character: createCharacterRouter(t),
    steamId: createSteamIdRouter(t),
  });

  return router;
};

import { initTRPC } from '@trpc/server';
import { Context } from './context';
import { createCharacterRouter } from './character/router';
import { createSteamIdRouter } from './steamId/router';


export const createRouter = () => {
  const t = initTRPC.context<Context>().create();

  const router = t.router({
    character: createCharacterRouter(t),
    steamId: createSteamIdRouter(t),
  });

  return router;
};

This is in server And here's the code snippet in client for creating the client:

import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "../../../server/src/api";

const client = createTRPCProxyClient<AppRouter>({
    links: [
        httpBatchLink({
            url: 'http://localhost:8000/',
        })
    ]
})

client.character.get.query()

export default client

import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
import type { AppRouter } from "../../../server/src/api";

const client = createTRPCProxyClient<AppRouter>({
    links: [
        httpBatchLink({
            url: 'http://localhost:8000/',
        })
    ]
})

client.character.get.query()

export default client

Not sure what's causing it @functiondj I managed to fix this, but I'm getting another strange issue now For some reason the call works fine when I do it via TRPCPanel, but not from my front-end to the backend Gives me a 404 for some odd reason; and it does character.get?batch=1&input={} on the front-end while on panel it does character.get?batch=1&input={"0": {}}. Not sure if that matters I get Cannot GET /character.get I fixed it

funki•11mo ago

👍