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>
No description
F
funki221d ago
ignore my deleted msg, i didn't see ReturnType<>. but still, i think that's fishy. what does createRouter look like?
V
Viridian221d 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
F
funki221d ago
👍
More Posts
Wrapping useQuery into a custom hookI'm trying to wrap `useQuery` into a custom hook (as I have some legacy code that I need to run befoPass additional data from `useQuery` to contextFor `splitLink` there is a way to pass context value through `useQuery` as second param `{ trpc: { cCannot set headers in procedures with fetch adapterAm i right that with such a setup in nextjs app router route handler: ```ts const handler = async (rDoes anybody now how to fix cors policy error?I am facing this error: Access to fetch at 'http://localhost:3002/trpc/getBotTag?batch=1&input=%7B%7how to handle error from Zod in trpc?I would like to return error instead throwing it away so i could show user nice feedback i found htt404 TRPCError: no query procedure on pathHi, this is my entire standalone tRPC server:```ts import { initTRPC } from "@trpc/server"; import {Call multiple TRPC endpoints from onSuccess()?I would like to create an API chain for analysing a geographic area where one successful API call caHow to set sizeLimit > 1MB (to solve 413 error)?Hi all, I am trying out the T3 stack where I want to send area polygons given by the user to my NexHow to manage server to server communicationWould managing headers this way work in nextjs as server to server communication? or does next managReplacing the dot notation in URLs with forward slash `/` ?is there a way to replace the dot separation with a forward slash instead ? so instead of `/api/tWhich one method should I use for creating trpc for server componetns in Nextjs 13 App dirHi which one I should use experimental_createTRPCNextAppDirServer or createTRPCProxyClient when it cCan someone explain to me the use of tRPC in server components?I can really see the need for tRPC in client components but can someone explain to me how you would Error-Boundary and TRPCIs there a nice way to catch errors from TRPC at a global level and bubble them into a simple alert Type errors in lambda integrationI really don't know where to start with this error.... I'm going to be integrating tRPC into a lambHybrid application with offline and online mode setup with tRPCHi, I was wondering if I could setup tRPC in way that one http link is using local API (for offline query with no input reports errori have a simple router with a list procedure that takes no input and just does a .query() it used tNext cookies() not being set on Mutation in App Dir (T3 Turbo)Trying to set cookies inside TRPC using Nextjs App Router, using the T3 Turbo setup. Setting cookietRPC error in app Router (undefined headers)I use the tRPC file structure from Jack Herringtons video I added clerk auth for protected routes anBad request in prod but works fine in devin prod I am getting `BAD REQUEST`hey is there any way to integrate or implement machine learning / ai in trpcSpecifically for next.js or tensorflow?