10 replies

Passing URL Params to TRPC causes Error on First Render, as URL-Param is undefined

I am not sure if I am missing something, but I can't get this to work. I am getting some

id

id

passed down in my url params, and I want to pass down that id to trpc, to fetch some data from my database:

const Home: NextPage = () => {
    const router = useRouter()

    const { data, isLoading } = trpc.module.getOne.useQuery({
        id: router.query.moduleId
    });
    //...
};

export default Home;

const Home: NextPage = () => {
    const router = useRouter()

    const { data, isLoading } = trpc.module.getOne.useQuery({
        id: router.query.moduleId
    });
    //...
};

export default Home;

Now the problem seems to be that

id

id

isn't there on first render: the router will first have to get it etc., so I get a TRPC Client Error, as

id

id

at this time is

undefined

undefined

TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "id"
    ],
    "message": "Required"
  }
]
    at TRPCClientError.from (transformResult-106791d7.mjs?2721:4:1)
    at eval (httpBatchLink.mjs?9fec:190:40)

TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "id"
    ],
    "message": "Required"
  }
]
    at TRPCClientError.from (transformResult-106791d7.mjs?2721:4:1)
    at eval (httpBatchLink.mjs?9fec:190:40)

What am I missing here?

TTC

Theo's Typesafe Cult•4y ago•

10 replies

plyglt

Passing URL Params to TRPC causes Error on First Render, as URL-Param is undefined

I am not sure if I am missing something, but I can't get this to work. I am getting some

id

id

passed down in my url params, and I want to pass down that id to trpc, to fetch some data from my database:

const Home: NextPage = () => {
    const router = useRouter()

    const { data, isLoading } = trpc.module.getOne.useQuery({
        id: router.query.moduleId
    });
    //...
};

export default Home;

const Home: NextPage = () => {
    const router = useRouter()

    const { data, isLoading } = trpc.module.getOne.useQuery({
        id: router.query.moduleId
    });
    //...
};

export default Home;

Now the problem seems to be that

id

id

isn't there on first render: the router will first have to get it etc., so I get a TRPC Client Error, as

id

id

at this time is

undefined

undefined

TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "id"
    ],
    "message": "Required"
  }
]
    at TRPCClientError.from (transformResult-106791d7.mjs?2721:4:1)
    at eval (httpBatchLink.mjs?9fec:190:40)

TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "undefined",
    "path": [
      "id"
    ],
    "message": "Required"
  }
]
    at TRPCClientError.from (transformResult-106791d7.mjs?2721:4:1)
    at eval (httpBatchLink.mjs?9fec:190:40)

What am I missing here?

Passing URL Params to TRPC causes Error on First Render, as URL-Param is undefined

Similar Threads

Passing URL Params to TRPC causes Error on First Render, as URL-Param is undefined

Similar Threads

Similar Threads

Similar Threads