You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using use-query-params alongside next-query-params in my NextJS app and I need to trigger an API request as soon as the query parameters are read by use-query-params.
Problem:
In React, as soon as the app loads, the query parameters are read, without any delay. However, in NextJS, there is a delay between the moment the app is mounted and the query parameters are read, i.e. the query parameters are undefined on load, even if a value is present in the URL.
Expected behavior:
Ideally, I want the query parameters to be read as soon as the NextJS app is mounted. If this is not possible, firstly, I really want to understand why it is the case, then the next solution would be to have a way to know when the query parameters are read, e.g. an isReady variable could be exposed.
Current solution:
As a workaround, I'm using next/router's useRouter hook to know when I can trigger the API request:
import { useRouter } from 'next/router'
...
const router = useRouter()
const [query, setQuery] = useParams({
page: NumberParam
})
useEffect(() => {
if (router.isReady) {
// fetch API data with query params from useParams
}
}, [router.isReady])
I don't particularly like the above approach since I'm making use of one library to know the state of another. Is there already an existing solution provided by use-query-params?
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I'm using
use-query-params
alongsidenext-query-params
in my NextJS app and I need to trigger an API request as soon as the query parameters are read by use-query-params.Problem:
In React, as soon as the app loads, the query parameters are read, without any delay. However, in NextJS, there is a delay between the moment the app is mounted and the query parameters are read, i.e. the query parameters are undefined on load, even if a value is present in the URL.
Expected behavior:
Ideally, I want the query parameters to be read as soon as the NextJS app is mounted. If this is not possible, firstly, I really want to understand why it is the case, then the next solution would be to have a way to know when the query parameters are read, e.g. an
isReady
variable could be exposed.Current solution:
As a workaround, I'm using
next/router
's useRouter hook to know when I can trigger the API request:I don't particularly like the above approach since I'm making use of one library to know the state of another. Is there already an existing solution provided by use-query-params?
Beta Was this translation helpful? Give feedback.
All reactions