Apollo Reactive Store

An simple api for manage and update apollo reactive vars.

Why?

Global state management is alway a problem, reactive store provide an option to manage global state with graphql api. Simplify the complexity to manage global state in other state management library.

Usage

 
import { gql, ApolloClient, useQuery } from "@apollo/client"
import create from "apollo-reactive-store";
 
// create store
const store = create({
  counter: 1,
  uiState: {
    open: false
  }
});
 
// initialize in apollo client
const client = new ApolloClient({
  uri: "http://localhost:3000/",
  cache: new InMemoryCache({
    typePolicies: store.getTypePolicies()
  })
});
 
// use it in component
function App() {
  const { loading, error, data } = useQuery(gql`
    query {
      counter
    }
  `, { client: client });
 
  if (loading || error) { return null }
 
  const { counter } = data;
 
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={() => store.update("counter", counter + 1)}>+1</button>
      <button onClick={() => store.update("counter", counter - 1)}>-1</button>
    </div>
  );
}
 
// use actions to mutate state and isolate logics
 
const actions = {
  toggle: (open) => {
    return (uiState) => ({ ...uiState, open })
  }
}
 
function Modal() {
  const { loading, error, data } = useQuery(gql`
    query {
      uiState { open }
    }
  `, { client: client });
 
  if (loading || error) { return null }
 
  const { uiState: { open } } = data;
 
  return (
    <div>
      <h1>is it open? {open}</h1>
      <button onClick={() => store.update("uiState", actions.toggle(true))}>open</button>
      <button onClick={() => store.update("uiState", actions.toggle(false))}>close</button>
    </div>
  );
}