aurelia-apollo-bind v1.1.0-beta.1
aurelia-apollo-bind
Please change subscribe
by watch
and SubscriptionMode
by WatchMode
bigining with version 1.1.0
.
This module help using Apollo
queries by binding properties with decorators.
You can query
or watch
and use an other property for the parameters.
Any time a parameter change, a new query is done.
Initialisation
You have to inject an instance of ApolloClient
:
import { Container } from 'aurelia-dependency-injection';
import ApolloClient from 'apollo-client';
...
const apolloClient = new ApolloClient(...);
Container.instance.registerInstance(ApolloClient, apolloClient);
...
Use
import { ApolloBind } from 'aurelia-apollo-bind';
import gql from 'graphql-tag';
export class ContactList {
@ApolloBind.query(gql`
query contactList {
contactList {
id
...
}
}`)
contacts;
}
By just changing query
by watch
, your query will be updated each time an update is done locally or from the server or from an other client.
Parameters
Each time you change the detailsId
property, a new query is done.
import { ApolloBind } from 'aurelia-apollo-bind';
import gql from 'graphql-tag';
export class ContactDetails {
@ApolloBind.query(gql`
query contactDetails($id: ID) {
contactDetails(id: $id) {
id
...
}
}`, 'detailsId')
details;
detailsId;
}
Watch mode
import { ApolloBind, WatchMode } from 'aurelia-apollo-bind';
import gql from 'graphql-tag';
export class ContactList {
@ApolloBind.watch(gql`
query contactList {
contactList {
id
...
}
}`, WatchMode.local)
contacts;
}
If you're pulling the server and don't use ws
then the WatchMode
can help you to force the sync of your app only locally for this query.
TODO
- decorate the class to have general default class inits (pulling time, WatchMode)
- Init the module to force defaults (by default, pulling timing is 500ms and WatchMode is remote)
- Parameter can be an object
- have a decorator like
@ApolloBind.local
to replaceWatchMode.local
- make update similar to the query way with
save
andrevert
functionalities.
Any suggestion is welcome !
Update proposition
This is not yet implemented but I need your reactions to make something easy to use and having all the needs.
We can bind functions with the module named contactSave(newData and oldData)
and contactRevert()
.
The save()
is called with no-parameter but newData
and oldData
are transmitted by the module.
export class contactDetails {
@ApolloBind.query(..., detailsId)
@ApolloBind.update(gql`
mutation saveContact($id: ID, ...) {
saveContact(
id: $id,
...
) {
id
...
}
}`)
details;
detailsId;
somewhereElse() {
if ... detailsSave() ... else ... detailsRevert() ...
}
detailsSave(datas?: Promise<{newData, oldData}>) {
if(datas)
datas.then((newData, oldData) => console.info('newData, oldData :', newData, oldData));
}
detailsRevert() {}
}
contactSave
and contactRevert
functions don't have to be there in javascript if we don't need the returned promise.
In typescript, we need them cause of type cheking.
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago