Dealing with query params during initial load in pages router
Unanswered
Bracco Italiano posted this in #help-forum
Bracco ItalianoOP
I'm working on an app written using the pages router. I want to remove state from the files and only use the query params directly for the app. Getting the initial params on load seems to preclude the ability to use the params directly though, as I need to use
I could try to infer when the router has loaded by checking when query params are no longer undefined, but this seems messy. I'm wondering if there are any patterns here which would be useful for this.
The App Router is useful because it has
router.isReady inside a useEffect, and thus the query param values would then need to be set as state.I could try to infer when the router has loaded by checking when query params are no longer undefined, but this seems messy. I'm wondering if there are any patterns here which would be useful for this.
The App Router is useful because it has
useSearchParams but converting the app over to App Router seems like a bit of a large task, especially since our project is currently using static exports and would need to switch over.6 Replies
Blanc de Hotot
It seems like useSearchParams is working on pages router too, it's not documented though. If you are reading query from useEffect why don't you use window.location.search?
@Bracco Italiano I'm working on an app written using the pages router. I want to remove state from the files and only use the query params directly for the app. Getting the initial params on load seems to preclude the ability to use the params directly though, as I need to use `router.isReady` inside a useEffect, and thus the query param values would then need to be set as state.
I could try to infer when the router has loaded by checking when query params are no longer undefined, but this seems messy. I'm wondering if there are any patterns here which would be useful for this.
The App Router is useful because it has `useSearchParams` but converting the app over to App Router seems like a bit of a large task, especially since our project is currently using static exports and would need to switch over.
you only need to wait for router.isReady if the page is static. the same happens for useSearchParams: you need to use Suspense if the page is static.
so if the page is static, you must provide a loading state and wait for router.isReady.
if the page is dynamic (with
so if the page is static, you must provide a loading state and wait for router.isReady.
if the page is dynamic (with
getServerSideProps, it will just work, no need to wait for anything).@joulev you only need to wait for router.isReady if the page is static. the same happens for useSearchParams: you need to use Suspense if the page is static.
so if the page is static, you must provide a loading state and wait for router.isReady.
if the page is dynamic (with `getServerSideProps`, it will just work, no need to wait for anything).
Bracco ItalianoOP
so I'm looking into making the page and site dynamic. It might be worth it because
What I'm trying to avoid is the pattern of
as this just creates more state. Waiting until
getServerSideProps allows for potentially better geolocation, which would be useful, but hosting will be more expensive. What I'm trying to avoid is the pattern of
useEffect(()=> {
if(router.isReady){
const {param} = router.query
setParam(param)
}
}, [router.isReady])as this just creates more state. Waiting until
param is not undefined seems a little tricky and I'm not sure if it will allow me to validate the URL with something like Zod.@Bracco Italiano so I'm looking into making the page and site dynamic. It might be worth it because `getServerSideProps` allows for potentially better geolocation, which would be useful, but hosting will be more expensive.
What I'm trying to avoid is the pattern of
js
useEffect(()=> {
if(router.isReady){
const {param} = router.query
setParam(param)
}
}, [router.isReady])
as this just creates more state. Waiting until `param` is not undefined seems a little tricky and I'm not sure if it will allow me to validate the URL with something like Zod.
instead of
just do
add validation if you want
const router = useRouter();
const [param, setParam] = useState(null);
useEffect(...);just do
const router = useRouter();
const param = router.isReady ? router.query.param : null;add validation if you want
const router = useRouter();
const paramParseResult = router.isReady ? schema.safeParse(router.query.param) : null;@joulev instead of
tsx
const router = useRouter();
const [param, setParam] = useState(null);
useEffect(...);
just do
tsx
const router = useRouter();
const param = router.isReady ? router.query.param : null;
add validation if you want
tsx
const router = useRouter();
const paramParseResult = router.isReady ? schema.safeParse(router.query.param) : null;
Bracco ItalianoOP
Okay, I guess what I need is a way to revalidate and update the params as they are populated, if they need to be. So if I get an empty link to home, I need to fill in all the query params, otherwise I just need to make the app run.
I'm trying to focus on populating those params as early as possible for validation purposes, but I guess I could just do some sort of state to determine if population functions have run and only handle validation errors if that has happened.
It looks like
I'm partially thinking out loud about the tools I have to work with, but I'm curious if Next has anything to help here
I'm trying to focus on populating those params as early as possible for validation purposes, but I guess I could just do some sort of state to determine if population functions have run and only handle validation errors if that has happened.
It looks like
getServerSideProps can do some pre- populating, but I need access to navigator for geolocation.I'm partially thinking out loud about the tools I have to work with, but I'm curious if Next has anything to help here
@Bracco Italiano Okay, I guess what I need is a way to revalidate and update the params as they are populated, if they need to be. So if I get an empty link to home, I need to fill in all the query params, otherwise I just need to make the app run.
I'm trying to focus on populating those params as early as possible for validation purposes, but I guess I could just do some sort of state to determine if population functions have run and only handle validation errors if that has happened.
It looks like `getServerSideProps` can do some pre- populating, but I need access to `navigator` for geolocation.
I'm partially thinking out loud about the tools I have to work with, but I'm curious if Next has anything to help here
Not too sure about what you are talking about but navigator can only be run in useEffect and not in initial load. For search params as state, check out nuqs