mikemintz / react-rethinkdb Goto Github PK
View Code? Open in Web Editor NEWRender realtime RethinkDB results in React
License: MIT License
Render realtime RethinkDB results in React
License: MIT License
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.
For the chat example, npm install fails because webpack is not installed
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?
See the issue here
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.
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)
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
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)
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
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'));
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.
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?
I know this is a novice issue but could you provide clear installation instructions into a react project? I would greatly appreciate that!
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
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/
import Rethinkdb from "react-rethinkdb"
console.log(Rethinkdb) // -> undefined
Transpiled by babel, because of the __esModule thing.
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.
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).
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 ?
Using API? how ?
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.
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
Is there a reason why props & state aren't used for the QueryResults? It seems to defeat the purpose of React's optimized render.
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.
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.
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.
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.
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.
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 :/
Hey Mike! For applications requiring social integration with FB/Twitter, etc... server-side auth token generation is needed. What are your thoughts on either:
// 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
Hi,
I'm getting "self not defined" on line 1194 in index.js of rethinkdb-websocket-client module, the line:
var method = self[methodName];
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.