@kamilkisiela/luna-angular v1.0.0-alpha.0

@luna/angular

App State Management done with GraphQL

Installation

npm install @luna/angular --save
// or
yarn add @luna/angular

API

State

import { State } from '@luna/angular';

@State({
  defaults: {
    currentGame: {
      __typename: 'CurrentGame',
      teamAScore: 0,
      teamBScore: 0,
      teamAName: 'Team A',
      teamBName: 'Team B',
    },
  },
})
export class GameState {}

Mutation

Define an action:

import gql from 'graphql-tag';

export class Goal {
  static mutation = gql`
    mutation goal($team: String!) {
      goal(team: $team) @client
    }
  `;
  variables: any;
  constructor(team: 'A' | 'B') {
    this.variables = { team };
  }
}

Define a mutation:

import { Mutation } from '@luna/angular';
import { Goal } from './game.actions';

@State({ ... })
export class GameState {
    @Mutation(Goal)
    goal(root, args, context) {
        // ...
    }
}

Query

Define a query:

import { Query } from '@luna/angular';
import { Goal } from './game.actions';

@State({ ... })
export class GameState {
    @Query()
    gameStatus(root, args, context) {
        // query gameStatus { gameStatus { ... } }
        return {...};
    }
}

Action

Define an action:

export class StartGame {
  static type = '[Game] start';
}

And apply it to a state:

import { Query } from '@luna/angular';
import { of } from 'rxjs';
import { StartGame, GameStarted } from './game.actions';

@State({ ... })
export class GameState {
    @Action(StartGame)
    onStartGame(state, args) {
        return of(new GameStarted())
    }
}

Luna

How to dispatch an action:

import { Luna } from '@luna/angular';

import { Goal } from './game.actions';

@Component({...})
export class AppComponent {
    constructor(private luna: Luna) {}

    ngOnInit() {
        this.
    }

    goal() {
        this.luna.dispatch(new Goal('A'))
    }
}

How to query data:

import { Luna } from '@luna/angular';
import { Observable } from 'rxjs';
import { pluck } from 'rxjs/operators';

import { currentGameQuery } from './graphql';
import { CurrentGame } from './interfaces';

@Component({...})
export class AppComponent {
    game: Observable<CurrentGame>;

    constructor(private luna: Luna) {}

    ngOnInit() {
        this.game = this.luna.query({ query: currentGameQuery })
            .valueChanges
            .pipe(pluck('data', 'currentGame'));
    }
}