Theo's Typesafe Cult•2y ago

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 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 isn't there on first render: the router will first have to get it etc., so I get a TRPC Client Error, as id at this time is 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?

3 Replies

Neto•2y ago

its correct tho you should enable the query only when the router is ok

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

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

when isReady is true, the router is fine to query with

plyglt•2y ago

omg, thank you so much. really love this community for stuff like this!! i had done this before and shouldve known but somehow felt stuck

Unknown User•2y ago

Message Not Public

Gaming

Programming

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