can't get query strings from context param
I was following the t3 tutorial and I got to he point where I should use dynamic routing in nextjs to get the post by id.
Strange thing is, I can't get the params in pages/posts/[id].tsx,but I can with the [slug].tsx. THe context object is undefined. The routing is definitely correct, it's finding the page, but it doesn't pass the query string correctly. I've been on this for hours, pls help.
here's my url to get to the page:http://localhost:3000/posts/clgo97nvn0001uty4q6s303cf
here's the code:
export const getStaticProps: GetStaticProps = async (context) => {
const ssg = generateSSGHelper();
const id = context.params?.id as string;
console.log("context:", context);
if (typeof id !== 'string') throw new Error('没有id')
await ssg.posts.getPostById.prefetch({id: id});
return {
props:{
trpcState: ssg.dehydrate(),
id
}
}
}
export const getStaticPaths: GetStaticPaths = () => { return { paths:[], fallback:"blocking" } }
export const getStaticPaths: GetStaticPaths = () => { return { paths:[], fallback:"blocking" } }
11 Replies
Just as a knee-jerk reaction, I’m seeing a couple problems. Firstly, that as-cast to a string shouldn’t be necessary and is probably introducing bugs into that function. Is that really how Theo did it in the T3 tutorial?
Secondly, if I remember correctly doesn’t
getStaticProps only run at build time? If you’re expecting new props each time you request a page, then you’d probably need getServerSideProps
At level worst, you could rename the file and then pass the slug in as is to the id property in your prefetch functionI can’t completely redo what Theo did because my compiler will complain about possible undefined variable, even if I added if check. This is the only way I found out to keep it quite.
Also I did run npm build and I did try serverside rendering , the result is the same. And Theo could get it during the tutorial but I can’t. I’ll try renaming the file . Thx
Do you have this hosted on Vercel? The localhost URL won’t work because your localhost isn’t exposed to the outside world
I do. I just do development on my localhost. https://truth-engine-dev.vercel.app/
It's even worse on the vercel, none of the two query params work.
so I hard coded the params and the pages show up fine, I ran npm run build, serversideprops, it's the same. I'm pretty sure the problem isn't the routing, the query string just won't go through.
basically I looked EVERYWHERE, and only theo was getting the param through context, I have no idea how he was able to to it, but nobody else says it's possible
Oof, this is probably above me then. Sorry I can't help further!
np, thanks for trying to help me
have you tried console logging your id output when it's [id] and when it's [slug]
is the output different?
or same
they're both undefined.
ok it just magically worked. I don't know if it's the cache, but here's what I learned from this:
1this isn't done by nextjs alone, it's a feature called ssg which the trpc provides, the request comes through trpc context. So nextjs alone woudn't be able to do this, that's why everyone said getting params from getStaticPros is impossible.
I did countless rebuilds and npm dev run, don't know why it started working, but if I'll worry about it the next time I encounter it.
i have the same issue now ._.
any idea how you fixed it?
the whole context is returning undefined apparently for me not just the slug
okay fixed it
my error was passing something else with ctx which messes with it
p.s. i'm still on an older version of trpc so my create helper name is different