Refetch, polling, loading, basically all

[kamilkisiela]

An example of usage:

this.exampleMutation(options)
  .then((graphQLResult) => {
    this.exampleQuery.refetch();
  });

UPDATE - see that comment

---

Outdated now

<li *ngFor="let example of exampleQuery | apolloQuery:'examples'">
  {{ example.description }}
</li>

[kamilkisiela]

@jboothe So here's an idea you're interested in :)

[kamilkisiela]

While I was working on GitHunt for Angular2 I added few new features.

@stubailo You might be interested in the progress 🚀

@Urigo There are still no tests for that features so for now it's just a sort of concept rather then "ready to go" thing.

So what's new?

• Apollo decorator is now able to handle or to be more precise, gives an access to few queries inside a one root query.
• options of mapped queries are now the same as in ApolloClient's watchQuery method (forceFetch, returnPartialData and pollInterval)
• refetch() is now supported
• unsubscribe() is also available
• stopPolling() is done
• startPolling() too
• loading - boolean property with loading status

Result of a query:

{
  loading: boolean
  errors: any[]
  refetch: Function
  unsubscribe: Function
  stopPolling: Function
  startPolling: Function
  ...
  [string]: any // query name as a key and result of that query as value 
  // (an example: `feed`: [{id: 1}, {id: 3}, {id: 5}])
}

---

An example:

@Component({
  selector: 'app',
  templateUrl: '/app.html'
})
@Apollo({
  client,
  queries(context) {
    return {
      data:  {
        query: gql`
          query Feed($type: FeedType!) {
            currentUser {
              login
            }
            feed(type: $type) {
              createdAt
              id
            }
          }
        `,
        variables: {
          type: context.type ? context.type.toUpperCase() : 'TOP'
        },
        forceFetch: true,
      }
    };
  }
})
class App {}

<loading *ngIf="data.loading"></loading>
<feed-entry
  *ngIf="!data.loading" 
  *ngFor="let entry of data.feed" 
  [entry]="entry"
  [currentUser]="data.currentUser"
  (onVote)="onVote($event)">
</feed-entry>

[kamilkisiela]

And a working implementation of it (one issue with additional record in ngFor, but that's all) https://github.com/kamilkisiela/GitHunt-angular2/commit/a0593e4afb8c8bb402cb0f04ab26b4437b3a1017

[kamilkisiela]

After releasing this, GitHunt for Angular2 will be practically ready.

[helfer]

Thanks a lot! @kamilkisiela

[kamilkisiela]

@helfer It's always a pleasure to help!