trpc-nuxt: Cannot stringify arbitrary non-POJOs TRPCClientError

I always get this error: Cannot stringify arbitrary non-POJOs TRPCClientError

Here are my files: ~/server/api/trpc/index.ts

import type { inferAsyncReturnType } from '@trpc/server'
import * as trpc from '@trpc/server'
import * as  z  from 'zod'
import type { OnErrorPayload } from 'trpc-nuxt/api'

import * as PrismaPkg from '@prisma/client'
const {PrismaClient} = PrismaPkg
const client = new PrismaClient()


export const router = trpc.router()
    // queries and mutations...
    .query('hello',{
    // validate input with Zod
        async resolve(req) {
        console.log(req)
        // use your ORM of choice
        return {
            message: `Hello`
        }
    },
})

~/pages/index.vue

<script setup lang="ts">
import MyButton from '@/components/MyButton.vue'
import {useAsyncQuery, useFetch} from "#imports";
const router = useRouter()

const {data} = await useAsyncQuery(["hello"]);
</script>

<template>
  <NuxtLayout name="home">
    <section class="flex flex-col h-max justify-center">
      <div class="bg-primary-600 rounded-lg p-10 text-white text-2xl" >{{data}}</div>
      [...]
    </section>
  <NuxtLayout name="home">
</template>

Looking at the error message, seems to be that my trpc endpoint is refusing connections.

TRPCClientError: request to http://localhost:3000/trpc/hello?batch=1&input=%7B%7D failed, reason: connect ECONNREFUSED ::1:3000
    at Function.from (file:///Users/jean-emrickrioux/Dev/stakeFrites/_tools/trakmos-project/trakmos-nuxt/.nuxt/dist/server/server.mjs:33400:14)
    at file:///Users/jean-emrickrioux/Dev/stakeFrites/_tools/trakmos-project/trakmos-nuxt/.nuxt/dist/server/server.mjs:34021:42
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  originalError: FetchError: request to http://localhost:3000/trpc/hello?batch=1&input=%7B%7D failed, reason: connect ECONNREFUSED ::1:3000
      at ClientRequest.<anonymous> (file:///Users/jean-emrickrioux/Dev/stakeFrites/_tools/trakmos-project/trakmos-nuxt/node_modules/node-fetch/src/index.js:108:11)
      at ClientRequest.emit (node:events:527:28)
      at Socket.socketErrorListener (node:_http_client:454:9)
      at Socket.emit (node:events:527:28)
      at emitErrorNT (node:internal/streams/destroy:164:8)
      at emitErrorCloseNT (node:internal/streams/destroy:129:3)
      at processTicksAndRejections (node:internal/process/task_queues:83:21) 

Second try:

Changed the trpc directory to ~/server/api/trpc

   [nuxt] [request error] Invalid lazy handler result. It should be a function:
  at ./node_modules/h3/dist/index.mjs:299:17  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async ./node_modules/h3/dist/index.mjs:420:19  
  at async Server.nodeHandler (./node_modules/h3/dist/index.mjs:370:7)

My changed nuxt.config.ts looks like this:

export default defineNuxtConfig({
trpc: {
    baseURL: 'http://localhost:3000/api', // defaults to http://localhost:3000
    endpoint: '/trpc', // defaults to /trpc
  },
}

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 17 (9 by maintainers)

Most upvoted comments

Thank you for reporting!

I’ll take a look at this asap. Thanks for reporting!