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.
Previous
How do you implement a DataLoader with batching and caching?
Next
What is the @client directive in Apollo Client?
More GraphQL Questions
View all →- Intermediate How do you implement pagination in GraphQL?
- Intermediate What is the Relay specification in GraphQL?
- Intermediate How do you implement authorization in GraphQL resolvers?
- Intermediate What is graphql-shield and how does it work?
- Intermediate How do you implement real-time subscriptions with GraphQL?