⬡ GraphQL Intermediate

What are Apollo Client's reactive variables?

Answer

Reactive variables are Apollo Client's mechanism for managing local state that automatically triggers React re-renders and can be read in queries. Define: const isLoggedInVar = makeVar(false);. Read: const isLoggedIn = useReactiveVar(isLoggedInVar);. Write: isLoggedInVar(true); — any component using useReactiveVar(isLoggedInVar) automatically re-renders. Integrate with cache queries via typePolicies: Query: { isLoggedIn: { read() { return isLoggedInVar(); } } } — then query { isLoggedIn @client }. Reactive variables replace the need for Redux or Zustand for simple global state when using Apollo Client. They are simpler than field policies but equally reactive. Use for: auth state, UI state (modal open/closed), filters, shopping cart contents.