Reactive variables are useless

The Apollo docs describes reactive variables as “a useful mechanism for storing local state” and as a state management solution, so I tried to use them to store some data but the data won’t persist when the page is refreshed or while doing page navigation.
So what’s the point of using them? How is a reactive variable better than useState?
Am I misunderstanding something?

@luisadrian there are several differences between reactive variables and useState; here are a couple main ones:

  • Reactive variable state isn’t tied to a component, or even to React for that matter. Reactive variables are an Apollo Client state management solution that gives you a way to store application state at any level of your application.
  • When you tie reactive variables into queries in Apollo Client, using @client and field policies for example, every time you update the value of your reactive variable anywhere in your application, all queries that are using it elsewhere will automatically re-run. The Storing local state in reactive variables section of the docs helps explain this.

Just like React, Apollo Client does not persist state between page reloads (but depending on how you’re handling page navigation - ie. not reloading - it will). If you want to persist state between reloads, we suggest using the Apollo Client cache and a solution like apollo3-cache-persist. At some point in the future we’re going to build persistence into Apollo Client, but we’re not quite there yet.

1 Like