https://github.com/cult-of-coders/apollo-live-client
Handles reactive events to easily work with live queries
https://github.com/cult-of-coders/apollo-live-client
Last synced: 5 months ago
JSON representation
Handles reactive events to easily work with live queries
- Host: GitHub
- URL: https://github.com/cult-of-coders/apollo-live-client
- Owner: cult-of-coders
- License: mit
- Created: 2018-03-26T08:13:57.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-08T13:28:53.000Z (about 6 years ago)
- Last Synced: 2024-04-24T17:41:26.876Z (12 months ago)
- Language: TypeScript
- Size: 14.6 KB
- Stars: 12
- Watchers: 5
- Forks: 2
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Apollo Live Client
This project is sponsored by [Cult of Coders](https://www.cultofcoders.com)
This package provides an easy way to work with [`apollo-live-server`](https://github.com/cult-of-coders/apollo-live-server) subscriptions.
## Usage
```js
import gql from 'graphql-tag';
import { ReactiveQuery } from 'apollo-live-client';
const GET_MESSAGES = gql`
query {
messages(threadId: String) {
_id
text
createdAt
}
}
`;
const SUBSCRIBE_MESSAGES = gql`
subscription {
messages(threadId: String) {
event
doc {
_id
text
createdAt
}
}
}
`;
```
For this system to work, the subscription root (`messages`) needs to be the same as the query . And you can query for more data from other fields in the RootQuery.
```js
const MessagesWithData = () => (
{({ data: { notifications }, loading, error }) => {
if (loading) return ;
if (error) return ;
return ;
}}
);
```
Any other prop passed to `ReactiveQuery` that is not `subscription` is going to be passed to the actual `Query` object behind the scenes.
## Customisability
You can customise the behavior of how you handle incomming data from subscriptions, by rolling out your
own `subscribeToMore` and custom `updateQuery` method.
Read more about this here:
https://www.apollographql.com/docs/react/advanced/subscriptions.html
```js
import { reduceStore } from 'apollo-live-client';
// And in your updateQuery handler of subscribeToMore:
subscribeToMore({
document: SUBSCRIBE_MESSAGES,
variables: {},
updateQuery: (prev, {subscriptionData}) {
const reactiveEvent = subscriptionData.data.notifications;
return Object.assign({}, prev, {
notifications: reduceStore(reactiveEvent, prev.notifications)
})
},
})
```
## Bare-bones subscription
To provide you with even more flexibility, you can just roll your own subscription handler and reducer:
```js
// client = Apollo Client
const observable = client.subscribe({ query: SUBSCRIBE_NEWSFEED });
const subscription = observable.subscribe({
next({ data }) {
// data is your payload
// do something with it
},
});
subscription.unsubscribe();
```