[V2] Improve WhenVisible component to merge data and params props for a more flexible API

[PedroAugustoRamalhoDuarte]

Versions:

• @inertiajs/react version: v2-beta

Describe the problem:

In the current implementation of the WhenVisible component, it is not possible to use both data and params props simultaneously. The issue lies in the getReloadParams function, which either returns data or params but not both. To provide a more flexible and user-friendly API, it would be ideal to merge the data prop into params when both are provided.

Steps to reproduce:

1. Use the WhenVisible component with both data and params props.
2. The getReloadParams function will only consider data and ignore params.

<WhenVisible fallback={"Loading..."} data={["todos", "pagy"]} params={{
  data: {
    teste: true,
    page: pagy.page + 1,
  },
  preserveUrl: true,
}} />

Actual code

inertia/packages/react/src/WhenVisible.ts

Line 24 in 88a765b

const getReloadParams = (): Partial<ReloadOptions> => {

Expected behavior:

When both data and params are provided, the function should merge them into a single object, allowing both to work together.

A initial implementation for React can be something like:

const getReloadParams = (): Partial<ReloadOptions> => {
  const reloadParams: Partial<ReloadOptions> = { ...params }

  if (data) {
    reloadParams.only = (Array.isArray(data) ? data : [data]) as string[]
  }

  return reloadParams
}

[shankiflang]

Hi!
I have the problem too!
I want to set data to my feed and use params to manage the currentPage number update but it doesn't work.

[irsyadadl]

When using params, the data actually should be optional. Right now it doesn't.

[devswert]

As a temporal fix, you can set the data prop as an empty string and Inertia will use the params prop

<WhenVisible fallback={"Loading..."} data={''} params={{
  data: {
    teste: true,
    page: pagy.page + 1,
  },
  preserveUrl: true,
  only: ["todos", "pagy"]
}} />