WIP - Exploring using search from Rails #18
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import {Entity, generateZQL} from '@rocicorp/rails'; | ||
| import {EntityQuery} from '@rocicorp/rails/out/zql/query/entity-query.js'; | ||
| import {EntitySchema} from '@rocicorp/rails/out/zql/schema/entity-schema.js'; | ||
| import {useEffect, useMemo, useState} from 'react'; | ||
|
|
||
| export function useQuery<S extends EntitySchema, R>( | ||
| query: EntityQuery<S, R>, | ||
| dependencies: unknown[] = [], | ||
| ): R { | ||
| const view = useMemo(() => query.prepare().materialize(), dependencies); | ||
|
There was a problem hiding this comment. you'll need a way to destroy the statement. |
||
| const [value, setValue] = useState<R>(view.value as R); | ||
| useEffect(() => { | ||
|
There was a problem hiding this comment. Setting state via
In other words, the component will render and fully paint to the browser once with the updated dependencies and then again with the effects (setValue) of You'd need to emulate const [prevDependencies, setPrevDependencies] = useState(dependencies);
if (!shallowEqual(dependencies, prevDependencies)) {
setPrevDependencies(prevDependencies);
const newView = viewFn();
setValue(newView.value);
setView(newView);
disposer();
setDisposer(newView.on(setValue));
}This will ensure that when dependencies change, the new view is created and value set on the component before it renders to the screen. some related discussion: https://twitter.com/tantaman/status/1732140032729985512 There was a problem hiding this comment. You have certainly opened up a can of worms! The code that you have here and the code on twitter seems incomplete. We need to have a cleanup phase too to remove the listener. There was a problem hiding this comment.
This should be more complete: // track previous deps
const [prevDependencies, setPrevDependencies] = useState();
// track our view / query results
const [view, setView] = useState();
// track our subscription to the view
const [disposer, setDisposer] = useState();
// prevDeps === undefined -> first render
// prevDeps != deps, re-render
if (prevDependencies === undefined || !shallowEqual(dependencies, prevDependencies)) {
setPrevDependencies(prevDependencies);
// new deps? compute view / query
const newView = viewFn();
// destroy old view
view?.destroy();
// destroy old subscription
disposer?.();
setValue(newView.value);
setView(newView);
setDisposer(newView.on(setValue));
}
// also need to try cleaning up on un-mount of the component
useEffect(() => {
disposer?.();
view?.destroy();
}, []);There was a problem hiding this comment. Thanks. I will try again to see if I can get something along these lines working. For replicache-react, useSubscribe was simpler because useSubscribe is always async and we do not have the result immediately. |
||
| setValue(view.value); | ||
| return view.on(setValue); | ||
| }, dependencies); | ||
| return value; | ||
| } | ||
|
|
||
| type ReplicacheLike = Parameters<typeof generateZQL>[0]; | ||
|
|
||
| export function useTable<E extends Entity>( | ||
|
There was a problem hiding this comment. A few things:
There was a problem hiding this comment. I initially had a useMemo in there... that is why it was structured like a hook. There was a problem hiding this comment.
The query starts with an object... If we want to collapse this into one hook it needs to be something along the lines of: useQuery<List[]>(rep, 'list', q => q.select('id', 'name').where(...), deps);This looks fine to me :-) But we also need to get and when there is join involved we need to register all the key namespaces. useQuery(rep, {
list: listSchema.parse,
todo: todoSchema.parse,
}, q => ..., deps) |
||
| rep: ReplicacheLike, | ||
| tableName: string, | ||
| ) { | ||
| return generateZQL<E>(rep, tableName); | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
missing
[listID]deps