fix: unique but stable fetcher key

sjc5 · Nov 1, 2023 · be3630d · be3630d
1 parent a064c2f
commit be3630d
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "remix-easy-mode",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "author": {
     "name": "Sam Cook",
     "email": "[email protected]",

diff --git a/packages/example/app/routes/_index.tsx b/packages/example/app/routes/_index.tsx
@@ -13,6 +13,8 @@ const Comp = React.forwardRef<
 export default function Index() {
   const { Form, fields, result } = useExampleHook()
 
+  const { Form: Form2, fields: fields2, result: result2 } = useExampleHook()
+
   return (
     <div>
       <MantineProvider>
@@ -79,9 +81,75 @@ export default function Index() {
 
           <button type="submit">Submit</button>
         </Form>
-      </MantineProvider>
 
-      <pre>{JSON.stringify(result, null, 2)}</pre>
+        <pre>{JSON.stringify(result, null, 2)}</pre>
+
+        <Form2
+          csrfToken="5"
+          onSuccess={(successRes) => console.log("form onSuccess", successRes)}
+          style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+        >
+          <label>
+            Any old string (do not type "bad message")
+            <InputHelper
+              {...fields2.anyString.props}
+              defaultValue={"any old string"}
+              component={TextInput}
+              errorProps={{
+                error: fields2.anyString.errors?.[0]?.message,
+              }}
+            />
+          </label>
+
+          <label>
+            Hello world (literal)
+            <InputHelper
+              {...fields2.helloWorld.props}
+              defaultValue={"hello world"}
+            />
+          </label>
+
+          {/* ZOD UNION OF STRING LITERALS */}
+          {fields2.letters.options?.map((option) => {
+            return (
+              <label key={option}>
+                {option}
+                <InputHelper
+                  type="radio"
+                  {...fields2.letters.props}
+                  value={option}
+                  defaultChecked={option === 2}
+                />
+              </label>
+            )
+          })}
+
+          {/* ZOD ENUM */}
+          {fields2.letters2.options?.map((option) => {
+            return (
+              <label key={option}>
+                {option}
+                <InputHelper
+                  type="radio"
+                  {...fields.letters2.props}
+                  value={option}
+                  defaultChecked={option === "1"}
+                />
+              </label>
+            )
+          })}
+
+          <InputHelper
+            type="number"
+            {...fields2.someNumber.props}
+            defaultValue={1}
+          />
+
+          <button type="submit">Submit</button>
+        </Form2>
+
+        <pre>{JSON.stringify(result2, null, 2)}</pre>
+      </MantineProvider>
     </div>
   )
 }
diff --git a/packages/example/package.json b/packages/example/package.json
@@ -9,7 +9,7 @@
     "isbot": "^3.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "remix-easy-mode": "0.2.1"
+    "remix-easy-mode": "0.2.2"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.2.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/hooks/use-action.tsx b/src/hooks/use-action.tsx
@@ -35,7 +35,8 @@ export function useAction<
     FromPromise<Action>["data"]
   >
 >) {
-  const fetcher = useFetcher<Action>({ key: path })
+  const key = useMemo(() => String(Math.random()), [])
+  const fetcher = useFetcher<Action>({ key })
   const fetcherState = getRemFetcherState(fetcher)
 
   type LocalInferred = z.infer<InputSchema>