Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/d2iq-archive/reactive-graphql
A GraphQL implementation based around RxJS, very well suited for client side only GraphQL usage
https://github.com/d2iq-archive/reactive-graphql
dcos dcos-ux-guild graphql reactive reactive-graphql rxjs
Last synced: about 1 month ago
JSON representation
A GraphQL implementation based around RxJS, very well suited for client side only GraphQL usage
- Host: GitHub
- URL: https://github.com/d2iq-archive/reactive-graphql
- Owner: d2iq-archive
- License: apache-2.0
- Archived: true
- Created: 2018-12-06T13:11:05.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T19:09:15.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T00:55:42.925Z (about 1 month ago)
- Topics: dcos, dcos-ux-guild, graphql, reactive, reactive-graphql, rxjs
- Language: TypeScript
- Homepage:
- Size: 1.57 MB
- Stars: 57
- Watchers: 10
- Forks: 5
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-graphql - reactive-graphql - Implementation of GraphQL based on RxJS and that supports live queries. (Libraries / JavaScript Libraries)
- awesome-list - reactive-graphql
- awesome-graphql - reactive-graphql - Implementation of GraphQL based on RxJS and that supports live queries. (Libraries / JavaScript Libraries)
README
# Reactive GraphQL
> GraphQL reactive executor
[](https://badge.fury.io/js/reactive-graphql) [](https://travis-ci.org/mesosphere/reactive-graphql)
Execute GraphQL queries against reactive resolvers (resolvers that return Observable) to get a reactive results.
## Install
```
$ npm i reactive-graphql --save
```
## Usage
The usage is very similar to `graphql-js`'s [`graphql`](https://graphql.org/graphql-js/graphql/#graphql) function, except that:
- resolvers can return an Observable
- the result of a query is an Observable
```js
import { graphql } from "reactive-graphql";
import { makeExecutableSchema } from "graphql-tools";
import { timer } from "rxjs";
const typeDefs = `
type Query {
time: Int!
}
`;
const resolvers = {
Query: {
// resolvers can return an Observable
time: () => {
// Observable that emits increasing numbers every 1 second
return timer(1000, 1000);
}
}
};
const schema = makeExecutableSchema({
typeDefs,
resolvers
});
const query = `
query {
time
}
`;
const stream = graphql(schema, query);
// stream is an Observable
stream.subscribe(res => console.log(res));
```
outputs
```
{ data: { time: 0 } }
{ data: { time: 1 } }
{ data: { time: 2 } }
{ data: { time: 3 } }
{ data: { time: 4 } }
...
```
## Caveats
GraphQL Subscriptions are not supported (see [issue #27](https://github.com/mesosphere/reactive-graphql/issues/27)) as everything is treated as subscriptions.
## See Also
- [reactive-graphql-react](https://github.com/DanielMSchmidt/reactive-graphql-react)
- [apollo-link-reactive-schema](https://github.com/getstation/apollo-link-reactive-schema)
- [@dcos/data-service](https://github.com/dcos-labs/data-service)
- [graphql-rxjs](https://github.com/DxCx/graphql-rxjs/)
## Advanced usage [](https://codesandbox.io/s/github/DanielMSchmidt/reactive-graphql-demo/tree/master/?hidenavigation=1)
```js
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import { graphql } from "reactive-graphql";
import { makeExecutableSchema } from "graphql-tools";
import { from, interval, of } from "rxjs";
import { map, merge, scan, combineLatest } from "rxjs/operators";
import { componentFromStream } from "@dcos/data-service";
// mocked API clients that return Observables
const oldPosts = from(["my first post", "a second post"]);
const newPosts = interval(3000).pipe(map(v => `Blog Post #${v + 1}`));
const fetchPosts = () =>
oldPosts.pipe(
merge(newPosts),
scan((acc, item) => [...acc, item], [])
);
const votesStore = {};
const fetchVotesForPost = name => of(votesStore[name] || 0);
const schema = makeExecutableSchema({
typeDefs: `
type Post {
id: Int!
title: String!
votes: Int!
}
# the schema allows the following query:
type Query {
posts: [Post]
}
# this schema allows the following mutation:
type Mutation {
upvotePost (
postId: Int!
): Post
}
`,
resolvers: {
Query: {
posts(parent, args, context) {
return fetchPosts().pipe(
map(emittedValue =>
emittedValue.map((value, index) => ({ id: index, title: value }))
)
);
}
},
Post: {
votes(parent, args, context) {
return fetchVotesForPost(parent.title);
}
}
}
});
const query = `
query {
posts {
title
votes
}
}
`;
const postStream = graphql(schema, query);
const PostsList = componentFromStream(propsStream =>
propsStream.pipe(
combineLatest(postStream, (props, result) => {
const {
data: { posts }
} = result;
return posts.map(post => (
{post.title}
));
})
)
);
function App() {
return (
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);
```
## License
Apache 2.0