Fix also useQueries, update comments

evoluhq · Apr 30, 2024 · cea02b6 · cea02b6
1 parent 6d08387
commit cea02b6
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 13 deletions.
diff --git a/.changeset/plenty-pants-kick.md b/.changeset/plenty-pants-kick.md
@@ -0,0 +1,5 @@
+---
+"@evolu/common-react": patch
+---
+
+Fix also useQueries, update comments
diff --git a/packages/evolu-common-react/src/useQueries.ts b/packages/evolu-common-react/src/useQueries.ts
@@ -32,7 +32,9 @@ export const useQueries = <
   const once = useRef(options).current.once;
   const allQueries = once ? queries.concat(once) : queries;
   const wasSSR = useWasSSR();
-  if (!wasSSR) {
+  if (wasSSR) {
+    if (!options.promises) evolu.loadQueries(allQueries);
+  } else {
     if (options.promises) options.promises.map(use);
     else evolu.loadQueries(allQueries).map(use);
   }

diff --git a/packages/evolu-common-react/src/useQuery.ts b/packages/evolu-common-react/src/useQuery.ts
@@ -22,13 +22,12 @@ import { useWasSSR } from "./useWasSSR.js";
  *   // Get all rows, but without subscribing to changes.
  *   const { rows } = useQuery(allTodos, { once: true });
  *
- *   // Prefetch all rows
+ *   // Prefetch rows.
  *   const allTodos = evolu.createQuery((db) =>
  *     db.selectFrom("todo").selectAll(),
  *   );
- *   // Load before usage.
  *   const allTodosPromise = evolu.loadQuery(allTodos);
- *   // A usage.
+ *   // Use prefetched rows.
  *   const { rows } = useQuery(allTodos, { promise: allTodosPromise });
  */
 export const useQuery = <R extends Row>(
@@ -43,15 +42,7 @@ export const useQuery = <R extends Row>(
 ): QueryResult<R> => {
   const evolu = useEvolu();
   const wasSSR = useWasSSR();
-  /**
-   * `wasSSR` is for correct hydrating without Suspense flashing. For the
-   * initial render, it returns true and nothing else.
-   */
   if (wasSSR) {
-    /**
-     * On the server, the loadQuery is a no-op. On the client, it preloads the
-     * query and updates its subscription, which invokes a second render phase.
-     */
     if (!options?.promise) evolu.loadQuery(query);
   } else {
     use(options?.promise || evolu.loadQuery(query));

diff --git a/packages/evolu-common-react/src/useWasSSR.ts b/packages/evolu-common-react/src/useWasSSR.ts
@@ -6,8 +6,8 @@ const emptySubscribe = () => () => {};
  * "Unlike the typeof window hack, this ensures that the server and hydration
  * sees the same thing."
  *
+ * The magic ingredient is useRef; check Sebastian's tweet.
  * https://twitter.com/sebmarkbage/status/1763640725088923668
- * https://tkdodo.eu/blog/avoiding-hydration-mismatches-with-use-sync-external-store
  */
 export const useWasSSR = (): boolean => {
   const ref = useRef(false);