Use onMount to ensure category lists are only fetched from the client.

This is not ideal, since it prevents no-JS clients from filtering by
category, but it fixes the dev server for now.

Author: jyasskin

webserver/src/components/CategoryList.tsx

@@ -1,6 +1,17 @@
 import { escapeRegExp, filterListWithInitialMatchesFirst } from '@lib/util';
 import type { Category } from '@prisma/client';
-import { type Accessor, type Component, createMemo, createResource, createSignal, For, type Resource, type Setter, Suspense } from 'solid-js';
+import {
+  type Accessor,
+  type Component,
+  createMemo,
+  createResource,
+  createSignal,
+  For,
+  onMount,
+  type Resource,
+  type Setter,
+  Suspense,
+} from "solid-js";
 import { OneRecipe, type RecipeTitleWithLinkFields } from './OneRecipe';
 import { QueryDrivenTextField } from './QueryDrivenTextField';
 
@@ -57,10 +68,12 @@ export const CategoryList: Component<{
   }
 
   // Ensure default-open categories load their recipes.
-  const initialCategories = filteredCategories();
-  if (initialCategories.length === 1) {
-    recipesByCategory().get(initialCategories[0]!.id)?.setNeedRecipes(true);
-  }
+  onMount(() => {
+    const initialCategories = filteredCategories();
+    if (initialCategories.length === 1) {
+      recipesByCategory().get(initialCategories[0]!.id)?.setNeedRecipes(true);
+    }
+  });
 
   return <>
     <QueryDrivenTextField queryParam='filter' value={filter()} onInput={setFilter}>Filter</QueryDrivenTextField>

webserver/src/components/IngredientList.tsx

@@ -1,5 +1,16 @@
 import { escapeRegExp, filterListWithInitialMatchesFirst } from '@lib/util';
-import { type Accessor, type Component, createMemo, createResource, createSignal, For, type Resource, type Setter, Suspense } from 'solid-js';
+import {
+  type Accessor,
+  type Component,
+  createMemo,
+  createResource,
+  createSignal,
+  For,
+  onMount,
+  type Resource,
+  type Setter,
+  Suspense,
+} from "solid-js";
 import { OneRecipe, type RecipeTitleWithLinkFields } from './OneRecipe';
 import { QueryDrivenTextField } from './QueryDrivenTextField';
 
@@ -53,10 +64,14 @@ export const IngredientList: Component<{
   function onToggleIngredient(ingredient: string) {
     recipesByIngredient().get(ingredient)?.setNeedRecipes(true);
   }
-  const initialIngredients = filteredIngredients();
-  if (initialIngredients.length === 1) {
-    recipesByIngredient().get(initialIngredients[0]!.name)?.setNeedRecipes(true);
-  }
+  onMount(() => {
+    const initialIngredients = filteredIngredients();
+    if (initialIngredients.length === 1) {
+      recipesByIngredient()
+        .get(initialIngredients[0]!.name)
+        ?.setNeedRecipes(true);
+    }
+  });
 
   return <>
     <section id="ingredients">