apollo-client-reactive-store

Description

Simple utility to manage UI application state using @apollo/client libary's reactive variables.

Usage

Create your store class, with auto accessors for all the properties that need to be reactive.

Make sure to annotate these auto accessor properties with @reactive

import { reactive } from "apollo-client-reactive-store";


export class Person {
    @reactive
    accessor firstName: string = "Jon";
    @reactive
    accessor lastName: string = "Dohn";
}

export const person = new Person();

Use getFieldsForStores function to get query field defintions for the stores and use it typepolicies.

import { ApolloClient, InMemoryCache } from "@apollo/client";
import { getQueryFieldsForStores } from "apollo-client-reactive-store";

// import the store class
import './Person';

const policies = {
    typePolicies: {
        Query: {
            merge: true,
            fields: {
                ...getQueryFieldsForStores() // this will provide field defintion for all the store classes and reactive variables
            }
        }
    }
}

const cache = new InMemoryCache(policies)
export const client = new ApolloClient({
    cache,
    resolvers: {}
});

Since this library uses decorator stage 3 following changes may be required on tsconfig and .babelrc files:

tsconfig

"emitDecoratorMetadata": false,
"experimentalDecorators": false,

.babelrc

{
  "presets": [
    [
      "@nrwl/react/babel",
      {
        "runtime": "automatic",
        "importSource": "react",
        "useBuiltIns": "usage",
        "decorators": {
          "decoratorsBeforeExport": true,
          // "legacy": true
        },
        "classProperties": {
          "loose": false
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "version": "2022-03"
      }
    ]
  ]
}