Merge pull request #139 from IdoPesok/undefined-data-bug

handle undefined data properly, fixes #138

.changeset/bright-apples-breathe.md

@@ -0,0 +1,5 @@
+---
+"zsa-react": patch
+---
+
+Fix isSuccess with undefined data

.github/workflows/ci.yml

@@ -35,3 +35,6 @@ jobs:
 
       - name: Test
         run: npm run test
+
+      - name: Typecheck
+        run: npm run typecheck

packages/zsa-react/src/index.ts

@@ -142,7 +142,12 @@ export const useServerAction = <
         if (oldResult.status === "filled") {
           setResult(oldResult.result)
         } else {
-          setResult({ error: err, isError: true, data: undefined })
+          setResult({
+            error: err,
+            isError: true,
+            data: undefined,
+            isSuccess: false,
+          })
         }
 
         // clear the old data
@@ -162,6 +167,7 @@ export const useServerAction = <
         isError: false,
         error: undefined,
         data: data ?? undefined,
+        isSuccess: true,
       }
 
       setResult(res)
@@ -234,6 +240,7 @@ export const useServerAction = <
         isError: false,
         error: undefined,
         data: data ?? undefined,
+        isSuccess: true,
       })
     },
     [execute]

packages/zsa-react/src/results.ts

@@ -9,6 +9,7 @@ import {
  */
 export type TInnerResult<TServerAction extends TAnyZodSafeFunctionHandler> = {
   isError: boolean
+  isSuccess: boolean
   error: undefined | inferServerActionError<TServerAction>
   data: undefined | inferServerActionReturnData<TServerAction>
 }
@@ -101,22 +102,22 @@ export const calculateResultFromState = <
       isSuccess: false,
       status: "pending",
     }
-  } else if (isPending && oldResult.status === "filled" && result.data) {
+  } else if (isPending && oldResult.status === "filled" && result.isSuccess) {
     return {
       isPending: true,
       isOptimistic: true,
-      data: result.data,
+      data: result.data as any,
       isError: false,
       error: undefined,
       isSuccess: false,
       status: "pending",
     }
-  } else if (!result.isError && result.data) {
+  } else if (result.isSuccess) {
     // success state
     return {
       isPending: false,
       isOptimistic: false,
-      data: result.data,
+      data: result.data as any,
       isError: false,
       error: undefined,
       isSuccess: true,
@@ -156,12 +157,14 @@ export const getEmptyResult = <
     ? // if there is no initial data
       {
         isError: false,
+        isSuccess: false,
         error: undefined,
         data: undefined,
       }
     : {
         // if there is initial data
         isError: false,
+        isSuccess: true,
         error: undefined,
         data: initialData,
       }

tests/jest/__tests__/client.test.tsx

@@ -7,6 +7,7 @@ import OptimisticUpdatesUI from "app/tests/client/optimistic-updates/page"
 import ResetUI from "app/tests/client/reset/page"
 import RetryStatesUI from "app/tests/client/retry-states/page"
 import StatesUI from "app/tests/client/states/page"
+import UndefinedSuccessActionUI from "app/tests/client/undefined-success-action/page"
 import InfiniteQueryUI from "app/tests/client/use-server-action-infinite-query/page"
 import MutationUI from "app/tests/client/use-server-action-mutation/page"
 import QueryUI from "app/tests/client/use-server-action-query/page"
@@ -46,6 +47,30 @@ describe("client", () => {
     })
   })
 
+  describe.only("undefined success execute", () => {
+    it('basic useServerAction that returns "hello world"', async () => {
+      render(<UndefinedSuccessActionUI />)
+
+      let resultElement = screen.getByRole(CLIENT_TEST_DATA.roles.result)
+
+      expect(resultElement).toHaveTextContent("false")
+
+      // Try using getByText if getByRole is not working
+      const invokeButton = screen.getByRole(CLIENT_TEST_DATA.roles.invoke)
+      fireEvent.click(invokeButton)
+
+      await waitFor(() => {
+        resultElement = screen.getByRole(CLIENT_TEST_DATA.roles.result)
+        expect(resultElement).toHaveTextContent(CLIENT_TEST_DATA.loadingMessage)
+      })
+
+      await waitFor(() => {
+        resultElement = screen.getByRole(CLIENT_TEST_DATA.roles.result)
+        expect(resultElement).toHaveTextContent("true")
+      })
+    })
+  })
+
   describe("useServerAction execute with procedure context", () => {
     it("useServerAction that returns procedure context", async () => {
       ;(cookies as jest.Mock).mockReturnValue({

tests/jest/app/tests/client/undefined-success-action/page.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { undefinedSuccessAction } from "server/actions"
+import { CLIENT_TEST_DATA } from "server/data"
+import { useServerAction } from "zsa-react"
+
+export default function UndefinedSuccessActionUI() {
+  const { isPending, execute, isSuccess } = useServerAction(
+    undefinedSuccessAction
+  )
+
+  return (
+    <div>
+      <button
+        role="invoke"
+        onClick={async () => {
+          await execute({ ms: CLIENT_TEST_DATA.sleep })
+        }}
+      >
+        Invoke action
+      </button>
+      <div role="result">
+        {isPending
+          ? CLIENT_TEST_DATA.loadingMessage
+          : JSON.stringify(isSuccess)}
+      </div>
+    </div>
+  )
+}

tests/jest/server/actions.ts

@@ -124,6 +124,12 @@ export const resetAction = publicAction.handler(async () => {
   return CLIENT_TEST_DATA.resultMessages.resetAction
 })
 
+export const undefinedSuccessAction = publicAction
+  .input(z.object({ ms: z.number() }))
+  .handler(async ({ input: { ms } }) => {
+    await sleep(ms)
+  })
+
 export const loadingHelloWorldAction = publicAction
   .input(z.object({ ms: z.number() }))
   .handler(async ({ input: { ms } }) => {