apollo-reactive-store

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>
  );
}