add hook for reactive variable

[seeden]

I would like to use simple react hook for rerender my component(instead of query) when reactive variable was changed.

For example useReactiveVariable(myReactiveVariable);

[benjamn]

This would definitely be a worthwhile feature.

In terms of the implementation, I believe reactive variables would need to have a more general-purpose listener API. Right now updating a reactive variable calls cache.broadcastWatches() on any caches previously involved in reading the variable, but that behavior could be generalized/exposed via myVar.listen(newValue => {...}) or something similar.

[seeden]

@benjamn I am glad that you like this idea. Thank you

[benjamn]

@seeden You can try this out in @apollo/client@3.2.0-beta.4 (released yesterday)!

// Either way works:
import { useReactiveVar } from "@apollo/client"
import { useReactiveVar } from "@apollo/client/react/hooks"

[seeden]

thanks @benjamn

[Dodie324]

@benjamn Are there best practices on how to use useReactiveVar in an application? Let's say I want to replace custom context providers with reactive variables, how would I approach that? Can you co-locate reactive variables the way you could with a provider such that they're not accessible outside of their context? Is it considered bad practice to store server data from a useQuery that I've done additional massaging on in a reactive variable so that I can easily access it in my application? These are some of the questions I'd like some clarification around!