hzql - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

index.js

@@ -16,2 +16,4 @@ 'use strict';
 
+var _serialization = require('@horizon/client/lib/serialization');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -28,6 +30,10 @@
 
-  function Provider() {
+  function Provider(props) {
     _classCallCheck(this, Provider);
 
-    return _possibleConstructorReturn(this, Object.getPrototypeOf(Provider).apply(this, arguments));
+    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(Provider).call(this, props));
+
+    _this.props.horizon.$$__hzql_cache = _this.props.cache ? (0, _serialization.deserialize)(_this.props.cache) : {};
+    _this.props.horizon.$$__hzql_cache_string = '';
+    return _this;
   }
@@ -74,2 +80,3 @@
         _this2.version = version;
+        _this2.subscription = undefined;
         return _this2;
@@ -85,2 +92,8 @@ }
 
+          var queryString = q.toString();
+
+          if (this.context.horizon.$$__hzql_cache[queryString]) {
+            this.setState({ results: this.context.horizon.$$__hzql_cache[queryString] });
+          }
+
           if (isLive) {
@@ -96,5 +109,13 @@ q = q.watch();
             _this3.setState({ results: results });
-            if (_this3.context.Fiber) fiber.run();
+
+            if (_this3.context.Fiber) {
+              _this3.context.horizon.$$__hzql_cache[queryString] = results;
+              _this3.context.horizon.$$__hzql_cache_string = (0, _serialization.serialize)(_this3.context.horizon.$$__hzql_cache);
+
+              fiber.run();
+            }
           });
 
+          this.subscription = sub;
+
           if (this.context.Fiber) {
@@ -106,2 +127,7 @@ fiber = this.context.Fiber.current;
       }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+          this.subscription.unsubscribe();
+        }
+      }, {
         key: 'render',
@@ -108,0 +134,0 @@ value: function render() {

package.json

 {
   "name": "hzql",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Easy querying for Horizon and React",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # HzQL
 
-> Easy querying for Horizon and React
+> Data Fetching for React Using Horizon 2
 
+```
+npm install --save hzql
+```
+
+- Easy bindings from Horizon into React
+- Support for Horizon 2
+- Support for server side rendering
+
 HzQL with React colocates your data and components. It requires Horizon 2
 for its new `hz.model` query.
 
+## Example
+
+```js
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import Horizon from '@horizon/client'
+import { Provider, connect } from 'hzql'
+
+const horizon = new Horizon
+
+@connect(hz => props => ({
+  users: hz('users'),
+  posts: hz('posts').order('date')
+}))
+class UserPosts extends Component {
+  render () {
+    if (!this.props.users || !this.props.posts) return <span>Loading...</span>
+    
+    return <div>
+      <h1>Users:</h1>
+      {this.props.users.map(u => <li key={u.id}>u.name</li>)}
+      <h1>Posts:</h1>
+      {this.props.posts.map(p => <li key={p.id}>p.title</li>)}
+    </div>
+  }
+}
+
+render(<Provider horizon={horizon}>
+  <UserPosts />
+</Provider>, document.getElementById('root'))
+```
+
 ## Setting up HzQL
@@ -43,3 +83,3 @@
 const App = props =>
-  <pre>Users: {this.props.users}</pre>
+  <pre>Users: {<pre>Users: {props.users}</pre>props.users}</pre>
 
@@ -54,3 +94,43 @@ const query = hz => props => ({
 To run a live query, use `connect.live` instead of `connect`
+Using the new decorator syntax:
 
+```js
+import React from 'react'
+import { connect } from 'hzql'
+
[e-mail](hz => props => ({
+  users: hz('post').order('date')
+}))
+export default class App {
+  render () {
+    return <pre>Users: {this.props.users}</pre>
+  }
+}
+```
+
+## Waiting for Results
+
+If you would prefer for the component to not render at all until the results
+of the query arrive, you can use `connect.await`. This will cause your
+component to always return `null` from `render` until the query is finished.
+
+The watching equivalent of this is `connect.liveAwait`
+
+__Example__
+
+```js
+import React from 'react'
+import { connect } from 'hzql'
+
+const App = props =>
+  <pre>Users: {this.props.users}</pre>
+
+const query = hz => props => ({
+  users: hz('post').order('date')
+})
+
+// This will render to `null` until `hz('posts').order('date')` is retrieved
+export default connect.await(query)(App)
+```
+
 ## Mutations
@@ -97,1 +177,42 @@
 ## Server side rendering
+
+To render on the server, install `node-fibers` using
+
+```
+npm i -S node-fibers
+```
+
+In your server code, your call to `renderToString` should look something like
+
+```js
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import Fiber from 'fibers'
+import ws from 'ws'
+import Horizon from '@horizon/client'
+import { Provider } from 'hzql'
+import App from './App'
+
+// Give Horizon a websocket library to use
+global.WebSocket = ws
+
+let hz = new Horizon({ host: 'localhost:8181' })
+
+// Wrap your call to `renderToString` with a Fiber
+Fiber(() => {
+
+  // Pass the horizon instance into provider like normal
+  // Make sure to pass the `Fiber` library into `Provider` so it
+  // knows to use it
+  let html = renderToString(<Provider horizon={hz} fiber={Fiber}>
+    <App />
+  </Provider>)
+
+  // Do something with `html`, e.x. `ctx.body = html`
+
+  // Make sure to disconnect or the server won't stop
+  hz.disconnect()
+}).run()
+
+// Run the Fiber
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13100

increased by39.42%

Lines of code

135

increased by16.38%

Number of lines in readme file

216

increased by127.37%

No dependency changes