Preserve errors when loading deferred props (#2729)

* Preserve errors when loading deferred props

* wip

Author: pascalbaljet

packages/core/src/requestParams.ts

@@ -55,6 +55,10 @@ export class RequestParams {
     return this.params.only.length > 0 || this.params.except.length > 0 || this.params.reset.length > 0
   }
 
+  public isDeferredPropsRequest() {
+    return this.params.deferredProps === true
+  }
+
   public onCancelToken(cb: VoidFunction) {
     this.params.onCancelToken({
       cancel: cb,

packages/core/src/response.ts

@@ -312,6 +312,15 @@ export class Response {
 
     pageResponse.props = { ...currentPage.get().props, ...pageResponse.props }
 
+    if (this.requestParams.isDeferredPropsRequest()) {
+      const currentErrors = currentPage.get().props.errors
+
+      if (currentErrors && Object.keys(currentErrors).length > 0) {
+        // Preserve existing errors during deferred props requests
+        pageResponse.props.errors = currentErrors
+      }
+    }
+
     // Preserve the existing scrollProps
     if (currentPage.get().scrollProps) {
       pageResponse.scrollProps = {

packages/core/src/router.ts

@@ -115,6 +115,14 @@ export class Router {
   }
 
   public reload<T extends RequestPayload = RequestPayload>(options: ReloadOptions<T> = {}): void {
+    return this.doReload(options)
+  }
+
+  protected doReload<T extends RequestPayload = RequestPayload>(
+    options: ReloadOptions<T> & {
+      deferredProps?: boolean
+    } = {},
+  ): void {
     if (typeof window === 'undefined') {
       return
     }
@@ -521,7 +529,7 @@ export class Router {
   protected loadDeferredProps(deferred: Page['deferredProps']): void {
     if (deferred) {
       Object.entries(deferred).forEach(([_, group]) => {
-        this.reload({ only: group })
+        this.doReload({ only: group, deferredProps: true })
       })
     }
   }

packages/core/src/types.ts

@@ -424,6 +424,7 @@ export type ActiveVisit<T extends RequestPayload = RequestPayload> = PendingVisi
 export type InternalActiveVisit = ActiveVisit & {
   onPrefetchResponse?: (response: Response) => void
   onPrefetchError?: (error: Error) => void
+  deferredProps?: boolean
 }
 
 export type VisitId = unknown

packages/react/test-app/Pages/DeferredProps/WithErrors.tsx

@@ -0,0 +1,33 @@
+import { Deferred, useForm, usePage } from '@inertiajs/react'
+
+const Foo = () => {
+  const { foo } = usePage<{ foo?: { text: string } }>().props
+
+  return <div id="foo">{foo?.text}</div>
+}
+
+export default () => {
+  const { errors } = usePage<{ errors: { name?: string } }>().props
+  const form = useForm({
+    name: '',
+  })
+
+  const submit = () => {
+    form.post('/deferred-props/with-errors')
+  }
+
+  return (
+    <>
+      <Deferred data="foo" fallback={<div>Loading foo...</div>}>
+        <Foo />
+      </Deferred>
+
+      {errors?.name && <p id="page-error">{errors.name}</p>}
+      {form.errors.name && <p id="form-error">{form.errors.name}</p>}
+
+      <button type="button" onClick={submit}>
+        Submit
+      </button>
+    </>
+  )
+}

packages/svelte/test-app/Pages/DeferredProps/WithErrors.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { Deferred, page, useForm } from '@inertiajs/svelte'
+
+  export let foo: { text: string } | undefined
+
+  const form = useForm({
+    name: '',
+  })
+
+  const submit = () => {
+    $form.post('/deferred-props/with-errors')
+  }
+</script>
+
+<Deferred data="foo">
+  <svelte:fragment slot="fallback">
+    <div>Loading foo...</div>
+  </svelte:fragment>
+
+  <div id="foo">{foo?.text}</div>
+</Deferred>
+
+{#if $page.props.errors?.name}
+  <p id="page-error">{$page.props.errors.name}</p>
+{/if}
+{#if $form.errors.name}
+  <p id="form-error">{$form.errors.name}</p>
+{/if}
+
+<button type="button" on:click={submit}>Submit</button>

packages/vue3/test-app/Pages/DeferredProps/WithErrors.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { Deferred, useForm } from '@inertiajs/vue3'
+
+defineProps<{
+  foo?: { text: string }
+}>()
+
+const form = useForm({
+  name: '',
+})
+
+const submit = () => {
+  form.post('/deferred-props/with-errors')
+}
+</script>
+
+<template>
+  <Deferred data="foo">
+    <template #fallback>
+      <div>Loading foo...</div>
+    </template>
+
+    <div id="foo">{{ foo?.text }}</div>
+  </Deferred>
+
+  <p v-if="$page.props.errors?.name" id="page-error">{{ $page.props.errors.name }}</p>
+  <p v-if="form.errors.name" id="form-error">{{ form.errors.name }}</p>
+
+  <button type="button" @click="submit">Submit</button>
+</template>

tests/app/server.js

@@ -912,6 +912,44 @@ app.get('/deferred-props/partial-reloads', (req, res) => {
   )
 })
 
+let deferredPropsWithErrorsState = {}
+
+app.get('/deferred-props/with-errors', (req, res) => {
+  const errors = { ...deferredPropsWithErrorsState }
+
+  deferredPropsWithErrorsState = {}
+
+  if (!req.headers['x-inertia-partial-data']) {
+    return inertia.render(req, res, {
+      component: 'DeferredProps/WithErrors',
+      deferredProps: {
+        default: ['foo'],
+      },
+      props: {
+        errors,
+      },
+    })
+  }
+
+  setTimeout(
+    () =>
+      inertia.render(req, res, {
+        component: 'DeferredProps/WithErrors',
+        props: {
+          foo: req.headers['x-inertia-partial-data']?.includes('foo') ? { text: 'foo value' } : undefined,
+          errors: {},
+        },
+      }),
+    250,
+  )
+})
+
+app.post('/deferred-props/with-errors', (req, res) => {
+  deferredPropsWithErrorsState = { name: 'The name field is required.' }
+
+  res.redirect(303, '/deferred-props/with-errors')
+})
+
 app.get('/svelte/props-and-page-store', (req, res) =>
   inertia.render(req, res, { component: 'Svelte/PropsAndPageStore', props: { foo: req.query.foo || 'default' } }),
 )

tests/deferred-props.spec.ts

@@ -272,3 +272,41 @@ test('prefetch works with deferred props without errors', async ({ page }) => {
 
   expect(consoleMessages.errors).toHaveLength(0)
 })
+
+test('deferred props do not clear validation errors', async ({ page }) => {
+  await page.goto('/deferred-props/with-errors')
+
+  await expect(page.locator('#page-error')).not.toBeVisible()
+  await expect(page.locator('#form-error')).not.toBeVisible()
+  await expect(page.getByText('Loading foo...')).toBeVisible()
+
+  await page.waitForResponse(
+    (response) => response.request().headers()['x-inertia-partial-data'] === 'foo' && response.status() === 200,
+  )
+
+  await expect(page.getByText('foo value')).toBeVisible()
+
+  const deferredResponsePromise = page.waitForResponse(
+    (response) => response.request().headers()['x-inertia-partial-data'] === 'foo' && response.status() === 200,
+  )
+  const errorResponsePromise = page.waitForResponse(
+    (response) => !response.request().headers()['x-inertia-partial-data'] && response.status() === 200,
+  )
+
+  await page.getByRole('button', { name: 'Submit' }).click()
+  await errorResponsePromise
+
+  await expect(page.locator('#page-error')).toBeVisible()
+  await expect(page.locator('#page-error')).toHaveText('The name field is required.')
+  await expect(page.locator('#form-error')).toBeVisible()
+  await expect(page.locator('#form-error')).toHaveText('The name field is required.')
+  await expect(page.getByText('Loading foo...')).toBeVisible()
+
+  await deferredResponsePromise
+
+  await expect(page.locator('#page-error')).toBeVisible()
+  await expect(page.locator('#page-error')).toHaveText('The name field is required.')
+  await expect(page.locator('#form-error')).toBeVisible()
+  await expect(page.locator('#form-error')).toHaveText('The name field is required.')
+  await expect(page.getByText('foo value')).toBeVisible()
+})