thank you for the video ... with this approach i have some problems with implementing infinite scrolling ! i need to use prevState and new Data like this [ ...prev,...data ] and i don't know how to do it with react query !
the implementation looks more like a general get LIST of persons, instead of an individual person via id. I am unable to find an example of useQuery that actuall uses url params from nextjs useRouter.
Hi Leo, wonderful videos, thanks! One question; let's say our client cache update on client side. It's deviated from server cache. Then we renavigate to our page. existing server cache will be dehydrated and sent to client. Are we gonna reconcile rehydrated server cache data on the client with already daviated client side cache? Regards...
A benefit with pre fetching data on server side then rendering is that the data will be available upon render. Meaning you don't have to deal with "no-data" states. Here is a cool article explaining the differences dev.to/fenok/client-and-server-side-data-fetching-in-react-4o7d
I was doing it more for sake of transparency for the tutorial. Thinking it might help others understand a little bit better when it is explicitly shown what the type is.
How come when using hydration we no longer need an absolute url in GetServerSideProps!?! Great seriies btw. UPDATE: Just noticed that "TypeError: Only absolute URLs are supported" is actually still coming up in the terminal, so I have my answer
questtioin- when we use getserversideprops ,next.js does an api call to server, so which means while doing client side navigation it does not use the cached data and make api call ,is that rt? i dont think server side can access client sidee cached data?
Yes I believe you are correct unless I may have missed something in the documentation. But I believe the server shouldn't be able to be aware of the client side cache.
@@CodeDunks I switched to getInitiialProps for this reason ,getInitialProps run on client side on client side navigation. I dont think this is mentioned in any documentation or Tutorials
@@sreekumarmenon Yeah from next.js docs it says getInitialProps will run on the server on initial page load. It would then run on the client when navigating to a different route using next/link. nextjs.org/docs/api-reference/data-fetching/getInitialProps. I figured that this meant that the initial page load would still not be able to use query cache since it is run on the server for the first-page load.
@@CodeDunks so on iniitial page load ,there is no cache if you do a full page refresh, cache is gone anyways. so you are right, for getInitiialProps, first time query is executed on server and the hydrated to client side and cache is initialized and then onwards getInitialProps can read from cache, but that is not the case with getServerSideProps.
excellent series. best vids i've seen on React-Query hands down. thank you
Please use the zoomed-out version so we could see more code. also, make the vscode wrapped while you are at it. Thanks for the video. cheers!
Wow I didn’t even know that you could wrap it like that. Game changer! Huge thanks haha
I like your content. Bigger is better, I will pick the first zoom size
Best series out there about React Query, Thank you
why i still see it fetch in network(client),
Thank you for this amazing tutorial it really helps me.
Looks like when you demonstrated hydration, you were still on the initialData page? 😜
thanks alot..your video was actually helpful to me
very helpful bro, thanks
Hi
Can someone help me with React Query and Next Js dynamic data rendering?
Cool stuff
thank you for the video ...
with this approach i have some problems with implementing infinite scrolling ! i need to use prevState and new Data like this [ ...prev,...data ] and i don't know how to do it with react query !
Awesome!
the implementation looks more like a general get LIST of persons, instead of an individual person via id. I am unable to find an example of useQuery that actuall uses url params from nextjs useRouter.
Found this prateeksurana.me/blog/mastering-data-fetching-with-react-query-and-next-js/
CTRL + F and searching router then got to this example
const router = useRouter();
const pokemonID = typeof router.query?.id === "string" ? router.query.id : "";
const { isSuccess, data: pokemon, isLoading, isError } = useQuery(
["getPokemon", pokemonID],
() => fetchPokemon(pokemonID),
{
enabled: pokemonID.length > 0
}
);
SSR example:
const id = context.params?.id;
await queryClient.prefetchQuery(["artist", id], () => getArtistById(id!), {
staleTime: Infinity,
refetchOnWindowFocus: false,
});
CSR example:
const { query } = useRouter();
const { id } = query;
const { data: artist } = useQuery(["artist", id], () => getArtistById(id!), {
staleTime: Infinity,
refetchOnWindowFocus: false,
});
Hi Leo, wonderful videos, thanks! One question; let's say our client cache update on client side. It's deviated from server cache. Then we renavigate to our page. existing server cache will be dehydrated and sent to client. Are we gonna reconcile rehydrated server cache data on the client with already daviated client side cache? Regards...
Hello, is it fine if i used my own api in next.js and react-query cuz in the docs next.js says to never use your own api
Of course you can use your own api! Curious, where in the docs does it say that?
ok but what are the benefits of using react query with server side why not just use client side?
A benefit with pre fetching data on server side then rendering is that the data will be available upon render. Meaning you don't have to deal with "no-data" states. Here is a cool article explaining the differences dev.to/fenok/client-and-server-side-data-fetching-in-react-4o7d
Why are you applying types twice? do it once in the Generic and the constant will infer to it automatically.
I was doing it more for sake of transparency for the tutorial. Thinking it might help others understand a little bit better when it is explicitly shown what the type is.
@@CodeDunks Believe someone at the stage of learning react-query is not a kid. He knows the basic shit :P well thanks nice tutorial.
@@usmanmughal5916 Appreciate it Usman and thanks for the feedback!
How come when using hydration we no longer need an absolute url in GetServerSideProps!?! Great seriies btw. UPDATE: Just noticed that "TypeError: Only absolute URLs are supported" is actually still coming up in the terminal, so I have my answer
questtioin- when we use getserversideprops ,next.js does an api call to server, so which means while doing client side navigation it does not use the cached data and make api call ,is that rt? i dont think server side can access client sidee cached data?
Yes I believe you are correct unless I may have missed something in the documentation. But I believe the server shouldn't be able to be aware of the client side cache.
@@CodeDunks I switched to getInitiialProps for this reason ,getInitialProps run on client side on client side navigation. I dont think this is mentioned in any documentation or Tutorials
@@sreekumarmenon Yeah from next.js docs it says getInitialProps will run on the server on initial page load. It would then run on the client when navigating to a different route using next/link. nextjs.org/docs/api-reference/data-fetching/getInitialProps. I figured that this meant that the initial page load would still not be able to use query cache since it is run on the server for the first-page load.
@@CodeDunks so on iniitial page load ,there is no cache if you do a full page refresh, cache is gone anyways. so you are right, for getInitiialProps, first time query is executed on server and the hydrated to client side and cache is initialized and then onwards getInitialProps can read from cache, but that is not the case with getServerSideProps.
@@sreekumarmenon Yup makes sense! Thanks for all the info!