",
8 | "license": "MIT",
9 | "scripts": {
10 | "test": "cross-env CI=1 jest",
11 | "test:watch": "jest --watch"
12 | },
13 | "dependencies": {
14 | "@babel/runtime": "^7.11.2",
15 | "graphql-anywhere": "github:brysgo/graphql-anywhere#graphql-gun",
16 | "gun": "^0.2020.520",
17 | "try-get": "^1.0.0"
18 | },
19 | "devDependencies": {
20 | "@babel/core": "^7.11.1",
21 | "@babel/plugin-transform-runtime": "^7.11.0",
22 | "@babel/preset-env": "^7.11.0",
23 | "cross-env": "^7.0.2",
24 | "graphql": "^15.3.0",
25 | "graphql-tag": "^2.11.0",
26 | "jest": "^26.3.0",
27 | "prettier": "^2.0.5",
28 | "react": "^16.13.1",
29 | "react-test-renderer": "^16.13.1"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/react/__snapshots__/index.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`react createContainer reloads your component when new data comes 1`] = `
4 |
11 | {
12 | "palette": {
13 | "rcCrycwndc": {
14 | "thing": {
15 | "stuff": {
16 | "one": "hello",
17 | "two": "world"
18 | }
19 | }
20 | }
21 | },
22 | "color": "red"
23 | }
24 |
25 | `;
26 |
27 | exports[`react createContainer reloads your component when new data comes 2`] = `
28 |
35 | {
36 | "palette": {
37 | "rcCrycwndc": {
38 | "thing": {
39 | "stuff": {
40 | "one": "new",
41 | "two": "world"
42 | }
43 | }
44 | }
45 | },
46 | "color": "red"
47 | }
48 |
49 | `;
50 |
51 | exports[`react createContainer renders the fragment in the container 1`] = `
52 |
59 | {
60 | "palette": {
61 | "rcCrtfitc": {
62 | "color": {
63 | "hue": 255,
64 | "saturation": 255,
65 | "value": 255
66 | }
67 | }
68 | },
69 | "color": "blue"
70 | }
71 |
72 | `;
73 |
74 | exports[`react graphqlGun provides apollo client syntax for container 1`] = `
75 |
82 | {
83 | "data": {
84 | "color": {
85 | "hue": 255,
86 | "saturation": 255,
87 | "value": 255
88 | }
89 | },
90 | "color": "blue"
91 | }
92 |
93 | `;
94 |
--------------------------------------------------------------------------------
/react/index.js:
--------------------------------------------------------------------------------
1 | const graphqlGunUtil = require("../");
2 | const tryGet = require("try-get");
3 |
4 | module.exports = function({ React, gun }) {
5 | function createContainer(Component, { fragments }) {
6 | class Container extends React.Component {
7 | constructor() {
8 | super();
9 | this.state = {};
10 | this.resetPromise();
11 | }
12 |
13 | resetPromise() {
14 | let resolve;
15 | this.promise = new Promise(res => resolve = res);
16 | if (this.resolve) this.resolve(() => this.promise);
17 | this.resolve = resolve;
18 | }
19 |
20 | reloadFragmentOnResolve(fragment, asyncIterator) {
21 | return asyncIterator.next().then(iter => {
22 | this.setState({ data: { [fragment]: iter.value } });
23 | this.resetPromise(); // for testing
24 | this.reloadFragmentOnResolve(fragment, asyncIterator);
25 | });
26 | }
27 |
28 | componentDidMount() {
29 | return Object.keys(fragments).map(fragment => {
30 | const asyncIterator = graphqlGunUtil(fragments[fragment], gun)[
31 | Symbol.iterator
32 | ]();
33 | this.reloadFragmentOnResolve(fragment, asyncIterator);
34 | return asyncIterator;
35 | });
36 | }
37 |
38 | render() {
39 | return React.createElement(
40 | Component,
41 | Object.assign({}, this.state.data, this.props)
42 | );
43 | }
44 | }
45 | Container.displayName = `${Component.displayName}DataContainer`;
46 | return Container;
47 | }
48 |
49 | function graphqlGun(data) {
50 | return function wrap(Component) {
51 | return createContainer(Component, { fragments: { data } });
52 | };
53 | }
54 |
55 | return {
56 | createContainer,
57 | graphqlGun
58 | };
59 | };
60 |
--------------------------------------------------------------------------------
/react/index.test.js:
--------------------------------------------------------------------------------
1 | /* global describe, it, expect */
2 | const gql = require("graphql-tag");
3 | const Gun = require("gun/gun");
4 | const React = require("react");
5 | const gun = Gun();
6 | const { createContainer, graphqlGun } = require("./")({ React, gun });
7 |
8 | const renderer = require("react-test-renderer");
9 |
10 | const Color = props => {
11 | return React.createElement(
12 | "div",
13 | { style: { color: props.color } },
14 | JSON.stringify(props, null, 2)
15 | );
16 | };
17 |
18 | describe("react", () => {
19 | describe("createContainer", () => {
20 | it("renders the fragment in the container", async () => {
21 | const chain = gun.get("rcCrtfitc");
22 | chain
23 | .get("color")
24 | .put({ hue: 255, saturation: 255, value: 255, other: "foo" });
25 |
26 | const ColorContainer = createContainer(Color, {
27 | fragments: {
28 | palette: gql`{
29 | rcCrtfitc {
30 | color {
31 | hue
32 | saturation
33 | value
34 | }
35 | }
36 | }`
37 | }
38 | });
39 |
40 | let containerInstance;
41 | const colorContainerElement = React.createElement(ColorContainer, {
42 | color: "blue",
43 | ref: container => containerInstance = container
44 | });
45 | const component = renderer.create(colorContainerElement);
46 |
47 | await containerInstance.promise;
48 | await containerInstance.promise;
49 |
50 | let tree = component.toJSON();
51 | expect(tree).toMatchSnapshot();
52 | });
53 |
54 | it("reloads your component when new data comes", async () => {
55 | const chain = gun.get("rcCrycwndc");
56 | chain.get("thing").put({
57 | stuff: {
58 | one: "hello",
59 | two: "world"
60 | }
61 | });
62 |
63 | const ColorContainer = createContainer(Color, {
64 | fragments: {
65 | palette: gql`{
66 | rcCrycwndc {
67 | thing {
68 | stuff @live {
69 | one
70 | two
71 | }
72 | }
73 | }
74 | }`
75 | }
76 | });
77 |
78 | let containerInstance;
79 | const colorContainerElement = React.createElement(ColorContainer, {
80 | color: "red",
81 | ref: container => containerInstance = container
82 | });
83 | const component = renderer.create(colorContainerElement);
84 |
85 | const next = await containerInstance.promise;
86 |
87 | let tree = component.toJSON();
88 | expect(tree).toMatchSnapshot();
89 |
90 | chain.get("thing").put({ stuff: { one: "new" } });
91 |
92 | await next();
93 |
94 | tree = component.toJSON();
95 | expect(tree).toMatchSnapshot();
96 | });
97 | });
98 |
99 | describe("graphqlGun", () => {
100 | it("provides apollo client syntax for container", async () => {
101 | gun
102 | .get("color")
103 | .put({ hue: 255, saturation: 255, value: 255, other: "foo" });
104 |
105 | const ColorContainer = graphqlGun(
106 | gql`{
107 | color {
108 | hue
109 | saturation
110 | value
111 | }
112 | }`
113 | )(Color);
114 |
115 | let containerInstance;
116 | const colorContainerElement = React.createElement(ColorContainer, {
117 | color: "blue",
118 | ref: container => containerInstance = container
119 | });
120 | const component = renderer.create(colorContainerElement);
121 |
122 | await containerInstance.promise;
123 |
124 | let tree = component.toJSON();
125 | expect(tree).toMatchSnapshot();
126 | });
127 | });
128 | });
129 |
--------------------------------------------------------------------------------