mikemintz/react-rethinkdb

Render realtime RethinkDB results in React

react-rethinkdb's Issues

SSR?

Is this Module executed on the Server or on the Client?

In my case, my Rethink Database is hidden behind Wireguard, so it'd only accessible to my App when it's running something on the Server.

NPM missing dependency : webpack

For the chat example, npm install fails because webpack is not installed

Automatically reconnect and resync state after disconnection

First of all, I'd just like to thank you for putting together this package. I've been looking for something like this for a while - a way to keep the UI perfectly in sync with the database, without having to mess around with Flux and async HTTP calls to keep the data consistent. React and Rethinkdb are a perfect match for this.

One issue that I noticed when testing the chat example is that the client doesn't automatically reconnect after a disconnect. I was hoping that the client would reconnect and then bring itself up to speed, but I had to refresh the page in order to re-sync with DB. Is it possible to do this?

Can not install on Node v4

See the issue here

Support IE11

I tried testing examples/chat in IE11 and got the error Mixin in ChatBox does not have Session.

Ideally this would work in IE10 and IE11 since they both support WebSockets.

An optional component utf-8-validate creates error during install

During install utf-8-validate library creates several depreciation warnings and prevent bcrypt library to install correctly.

Installing bcrypt separately solves problem. But one should make further installations with --ignore-optional flag (yarn install --ignore-optional)

Add support of `arrayLimit`

From docs(https://rethinkdb.com/limitations/):

By default, arrays on the RethinkDB server have a size limit of 100,000 elements. This can be changed on a per-query basis with the arrayLimit (or array_limit) option to run.

arrayLimit: the maximum numbers of array elements that can be returned by a query (default: 100,000). This affects all ReQL commands that return arrays. Note that it has no effect on the size of arrays being written to the database; those always have an upper limit of 100,000 elements.

But it looks like we can't specify any options to runQuery from react-rethinkdb. So please add support of these options, like we have for run

sessionCreator reject() results in timeout on the client

Don't know if it's a bug in react-rethindb package or the rethinkdb-websocket-client package. I'm not using bluebird.

Here's an example:

// server
const sessionCreator = params => {
  return new Promise((resolve, reject) => {
    return reject('not authorized');
  });
};

// client
session.connect({ ... })
session._connPromise.then(conn => console.info('got conn %o', conn))
.catch(err => console.error('got error %o', err)); // should be catch'd here?

Here is the error message on the client, which seems to be thrown from the WebSocket package.

Unhandled rejection ReqlTimeoutError: Could not connect to localhost:3000, operation timed out.
    at ReqlTimeoutError.ReqlError [as constructor] (eval at <anonymous> (http://localhost:3000/bundle.js:3693:2), <anonymous>:7022:14)
    at new ReqlTimeoutError (eval at <anonymous> (http://localhost:3000/bundle.js:3693:2), <anonymous>:7155:52)
    at eval (eval at <anonymous> (http://localhost:3000/bundle.js:3693:2), <anonymous>:5665:37)

unable to access nested component

I am trying to access a field inside a object but it is giving me an error.
my object is like,
{
name: "john doe",
avatar: {
original: 'default.png',
thumb: 'thumb-default.png'
}
}

here i can access name but using this.data.currentUser.value().name but can't access avatar.thumb

Support react-native

I am going through the tutorial and I hit an error when I try to connect to the local websocket server from my React Native app. The error is:

Error: Buffer is not defined
 stack: 
  Function.<anonymous>                                         index.ios.bundle:64324
  Function.module.exports.varar [as expr]                      index.ios.bundle:58951
  Table.<anonymous>                                            index.ios.bundle:61785
  Table.RDBOp [as constructor]                                 index.ios.bundle:61791
  new                                                          index.ios.bundle:62148
  Function.<anonymous>                                         index.ios.bundle:64402
  Function.module.exports.aropt [as table]                     index.ios.bundle:58972
  React.createClass.componentDidMount                          index.ios.bundle:1493
  CallbackQueue.assign.notifyAll                               index.ios.bundle:6674
  ReactNativeReconcileTransaction.ON_DOM_READY_QUEUEING.close  index.ios.bundle:16780
  ReactNativeReconcileTransaction.Mixin.closeAll               index.ios.bundle:7214
  ReactNativeReconcileTransaction.Mixin.perform                index.ios.bundle:7155
  batchedMountComponentIntoNode                                index.ios.bundle:7516
  Object.ReactDefaultBatchingStrategy.batchedUpdates           index.ios.bundle:16560
  Object.batchedUpdates                                        index.ios.bundle:6444
  Object.ReactNativeMount.renderComponent                      index.ios.bundle:7600
 URL: undefined
 line: undefined
 message: Buffer is not defined

Some relevant code:

var ReactRethinkdb = require('react-rethinkdb');
var r = ReactRethinkdb.r;

//...

ReactRethinkdb.DefaultSession.connect({
  host: 'localhost',
  port: 8015,
  path: '/db',
  secure: false,
  db: 'test',
});

//...

    console.log(r.table('turtles'));

WebSocket connection to 'ws: // localhost: 8015 / db' failed

I'm testing linux centos server and this error appeared in my browser:

WebSocket connection to 'ws: // localhost: 8015 / db' failed: Error in connection establishment: net :: ERR_CONNECTION_REFUSED

Unhandled rejection ReqlDriverError: Could not connect to localhost: 8015.

I have already released ports 8080, 8015 and 28015 in my csf firewall
Could anyone help?

Note: I'm using npm install --unsafe-perm to solve a problem with webpack. Is it recommended?

WARN optional SKIPPING OPTIONAL DEPENDENCY
and
WARN notsup SKIPPING OPTIONAL DEPENDENCY
They also appear, but I ignore them.

Security?

I had considered doing something like this as well -- but stopped when I realized that the RethinkDB is entirely exposed when creating an app like this. I couldn't think of a good way to lock down access to the database from people who wanted to insert / update information to their hearts content.

What are your thoughts on security?

Provide Installation Instructions

I know this is a novice issue but could you provide clear installation instructions into a react project? I would greatly appreciate that!

Normalize queries that contain anonymous functions

Queries that contain anonymous functions cause issues with equality for sharing query results and for defining a query whitelist. This is because the numerical var ids increment each time the same query is generated in the RethinkDB driver. Let's normalize the var ids so that these queries are treated deterministically.

More details in this comment:

react-rethinkdb/src/QueryRequest.js

Lines 37 to 49 in 67a7c43

	// TODO This isn't perfectly deterministic for queries with anonymous
	// functions, since the variable identifier keeps incrementing when we create
	// new "identical" queries.
	// E.g. r.table('turtles').filter(x => x('herdId').eq(props.herdId))
	// It looks like the RethinkDB JavaScript driver has to maintain a global
	// nextVarId counter which can increment between the creation of identical
	// queries. This is probably necessary so that queries that contain multiple
	// functions won't have overlapping var ids. One possible approach is to
	// "normalize" var ids as a query preprocessing step: replace each var id
	// with an index in which that var id was first seen in the query. Further
	// research needs to be done to determine if that is safe. This approach has
	// a disadvantage of being harder to debug query issues when queries are
	// being altered.

This isn't perfectly deterministic for queries with anonymous functions, since the variable identifier keeps incrementing when we create new "identical" queries.

E.g. r.table('turtles').filter(x => x('herdId').eq(props.herdId))

It looks like the RethinkDB JavaScript driver has to maintain a global nextVarId counter which can increment between the creation of identical queries. This is probably necessary so that queries that contain multiple functions won't have overlapping var ids. One possible approach is to "normalize" var ids as a query preprocessing step: replace each var id with an index in which that var id was first seen in the query. Further research needs to be done to determine if that is safe. This approach has a disadvantage of being harder to debug query issues when queries are being altered.

It looks like this should be safe to do if we replace VAR terms and FUNC argument terms the same way. Documentation in the "anonymous functions" section of http://www.rethinkdb.com/docs/writing-drivers/

Support ES6 import syntax

import Rethinkdb from "react-rethinkdb"
console.log(Rethinkdb)  //  -> undefined

Transpiled by babel, because of the __esModule thing.

Trying to get working in create-react-app

I am trying to get this to work in a bare create-react-app Im not sure if it is a problem with the react version or what but I am getting an error SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL Im new to react and rethinkdb, would really appreciate any help, thanks.

Replacing subscribed data on change

The main essence is that I'm getting duplicates of the same objects in this.data. One is actual (with new values), another is not. Changed object is placed at the end of array but old object not removed.

I found this code:

        var oldIndex = -1;
        if (oldVal) {
          (function () {
            var lookup = JSON.stringify(oldVal);
            oldIndex = (0, _utilJs.findIndex)(_this4.value, function (x) {
              return JSON.stringify(x) === lookup;
            });
          })();
        }

In my case the returned value of comparison should be true but I got false coz the values was little bit different:

{"agents":[{"first_name":"Bilbo","last_name":"Baggins"}],"awaiting_from":"2016-11-22T13:07:00.395Z","customer":{"name":"1068916776508564q","tags":[{"id":48,"name":"customer_tag_3"},{"id":3,"name":"customer_tag_1"}]},"id":20232,"last_message":{"channel":{"name":"Facebook"},"created_at":"2016-11-14T11:01:50.758Z","id":1577651,"inbound":false,"text":"Hello, it's a custom message from Postman.","updated_at":"2016-11-14T11:01:51.531Z","user_id":4},"last_reminder":{"text":"test reminder","time":"2016-11-22T13:07:00.033Z"},"status":"new_message","tags":[{"id":5,"name":"conversation_tag_1"},{"id":6,"name":"conversation_tag_2"}]}

{"agents":[{"first_name":"Bilbo","last_name":"Baggins"}],"awaiting_from":"2016-11-22T13:07:00.395Z","customer":{"name":"1068916776508564q","tags":[{"id":48,"name":"customer_tag_3"},{"id":3,"name":"customer_tag_1"}]},"id":20232,"last_message":{"channel":{"name":"Facebook"},"created_at":"2016-11-14T11:01:50.758Z","id":1577651,"inbound":false,"text":"Hello, it's a custom message from Postman.","updated_at":"2016-11-14T11:01:51.531Z","user_id":4},"last_reminder":{"text":"test reminder","time":"2016-11-22T13:07:00.033Z","created_at":"2016-11-22T13:07:00.033Z"},"status":"new_message","tags":[{"id":5,"name":"conversation_tag_1"},{"id":6,"name":"conversation_tag_2"}]}

I have just changed QueryState.js to my specific case:

        var oldIndex = -1;
        if (oldVal) {
          (function () {
            // var lookup = JSON.stringify(oldVal);
            oldIndex = (0, _utilJs.findIndex)(_this4.value, function (x) {
              // return JSON.stringify(x) === lookup;
              return x.id === oldVal.id;
            });
          })();
        }

It works perfectly and faster (no performance tests though, lol) but requires presence of id (which should be an identificator). I think you could implement some feature to have (optionally) your identificator fieldname in observe to use this comparison without stringifying full object (and recommend to use it). Or, at least, to find how this bug appear and how it is possible to receive different objects in this case. Maybe it is fixable (I think so but too lazy to debug more).

Flux / Redux integration

Is there a pattern to integrate this with Flux and/or Redux?

I like how the proxy server and the client are in separate packages, but there seems to be a lot of useful logic around subscriptions in this package that is tightly coupled to the mixin (at least, I can't figure out how to trivially separate it).

Pulling this logic out and packaging it might be an easy solution to #8 - I don't need anything fancy like a mixin, for my use case at least. Just an interface to subscribe to changefeeds and pass the results to Redux.

How to make a remote connection from my computer and my server ?

How to make a remote connection from my computer and my server ?
Using API? how ?

Webpack npm install error

Hello,

I'm having trouble compiling the frontend of the application. I get the following error each time I run "npm install".

Example with webpack-dev-server

I'm new to webpack and websockets. Could you please, provide some example, or guidance, explaining the use of react-rethinkdb inside a webpack-dev-server (with hot reloading capabilities) ? Thank you very much.

Chat example not works for me

npm start

[email protected] start /home/chat
babel-node server/index.js

/home/chat/server/index.js:1
(function (exports, require, module, __filename, __dirname) { import { AuthManager } from './AuthManager';
^^^^^^
SyntaxError: Unexpected token import
at Object.exports.runInThisContext (vm.js:76:16)
at Module._compile (module.js:542:28)
at loader (/home/chat/node_modules/babel-register/lib/node.js:144:5)
at Object.require.extensions.(anonymous function) [as .js] (/home/chat/node_modules/babel-register/lib/node.js:154:7)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Function.Module.runMain (module.js:604:10)
at /home/chat/node_modules/babel-cli/lib/_babel-node.js:155:24
at Object. (/home/chat/node_modules/babel-cli/lib/_babel-node.js:156:7)

npm ERR! Linux 3.14.32-xxxx-grs-ipv6-64
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "start"
npm ERR! node v6.10.0
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: babel-node server/index.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'babel-node server/index.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the example-chat package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! babel-node server/index.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs example-chat
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls example-chat
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/chat/npm-debug.log

Props & State vs. this.data

Is there a reason why props & state aren't used for the QueryResults? It seems to defeat the purpose of React's optimized render.

Changefeed splices on sortBy

Sorry about all the PR's and issues, I'm making a universal/isomorphic react starter kit, hence all the experiments.

Example query:

r.table('turtles').changes().sortBy({ index: r.desc('addedAt') });

New items pushed to the table turtles will be added to the bottom of the list, not top like they should.

I don't know if it should be react-rethinkdb's responsibility to do so, or the user has to explicitly sort the list before rendering.

How use without React

Hi,
I'm building a rethink server using your modules server, client and react to replace layer data in Meteor projects. I want use subscription to changefeeds and simple query, but without React. How I can use this module ? Could you give me a short example without react componet. I don't know how use Subscription Manager and QueryRequest.

thanks.

Use atomic changefeeds instead of extra non-realtime initial query

Now that RethinkDB 2.2 has been released with atomic changefeeds, we can make our changefeed logic much simpler and more robust. See the TODO notes in QueryState.js.

This will probably make react-rethinkdb incompatible with older versions of RethinkDB, at least for changefeed queries. But I consider that an acceptable tradeoff, given that this solves the possible race conditions we had.

We'll need to make sure we can fail fast on old versions of RethinkDB running in the backend. I haven't looked at the API for atomic changefeeds, but hopefully it's something that will be rejected by RethinkDB 2.1 as opposed to fulfilled incorrectly.

Isomorphic server and client flickering

Do you have any example how to do a isomorphic component that doesn't re-fetch the data on the client side and cause a flicker?

You talked about using a changefeed queries in your isomorphic example, but I can't figure out how, with the current state of the mixin api, as the changes attribute only accepts a boolean flag, I can't disable the includeInitial on the client.

Provide alternative to mixin

Mixins don't work with React components written as ES6 classes.

Let's provide something that will work like a superclass, higher order component, or ES7 decorator.

Change query on componentDidUpdate

I'm running into an issue using this with react-router where I'm having to navigate to a route twice to get the QueryRequest in the observe() function to fire. I believe this is because react-router doesn't trigger an unmount/mount of the component between navigation.

I was hoping you could give me some guidance, as I'm totally stumped...

This is the component in question:

import './styles/Page.scss';

import React, { Component } from 'react';
import Remarkable from 'remarkable';
import {r, PropsMixin, QueryRequest} from 'react-rethinkdb';
let md = new Remarkable();

export const Page=React.createClass({

    mixins: [PropsMixin('rethinkSession')],

    observe( props, state ) {
        console.log(props.params.slug);
        return {
            page: new QueryRequest({ query: r.table('pages').filter({"slug": this.props.params.slug}), changes: true, initial: {} }),
        }
    },

    createMarkup(markup){
        return {__html: md.render(markup)};
    },

    componentWillUnmount(){
        console.log('unloading');
    },

    render() {
        const page = this.data.page.value()[0];

        // console.log(this.data);
        let bodyText = '';

        if(page && page.hasOwnProperty('bodyText')) {
            bodyText = page.bodyText;
        }

        return (
            <div className='gse-body'>
                <div className='gse-center'>
                    <div className='gse-content'>
                        <div className='page-outer'>
                            <div className='page-inner' dangerouslySetInnerHTML={ this.createMarkup(bodyText) }/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
});

My router looks like this:

DefaultSession.connect({
    host: 'REDACTED',
    port: 8000,
    path: '/db',
    secure: false,
    db: 'data',
    autoReconnectDelayMs: 200
});

function createElement(Component, props) {
    return <Component {...props} rethinkSession={ DefaultSession }/>
}

render((
    <Router createElement={ createElement } history={ history }>
        <Route path="/" component={ App }>
            <IndexRoute component={ Home }/>
            <Route path="dashboard" component={ Dashboard }>
                <Route path="projectManager" components={{ body: ProjectManager, sidebar: ProjectManagerSidebar }}/>
                <Route path="pageManager" components={{ body: NothingSelected, sidebar: PageManagerSidebar }}>
                    <Route path=":pageID" component={ PageManager }/>
                </Route>
            </Route>
            <Route path="page/:slug" component={ Page }/>
        </Route>
    </Router>), document.getElementById('root'));

I hope my question makes sense :/

Server-Side AuthTokens/Sessions

Hey Mike! For applications requiring social integration with FB/Twitter, etc... server-side auth token generation is needed. What are your thoughts on either:

1. Sending the authToken to the client on socket connection (less secure), which can be then used to filter rows per your examples.
2. Extending server-side validations (so client needn't know its own auth token) to automatically filter only rows containing the authToken for specific queries, eg:

// client observe
myMessages: new QueryRequest({r.table('messages'), validateAuthToken: true, changes: true, initial: []})

// server validate
r.table('messages')
 .changes({include-initial: true})
 .filter(r.row('authToken').eq(session.authToken))  // automatically filtered

Is this already possible?

Really digging your software,
Keith

self not defined - refactor for server side rendering

Hi,
I'm getting "self not defined" on line 1194 in index.js of rethinkdb-websocket-client module, the line:

var method = self[methodName];