Hello Sir thank you for this awesome libraries it adds a lot to the basic apollo-link-state library. I did your book example with React (jsx) it worked and I loved the way this library worked, but when I started working in typescript and React (tsx) I am getting all type Errors.

1. The connect HOC  gives type Errors ->
interface IStaffFilterProps  {
    updateFirst: (first: string) => void;
}

const mapDispatchToProps = (dispatch: Dispatch) => ({
  updateFirst: (first: string) => dispatch(new UpdateFirst(first)),
});

class StaffScreenFilters extends Component<IStaffFilterProps, {}> { }
 connect(mapDispatchToProps)(StaffScreenFilters);

2. In your example you have Actions as Mutations Properties (type and mutation) as static class Properties t gives errors here -> dispatch(new UpdateFirst(first)) i . So I had to remove static : -

export class UpdateFirst {
    
    type = '[First] Update';
    
    mutation = gql `
        mutation updateFirst($first: String!) {
            updateFirst($first: String!)
        }
    `;

    variables: { first: string };

    constructor(first: string) {
        this.variables = {
            first
        };
    }

3. The mutation resolver below is asking for the type of context :-

export class StaffState {
    updateFirst({ title }, context) {
        context.patchQuery()
    }
}

Please Sir a simple working example in typescript would help me a lot Thank you for your time

This looks , interesting... having challenges following along with instructions and then the examples are drastically different than the provided instructions.

So I basically cut and pasted the code from your directions and it is throwing errors...

I also noticed the instructions don't specifically tell you to set the vlaue of the store in the app.module.ts

first import the State

import State from './app-state'

Then set it on the Loona module

imports: [BrowserModule, FormsModule, ApolloModule, LoonaModule.forRoot([State])],

The source code is here on stackblitz

https://stackblitz.com/edit/angular-esypth

Is this project still maintained by the guild? Couldn't get any answer for a month and also the PR's aren't merged or at least commented.

In general I really like the approach of loonajs but due to the lack of human interaction in this project I am not sure if it is already abandoned because of another approach.

Thanks for clarification.

I am not sure who of the guild are the maintainers so I mention @Urigo because of NgAtlanta and @kamilkisiela because he hosts the project.

It would be really nice, if we could use @Loona to query data on the client to fetch data from an Realtime database or an Websocket, like a Graphql Subscription but implemented in the client.

Now a resolver function work with Observables, but it gets and emits new values only when the Observable is completed.

In the current design of this library is it a way to add this functionality? @Urigo @kamilkisiela

Currently using @loona/react for a new project, and running into issues wrt Typescript.

For example the first parameter to patchQuery in Context is typed as a DocumentNode, which only allows for referencing a query with no variables set, which is very limiting. Actual type should be DocumentNode | { query: DocumentNode, variables: any } or something similar.

Great library, thanks for all the work on this!

Following todo example from this git and trying to make it work with REST I see @mutation is not called

export class TodosState {
  @Mutation(AddTodo)
  addTodo(args) {
    console.log('Mutation:', args);
    const todo = {
      id: args.id,
      description: args.description,
      completed: args.completed,
      __typename: 'Todo',
    };

    return todo;
  }

After I dispatch action. The only thing that is called is @update().

Please see this link:

https://github.com/fkolar/todo-rest

🐞 bug report

Affected Package

@loona/angular: 1.0.0

Description

If multiple states are "lazy-loaded" via LoonaModule.forChild, only the latest module import will initialize a child state. This is caused because CHILD_STATE is provided with multi: false option, therefore every call of LoonaModule.forChild will override previous values.

This happens if you have for example multiple feature modules which are imported by the app root module and each of the feature module holds a state by using LoonaModule.forChild.

This can be solved by providing CHILD_STATE with multi: true and changing the effect initialization code inside LoonaChildModule to handle multiple state groups.

@NgModule()
export class LoonaModule {
  // ...
  static forChild(states: any[] = []): ModuleWithProviders {
    return {
      ngModule: LoonaChildModule,
      providers: [
        ...states, 
        { provide: CHILD_STATE, useValue: states, multi: true },
      ],
    };
  }
}


@NgModule()
export class LoonaChildModule {
  constructor(
    @Inject(CHILD_STATE) stateGroups: StateClass<Metadata>[][], // <-- changed
    // ...
  ) {
   // ...

   // Changed to handle CHILD_STATE provider array
    stateGroups.forEach(group =>
    {
      group.forEach(state => {
         // ...
      });
    })
    // ...
  }
}

But this will propaply cause some side-effects because states are instanciated multiple times.

🌍 Your Environment

Angular Version:

Angular CLI: 7.1.4
Node: 10.9.0
OS: linux x64
Angular: 7.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.11.4
@angular-devkit/build-angular     0.11.4
@angular-devkit/build-optimizer   0.11.4
@angular-devkit/build-webpack     0.11.4
@angular-devkit/core              7.1.4
@angular-devkit/schematics        7.1.4
@ngtools/webpack                  7.1.4
@schematics/angular               7.1.4
@schematics/update                0.11.4
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.23.1

I have seen numerous examples of
a) How to define resolvers for a query
b) How to define default data store

But there seems to be no example of how to:

Query the default client data store with variables and define a resolver for them, WITHOUT using decorators.

Can you provide such an example?

If that's not clear enough I can provide an example :)

there is wired error witch ng add @loona/schematics as bellow:

+ @loona/[email protected]
updated 1 package and audited 39194 packages in 9.252s
found 0 vulnerabilities

Installed packages for tooling via npm.
Schematic "ng-add" not found in collection "@loona/schematics".
Error: Schematic "ng-add" not found in collection "@loona/schematics".

and after alll there is no loona schematics with ng generate

Available Schematics:
  Collection "@schematics/angular" (default):
...

ng version

Angular CLI: 7.0.4
Node: 10.11.0
OS: darwin x64
Angular: 7.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.10.4
@angular-devkit/build-angular     0.10.4
@angular-devkit/build-optimizer   0.10.4
@angular-devkit/build-webpack     0.10.4
@angular-devkit/core              7.0.4
@angular-devkit/schematics        7.0.4
@angular/cdk                      7.0.3
@angular/cli                      7.0.4
@angular/material                 7.0.3
@ngtools/webpack                  7.0.4
@schematics/angular               7.0.4
@schematics/update                0.10.4
rxjs                              6.3.3
typescript                        3.1.6
webpack                           4.19.1

If you follow the docs on the website top to bottom like a tutorial, it is not mentioned (therefore some might forget) that the BookState which is used in the example needs to be added to the LoonaModule.forRoot:

imports: [LoonaModule.forRoot([BookState])],

Should possibly be added at some point in the docs.

When a fragment contains another fragment, patchFragment can't determine which fragment to read from.

fragment someFragment {
    id
    other {
      ...otherFragment
    }
}

ERROR Error: Uncaught (in promise): Error: Found 2 fragments. `fragmentName` must be provided when there is not exactly 1 fragment.
Error: Found 2 fragments. `fragmentName` must be provided when there is not exactly 1 fragment.
    at getFragmentQueryDocument (fragments.js:26)
    at InMemoryCache.push../node_modules/apollo-cache-inmemory/lib/inMemoryCache.js.InMemoryCache.readFragment (inMemoryCache.js:221)
    at ApolloClient.push../node_modules/apollo-client/ApolloClient.js.ApolloClient.readFragment (ApolloClient.js:124)
    at Object.patchFragment (loona.core.js:156)

Apollo cache readFragment takes fragmentName as an option to determine this.
https://github.com/apollographql/apollo-client/blob/master/packages/apollo-cache/src/cache.ts#L80

ng build --prod generates

main.568598cebae93c2a7f2b.js:1 Uncaught Error: 
        In order to initialize Apollo Client, you must specify link & cache properties on the config object.
        This is part of the required upgrade when migrating from Apollo Client 1.0 to Apollo Client 2.0.
        For more information, please visit:
          https://www.apollographql.com/docs/react/basics/setup.html
        to help you get started.

Hello, we would like to feature your project to the Docusaurus users page.
Would that be ok? Also can you provide your logo?

More info about this here

Currently if you follow the docs you'll end up with a type issue (also mentioned over here #382).

Docs:

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

  constructor(public title: string) {}
}

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

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

export class BooksState {
  @effect(AddBook)
  bookAdded(action, context) {
    ...
  }
}

Error:
Property 'type' is missing in type AddBook.

I've forked this repo and tried several ways to satisfy TypeScript but it seems impossible because it's mixing a compiletime decorator that expects a class @effect(AddBook) with a runtime dispatch that expects an instance dispatch(new AddBook('Harry Potter')). TypeScript can't declare static fields in interfaces so it seems like it can only support 1 approach.

I could think of 2 potential solutions for this problem:

Solution 0 (ugly, not an option)

export class AddBook {
  static type = '[Books] Add';
  type = AddBook.type;
  constructor(public title: string) {}
}

Solution 1

Update the example to the NgRx way of handling actions:

export enum BookActions {
  ADD = '[Books] Add';
}

export class AddBook {
  type = BookActions.ADD;

  constructor(public title: string) {}
}

Configure the Effect with a string literal:

...
export class BookState {
  @Effect(BookActions.ADD)
  addBook() { ... }
}

And consider dropping support for passing an action class to the effects decorator.

Solution 2

Make this work without hacks (not sure if possible).

I'm willing to contribute but first I need to hear your thoughts on this :)

Apollo-link-state is deprecated as of Apollo client version 2.5. See https://github.com/apollographql/apollo-link-state

good to have small eg. of usage mixin @client/server types and subscriptions

ng add @loona/schematics on a nx workspace gives me this error

Error: Schematic "ng-add" not found in collection "@loona/schematics".
    at SchematicEngine.createSchematic (/Users/bhaskaran/kmeal-frontend/node_modules/@angular-devkit/schematics/src/engine/engine.js:232:23)
    at CollectionImpl.createSchematic (/Users/bhaskaran/kmeal-frontend/node_modules/@angular-devkit/schematics/src/engine/engine.js:69:29)
    at AddCommand.getSchematic (/Users/bhaskaran/kmeal-frontend/node_modules/@angular/cli/models/schematic-command.js:130:27)
    at AddCommand.runSchematic (/Users/bhaskaran/kmeal-frontend/node_modules/@angular/cli/models/schematic-command.js:262:32)
    at AddCommand.run (/Users/bhaskaran/kmeal-frontend/node_modules/@angular/cli/commands/add-impl.js:48:31)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)