convex-helpers - npm Package Compare versions

Comparing version 0.1.29-alpha.1 to 0.1.29-alpha.2

dist/react/sessions.d.ts

@@ -29,2 +29,3 @@ /**
 type SessionArgsArray<Fn extends SessionFunction<"mutation" | "action">> = keyof FunctionArgs<Fn> extends "sessionId" ? [args?: EmptyObject] : [args: BetterOmit<FunctionArgs<Fn>, "sessionId">];
+export declare const SSR_DEFAULT: SessionId;
 /**
@@ -45,2 +46,3 @@ * Context for a Convex session, creating a server session and providing the id.
     idGenerator?: () => string;
+    ssrFriendly?: boolean;
     children?: React.ReactNode;
@@ -47,0 +49,0 @@ }>;

dist/react/sessions.js

@@ -19,6 +19,7 @@ "use client";
  */
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useState, } from "react";
 import { useQuery, useMutation, useAction } from "convex/react";
 import { assert } from "../index.js";
 const SessionContext = React.createContext(null);
+export const SSR_DEFAULT = "SSR default session ID";
 /**
@@ -35,9 +36,22 @@ * Context for a Convex session, creating a server session and providing the id.
  */
-export const SessionProvider = ({ useStorage, storageKey, idGenerator, children }) => {
+export const SessionProvider = ({ useStorage, storageKey, idGenerator, ssrFriendly, children }) => {
     const storeKey = storageKey ?? "convex-session-id";
-    const idGen = idGenerator ?? crypto.randomUUID.bind(crypto);
-    const initialId = useMemo(() => idGen(), []);
+    function idGen() {
+        // On the server, crypto may not be defined.
+        return (idGenerator ?? crypto.randomUUID.bind(crypto))();
+    }
     // Get or set the ID from our desired storage location.
     const useStorageOrDefault = useStorage ?? useSessionStorage;
-    const [sessionId, setSessionId] = useStorageOrDefault(storeKey, initialId);
+    const [sessionId, setSessionId] = useStorageOrDefault(storeKey, ssrFriendly ? SSR_DEFAULT : idGen());
+    const [initial, setInitial] = useState(true);
+    if (ssrFriendly) {
+        // Generate a new session ID on first load.
+        // This is to get around SSR issues with localStorage.
+        useEffect(() => {
+            if (sessionId === SSR_DEFAULT)
+                setSessionId(idGen());
+            if (initial)
+                setInitial(false);
+        }, [setSessionId, sessionId, setInitial, initial]);
+    }
     const refreshSessionId = useCallback(async (beforeUpdate) => {
@@ -51,8 +65,12 @@ const newSessionId = idGen();
     }, [setSessionId]);
-    return React.createElement(SessionContext.Provider, { value: { sessionId, refreshSessionId } }, children);
+    const value = useMemo(() => ({
+        sessionId: initial && ssrFriendly ? SSR_DEFAULT : sessionId,
+        refreshSessionId,
+    }), [initial, ssrFriendly, sessionId, refreshSessionId]);
+    return React.createElement(SessionContext.Provider, { value }, children);
 };
 // Like useQuery, but for a Query that takes a session ID.
 export function useSessionQuery(query, ...args) {
-    const skip = args[0] === "skip";
     const [sessionId] = useSessionId();
+    const skip = args[0] === "skip" || sessionId === SSR_DEFAULT;
     const originalArgs = args[0] === "skip" ? {} : args[0] ?? {};
@@ -59,0 +77,0 @@ const newArgs = skip ? "skip" : { ...originalArgs, sessionId };

package.json

 {
   "name": "convex-helpers",
-  "version": "0.1.29-alpha.1",
+  "version": "0.1.29-alpha.2",
   "description": "A collection of useful code to complement the official convex package.",
@@ -5,0 +5,0 @@ "type": "module",

react/sessions.ts

@@ -19,3 +19,9 @@ "use client";
  */
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 import type {
@@ -62,2 +68,4 @@ FunctionArgs,
 
+export const SSR_DEFAULT = "SSR default session ID" as SessionId;
+
 /**
@@ -78,14 +86,30 @@ * Context for a Convex session, creating a server session and providing the id.
   idGenerator?: () => string;
+  ssrFriendly?: boolean;
   children?: React.ReactNode;
-}> = ({ useStorage, storageKey, idGenerator, children }) => {
+}> = ({ useStorage, storageKey, idGenerator, ssrFriendly, children }) => {
   const storeKey = storageKey ?? "convex-session-id";
-  const idGen = idGenerator ?? crypto.randomUUID.bind(crypto);
-  const initialId = useMemo(() => idGen() as SessionId, []);
+  function idGen() {
+    // On the server, crypto may not be defined.
+    return (idGenerator ?? crypto.randomUUID.bind(crypto))() as SessionId;
+  }
   // Get or set the ID from our desired storage location.
   const useStorageOrDefault = useStorage ?? useSessionStorage;
-  const [sessionId, setSessionId] = useStorageOrDefault(storeKey, initialId);
+  const [sessionId, setSessionId] = useStorageOrDefault(
+    storeKey,
+    ssrFriendly ? SSR_DEFAULT : idGen()
+  );
 
+  const [initial, setInitial] = useState(true);
+  if (ssrFriendly) {
+    // Generate a new session ID on first load.
+    // This is to get around SSR issues with localStorage.
+    useEffect(() => {
+      if (sessionId === SSR_DEFAULT) setSessionId(idGen());
+      if (initial) setInitial(false);
+    }, [setSessionId, sessionId, setInitial, initial]);
+  }
+
   const refreshSessionId = useCallback<RefreshSessionFn>(
     async (beforeUpdate) => {
-      const newSessionId = idGen() as SessionId;
+      const newSessionId = idGen();
       if (beforeUpdate) {
@@ -99,8 +123,11 @@ await beforeUpdate(newSessionId);
   );
+  const value = useMemo(
+    () => ({
+      sessionId: initial && ssrFriendly ? SSR_DEFAULT : sessionId,
+      refreshSessionId,
+    }),
+    [initial, ssrFriendly, sessionId, refreshSessionId]
+  );
 
-  return React.createElement(
-    SessionContext.Provider,
-    { value: { sessionId, refreshSessionId } },
-    children
-  );
+  return React.createElement(SessionContext.Provider, { value }, children);
 };
@@ -113,4 +140,4 @@
 ): FunctionReturnType<Query> | undefined {
-  const skip = args[0] === "skip";
   const [sessionId] = useSessionId();
+  const skip = args[0] === "skip" || sessionId === SSR_DEFAULT;
   const originalArgs = args[0] === "skip" ? {} : args[0] ?? {};
@@ -117,0 +144,0 @@

No alert changes

Improved metrics

Total package byte prevSize

434197

increased by0.37%

Lines of code

7696

increased by0.59%

No dependency changes