fix: preserve query parameters in test server responses

Found this issue whilst looking at the other recent deferred props
issue, this one is nice and small though!

The test server was using req.path instead of req.originalUrl, which
stripped query parameters from the URL in Inertia responses.

Just a test server issue in this case

Author: alexspeller

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

@@ -0,0 +1,21 @@
+import { Deferred, usePage } from '@inertiajs/react'
+
+const Users = () => {
+  const { users } = usePage<{ users?: { text: string } }>().props
+
+  return <div>{users?.text}</div>
+}
+
+export default () => {
+  const { filter } = usePage<{ filter: string }>().props
+
+  return (
+    <>
+      <div>Filter: {filter}</div>
+
+      <Deferred data="users" fallback={<div>Loading users...</div>}>
+        <Users />
+      </Deferred>
+    </>
+  )
+}

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Deferred } from '@inertiajs/svelte'
+
+  export let filter: string
+  export let users: { text: string } | undefined
+</script>
+
+<div>Filter: {filter}</div>
+
+<Deferred data="users">
+  <svelte:fragment slot="fallback">
+    <div>Loading users...</div>
+  </svelte:fragment>
+  <div>{users?.text}</div>
+</Deferred>

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

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { Deferred } from '@inertiajs/vue3'
+
+defineProps<{
+  filter: string
+  users?: { text: string }
+}>()
+</script>
+
+<template>
+  <div>Filter: {{ filter }}</div>
+
+  <Deferred data="users">
+    <template #fallback>
+      <div>Loading users...</div>
+    </template>
+    <div>{{ users?.text }}</div>
+  </Deferred>
+</template>

tests/app/helpers.js

@@ -16,21 +16,16 @@ module.exports = {
         .map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
         .join(''),
       props: {},
-      // TODO: url should be req.originalUrl as that includes the query string
-      url: req.path,
+      url: req.originalUrl,
       version: null,
       ...data,
     }
 
-    if (data.component.startsWith('InfiniteScroll')) {
+    if (data.component.startsWith('InfiniteScroll') && req.query.absolutePageUrl) {
       // Support absolute URL format for testing URL preservation
-      if (req.query.absolutePageUrl) {
-        const protocol = req.protocol
-        const host = req.get('host')
-        data.url = `${protocol}://${host}${req.originalUrl}`
-      } else {
-        data.url = req.originalUrl
-      }
+      const protocol = req.protocol
+      const host = req.get('host')
+      data.url = `${protocol}://${host}${req.originalUrl}`
     }
 
     const partialDataHeader = req.headers['x-inertia-partial-data'] || ''

tests/app/server.js

@@ -758,6 +758,34 @@ app.get('/deferred-props/instant-reload', (req, res) => {
   )
 })
 
+app.get('/deferred-props/with-query-params', (req, res) => {
+  const filter = req.query.filter || 'none'
+  const requestedProps = req.headers['x-inertia-partial-data']
+
+  if (!requestedProps) {
+    return inertia.render(req, res, {
+      component: 'DeferredProps/WithQueryParams',
+      deferredProps: {
+        default: ['users'],
+      },
+      props: {
+        filter,
+      },
+    })
+  }
+
+  setTimeout(
+    () =>
+      inertia.render(req, res, {
+        component: 'DeferredProps/WithQueryParams',
+        props: {
+          users: requestedProps.includes('users') ? { text: `users data for ${filter}` } : undefined,
+        },
+      }),
+    500,
+  )
+})
+
 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

@@ -197,3 +197,26 @@ test('load deferred props with partial reload on mount', async ({ page }) => {
   await expect(page.getByText('foo value')).toBeVisible()
   await expect(page.getByText('bar value')).toBeVisible()
 })
+
+test('deferred props preserve query parameters from original URL', async ({ page }) => {
+  await page.goto('/deferred-props/with-query-params?filter=a')
+
+  // Verify the initial page load has the correct filter
+  await expect(page.getByText('Filter: a')).toBeVisible()
+  await expect(page.getByText('Loading users...')).toBeVisible()
+
+  // Wait for and capture the deferred props request
+  const deferredRequest = await page.waitForResponse((response) => {
+    const url = response.url()
+    const headers = response.request().headers()
+    return headers['x-inertia-partial-data'] === 'users' && url.includes('/deferred-props/with-query-params')
+  })
+
+  // Assert that the deferred props request includes the query parameter
+  const requestUrl = deferredRequest.url()
+  expect(requestUrl).toContain('filter=a')
+
+  // Verify the deferred data uses the correct filter
+  await expect(page.getByText('Loading users...')).not.toBeVisible()
+  await expect(page.getByText('users data for a')).toBeVisible()
+})