kamilkisiela

import { createLoona, LoonaProvider } from '@loona/react';

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';

// Instance of a cache
const cache = new InMemoryCache();

// Create Loona Link

kamilkisiela

export class BooksState {
  // It does nothing except creating a new book
  @mutation('addBook')
  addBook(args, context) {
    return {
      id: generateRandomId(),
      title: args.title,
      __typename: 'Book',
    };
  }

kamilkisiela

import {effect} from '@loona/react';

export class BooksState {
  @effect(AddBook)
  bookAdded(action, context) {
    console.log(action);
    // outputs:
    // {
    //   type: '[Books] Add',
    //   title: '...'

kamilkisiela

//
// Using Action component
// 

import { Action } from '@loona/react';

export const NewBook = () => (
  <Action>
    {dispatch => (
      <button onClick={() => dispatch(new AddBook('Harry Potter'))}>

kamilkisiela

export class AddBook {
  static type = '[Books] Add';

  constructor(public title: string) {}
}

kamilkisiela

import { mutation } from '@loona/react';

export class BooksState {
  @mutation('addBook')
  addBook(args, context) {
    // our new book
    const book = {
      id: generateRandomId(),
      title: args.title,
      __typename: 'Book',

kamilkisiela

import {state} from '@loona/react';

@state({
  defaults: {
    books: []
  }
})
export class BooksState {}

kamilkisiela

import {state} from '@loona/react';

@state()
export class BooksState {}

kamilkisiela

import {Mutation} from '@loona/react';

const ADD_BOOK = gql`
  mutation AddNewBook($title: String!) {
    addBook(title: $title) @client {
      id
      title
    }
  }
`;

kamilkisiela

import React from 'react';
import { Query } from '@loona/react';

import { List } from '../common/List';

const ALL_BOOKS = gql`
  query GetAllBooks {
    books @client {
      id
      title