using context inside of useQuery falls into an infinite loop

[rmacy]

Describe the bug
useQuery will fall into an indefinite render loop if you pass context aka Partial<OperationContext> as a parameter.

Steps to reproduce
Create a useQuery hook and pass context, e.g.

useQuery({ query: MyQuery, variables: { someId }, context: {} });

Expected behavior
useQuery is only called once.

Actual behavior
useQuery falls into an infinite loop.

Additional context
I think using context is valuable because it's a great way to pass in an auth token as a header if you don't have access to an auth token outside of a component render context.

[JoviDeCroock]

Hey @macy

Thanks for the error report, this is intended. We advice using useMemo this way you can control when the query should refetch. There can be conditions where you don't want to refetch for some minor change (i.e. token being refetched). We can't anticipate these scenario's that's why we move this responsibility to your side.

useQuery({ query: MyQuery, variables: { someId }, context: React.useMemo(() => ({}), []) });

Should do the trick.

[rmacy]

Thanks @JoviDeCroock -- I don't know if that was clear in the docs after a quick glance, I'd be happy to make a PR, thoughts?

[JoviDeCroock]

That would be awesome, we're trying to be as clear as we can in our documentation but an outside view is most often the best to show us these oversights. That contribution would be more than welcome!

[rmacy]

🔥 Will do! Thank you for the awesome work in this library!

[sunpietro]

I've created a PR that updates the missing info in the docs: #1800