Next.js Discord

Discord Forum

URL Parameters

Answered
Jboncz posted this in #help-forum
Open in Discord
JbonczOP
It works fine, just curious if anyone has any suggestions of a better way to do this. This is a client side component for simplicities sake, its a very user interactive page.
If I dont have track the initialLoadComplete state, then as its searching for the identities it starts to overwrite the URL parameters.

Using nuq to handle url parameter state
    const [identityCacheParams, setIdentityCacheParams] = useQueryState('users', parseAsArrayOf(parseAsString))
    const [initialLoadComplete, setInitialLoadComplete] = useState(false);

    useEffect(() => {
        if (initialLoadComplete) {
            setIdentityCacheParams(Object.keys(identityCache))
        }
    }, [identityCache])

    useEffect(() => {
        async function initLoad() {
            await searchPerson(identityCacheParams, false)

            setInitialLoadComplete(true)
        }
        initLoad();
    }, [])
Answered by ᴉuɐpɹɐɐ
    useEffect(() => {
        async function initLoad() {
            const identityCache = await searchPerson(identityCacheParams, false)
            setIdentityCacheParams(Object.keys(identityCache))
        }
        initLoad();
    }, [])
View full answer

9 Replies

ᴉuɐpɹɐɐ
you have to let others know that you are using nuqs otherwise t will be confusing for helpers
JbonczOP
true, good point 🙂
ᴉuɐpɹɐɐ
identityCache is data from the server?
JbonczOP
Correct I didnt want to overload the viewer with logic that could be explained with a hand wave. Yeah its a server action that gets the data when the user queries.
Its a large set of data, so I of course cannot store that in URL, but I can store the unique identitifer for the users.
ᴉuɐpɹɐɐ
    useEffect(() => {
        async function initLoad() {
            const identityCache = await searchPerson(identityCacheParams, false)
            setIdentityCacheParams(Object.keys(identityCache))
        }
        initLoad();
    }, [])
Answer
JbonczOP
Right.... soooo searchPerson was iterating through and calling a server action per unique identifier, which was what was causing the issue, I reworked the server action to handle an array of unique identifiers and returning the data in mass instead of queueing them up to retrieve. The state being stored in the URL was a 11th hour requirement and I was trying to not rework things because I was frustrated at the fact that it was an 11th hour requirement.
since searchPerson was queing work and not doing it as a batch fetch it was causing re-renders which would trigger the useEffect.