docs: Various updates

reactive · Aug 12, 2024 · f8e4583 · f8e4583
1 parent bf4f57b
commit f8e4583
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 11 deletions.
diff --git a/docs/core/api/AsyncBoundary.md b/docs/core/api/AsyncBoundary.md
@@ -37,7 +37,7 @@ export default function MyPage() {
 }
 
 function SuspendingComponent() {
-  const data = useSuspense(MyEndpoint);
+  const data = useSuspense(getMyThing);
 
   return <div>{data.text}</div>;
 }

diff --git a/docs/core/api/Manager.md b/docs/core/api/Manager.md
@@ -291,6 +291,7 @@ export default class LoggingManager implements Manager {
           console.info(`${action.endpoint.name} ${JSON.stringify(data)}`);
           return;
         }
+      // actions must be explicitly passed to next middleware
       default:
         return next(action);
     }

diff --git a/docs/core/api/useFetch.md b/docs/core/api/useFetch.md
@@ -6,6 +6,7 @@ description: Fetch without the data rendering. Prevent fetch waterfalls by prefe
 
 import GenericsTabs from '@site/src/components/GenericsTabs';
 import ConditionalDependencies from '../shared/\_conditional_dependencies.mdx';
+import StackBlitz from '@site/src/components/StackBlitz';
 
 <head>
   <meta name="docsearch:pagerank" content="10"/>
@@ -80,3 +81,11 @@ function useFetch<
 ```
 
 </GenericsTabs>
+
+## Examples
+
+### NextJS Preload
+
+To prevent fetch waterfalls in NextJS, sometimes you might need to add [preloads](https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#preloading-data) to top level routes.
+
+<StackBlitz repo="coin-app" file="src/app/[id]/page.tsx" initialpath="/BTC" view="editor" height="700" />
diff --git a/docs/core/api/useLoading.md b/docs/core/api/useLoading.md
@@ -10,7 +10,7 @@ import StackBlitz from '@site/src/components/StackBlitz';
 
 # useLoading()
 
-Helps track loading state of imperative async functions.
+Helps track loading and error state of imperative async functions.
 
 :::tip
 
@@ -22,6 +22,9 @@ Helps track loading state of imperative async functions.
 
 <UseLoading />
 
+Like [useCallback](https://react.dev/reference/react/useCallback), takes a dependency list to
+ensure referential consistency of the function.
+
 ## Eslint
 
 :::tip Eslint configuration

diff --git a/docs/core/api/useSubscription.md b/docs/core/api/useSubscription.md
@@ -27,8 +27,8 @@ When using the default [polling subscriptions](./PollingSubscription), frequency
 import { Resource, Entity } from '@data-client/rest';
 
 export class Price extends Entity {
-  readonly symbol: string | undefined = undefined;
-  readonly price: string = '0.0';
+  symbol = '';
+  price = '0.0';
   // ...
 
   pk() {
@@ -97,21 +97,20 @@ import { getPrice } from 'api/Price';
 
 function MasterPrice({ symbol }: { symbol: string }) {
   const price = useSuspense(getPrice, { symbol });
-  const ref = useRef();
-  const onScreen = useOnScreen(ref);
+  const [ref, entry] = useIntersectionObserver();
   // null params means don't subscribe
-  useSubscription(getPrice, onScreen ? null : { symbol });
+  useSubscription(getPrice, entry?.isIntersecting ? null : { symbol });
 
   return (
     <div ref={ref}>{price.value.toLocaleString('en', { currency: 'USD' })}</div>
   );
 }
 ```
 
-Using the last argument `active` we control whether the subscription is active or not
-based on whether the element rendered is [visible on screen](https://usehooks.com/useOnScreen/).
+When `null` is send as the second argument, the subscription is deactivated. Of course,
+if other components are still subscribed the data updates will still be active.
 
-[useOnScreen()](https://usehooks.com/useOnScreen/) uses [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), which is very performant. [useRef](https://react.dev/reference/react/useRef) allows
+[useIntersectionObserver()](https://usehooks.com/useintersectionobserver) uses [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API), which is very performant. [ref](https://react.dev/reference/react/useRef) allows
 us to access the [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model).
 
 ### Crypto prices (websockets)

diff --git a/website/src/components/StackBlitz.tsx b/website/src/components/StackBlitz.tsx
@@ -6,6 +6,7 @@ import { useHasIntersected } from './useHasIntersected';
 
 export default function StackBlitz({
   app,
+  repo = 'data-client',
   width = '100%',
   height = '500',
   hidedevtools = '1',
@@ -28,7 +29,11 @@ export default function StackBlitz({
     ctl,
     initialpath,
   }).toString();
-  const src = `https://stackblitz.com/github/reactive/data-client/tree/master/examples/${app}?${params}`;
+  const src =
+    app ?
+      `https://stackblitz.com/github/reactive/${repo}/tree/master/examples/${app}?${params}`
+    : `https://stackblitz.com/github/reactive/${repo}/tree/master?${params}`;
+
   const [frameRef, hasIntersected] = useHasIntersected<HTMLIFrameElement>();
 
   /* This was causing CORS issues....we probably don't need anymore since we have the