Hey! I don't see anything particularly wrong on what you're showing me here. So whatever is causing you an issue should be somewhere else?
I just quickly made you a Codesandbox showing how to do this here.
Note that useMemo is necessary here since it prevents a new variables object from being created if name does not change. If it weren't there, every time the component re-rendered a new request to the GraphQL API would be made creating an infinite loop in some cases.
Yeah that's a little detail to remember. Since useSWR shallowly compares each argument, and each newly created object's reference is different, you have to make sure to pass the same reference (not create a new object) if you don't want a re-fetch.
Hey! I don't see anything particularly wrong on what you're showing me here. So whatever is causing you an issue should be somewhere else?
I just quickly made you a Codesandbox showing how to do this here.
Note that
useMemo
is necessary here since it prevents a newvariables
object from being created ifname
does not change. If it weren't there, every time the component re-rendered a new request to the GraphQL API would be made creating an infinite loop in some cases.Thank you so much, It helped a lot. I was not using useMemo, and getting in the loop.
I'm glad I could help!
Yeah that's a little detail to remember. Since
useSWR
shallowly compares each argument, and each newly created object's reference is different, you have to make sure to pass the same reference (not create a new object) if you don't want a re-fetch.Thanks for the tip to use
useMemo
. I was getting into an infinite loop as well, and had no idea what to do.