Next.js Discord

Discord Forum

generateStaticParams include [id] from params

Unanswered
Silver Marten posted this in #help-forum
Open in Discord
Silver MartenOP
Hello guys,

I am trying to create a page that contains an editable user box, and I need it to be refreshed each time it gets loaded. So I've read about generateStaticParams but I cannot wrap my head around it.

/app/users/edit/[id]
export async function generateStaticParams({params}) {
    const res = await fetch(checkEnvironment().concat(`/api/users/${params?.id}`))
    const user = await res.body
    return {
        params: {
            user,
        },
    }
}

export default function Page({user}) {
 /* Do something with the user */
}

Whatever I try to do, I cannot get the user above.

Also I am using Prisma, so I have a "User" model as well, if that helps.

10 Replies

DirtyCajunRice | AppDir
i dont think generate static params is what you want here at all
Silver MartenOP
What do I wanna use? I used to have everything inside the Page() function, but If I updated and used back/forward in the browser I had to refresh(f5) for the fields to get updated again.
DirtyCajunRice | AppDir
why not use searchParams
its dynamic
Silver MartenOP
export async function generateStaticParams({params}) {
    const res = await fetch(checkEnvironment().concat(`/api/users/${params?.id}`))
    const user = await res.body
    return {
        params: {
            user,
        },
    }
}

export default function Page({params}: {params: {id: string}}) {
    
    const { data, isError, error, isLoading } = useQuery({
        queryFn: async() => {
            const {data} = await axios.get(checkEnvironment().concat(`/api/users/${params.id}`))
            return data
        },
    })
    if(isError) { return null }
    if(isLoading) {return <LoadingSpinner/>}
    return (
        <UpsertUserForm initialValue={data} isEditing={true}/>
    )
}

So this works as intended, however I have to refresh if I navigate to another {id}
DirtyCajunRice | AppDir
then it doesnt work as intended
haha
Silver MartenOP
Nah, seems like I have to wrap this up in useEffect somehow... hmm
Silver MartenOP
export default function Page({params}: {params: {id: string}}) {
    
    const { data, isError, error, isLoading } = useQuery({
        queryKey: ["user", params.id],
        queryFn: async() => {
            const {data} = await axios.get(checkEnvironment().concat(`/api/users/${params.id}`))
            return data
        },
    })

    if(isError) { return null }
    if(isLoading) {return <LoadingSpinner/>}
    return (
        <UpsertUserForm initialValue={data} isEditing={true}/>
    )

}

Solution: adding params.id to the queryKey solved the issue.
Silver MartenOP
Works one time, do I need to randomize this?