MobX Graphlink

Integrate data from a GraphQL backend into MobX and React with declarative path requests. (built on Apollo)

Installation

1. npm install mobx-graphlink --save-exact

The --save-exact flag is recommended (to disable version-extending), since this package uses Explicit Versioning (Release.Breaking.FeatureOrFix) rather than SemVer (Breaking.Feature.Fix).

For FeatureOrFix version-extending (recommended for libraries), prepend "~" in package.json. (for Breaking, prepend "^")

Setup

1. TODO
2. Create classes and json-schemas for row/document types. Example:

@DBClass({table: "todoItems"})
export class TodoItem {
    @DB((t, n)=>t.text(n))
    @Field({type: "string"})
    id: string;

    @DB((t, n)=>t.text(n))
    @Field({type: "string"}, {req: true})
    text: string;

    @DB((t, n)=>t.boolean(n))
    @Field({type: "string"})
    completed: boolean;

    @DB((t, n)=>t.specificType(n, "text[]"))
    @Field({items: {type: "string"}})
    tags: string[];
}

3. Create class containing DB structure information. Example:

export class GraphDBShape {
    todoItems: Collection<TodoItem>;
}

4. Create Graphlink instance:

declare module "mobx-graphlink/Dist/UserTypes" {
    // if you're using an app-wide mobx data-store, that you want easily accessible within "accessor" funcs
    interface UT_StoreShape extends RootState {}
    
    // shares the GraphDBShape class above (along with its TS type-constraints) with the mobx-graphlink library
    interface UT_DBShape extends GraphDBShape {}
}

export const graph = new Graphlink<RootState, GraphDBShape>();
store.graphlink = graph;
SetDefaultGraphOptions({graph});

export function InitGraphlink() {
    graph.Initialize({rootStore: store});
}

5. If using mobx-graphlink symlinked, make sure to add "pg", "postgraphile", and "graphile-utils" to the "paths" of tsconfig.json, so it always resolves to the app's version.
6. If importing mobx-graphlink from frontend code, make sure to exclude "pg", "postgraphile", and "graphile-utils", as they are unneeded, and rely on node-js packages that webpack 5+ doesn't auto-polyfill.

Usage

TODO

Alternatives

TODO