fix(solid-query): Fix reconciliation strategy for createBaseQuery

[ardeora]

Fixes #7173
Fixes #7001

The reconciliation strategy for createQuery and createInfiniteQuery has been updated. Previously, the issue with reconciliation was that to preserve the same data reference across different keys, the initial data within the observer was modified to align with the newly fetched data when the query key changed. As this data is also stored in the query cache, such modifications caused the initial data to remain altered. This issue persists on the createResource primitive itself and it makes sense for it since the previous data from a resource cannot be accessed arbitrarily and it also doesn't cache the data. To address this, we now deeply clone the initial data whenever the query data transitions from 'undefined' to any structured form, such as an object or array, using the structuredClone algorithm. This approach ensures that the data associated with the initial queryKey remains unchanged without any mutations.

In the reconcile function callback, we opt not to clone the initial data, instead passing the cached data directly to allow for greater flexibility. However, to ensure proper reconciliation of data between updates, a similar approach to the one outlined in the example below should be followed:

const query = createQuery(() => ({
  queryKey: ["todos", count()],
  reconcile: (oldData, newData) => {
    let data = newData;
    if (oldData === undefined) {
      // Can provide a custom cloning function here
      // This method makes sure that the initial data on the query cache
      // is not modified on queryKey changes
      data = structuredClone(newData);
    }
    return reconcile(data, { key: "id" })(oldData);
  },
}));

We can provide a utility function that does something similar in the future like keepPreviousData. I will also document this in the docs since I am already working on a rewrite there too

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
query	⬜️ Ignored (Inspect)	Visit Preview		Apr 14, 2024 4:12pm

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d774c71. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 1 target

• nx affected --targets=test:format,test:sherif,test:knip,test:eslint,test:lib,test:types,test:build,build,test:attw --parallel=3

---

Sent with 💌 from NxCloud.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d774c71:

Sandbox	Source
@tanstack/query-example-angular-basic	Configuration
@tanstack/query-example-react-basic-typescript	Configuration
@tanstack/query-example-solid-basic-typescript	Configuration
@tanstack/query-example-svelte-basic	Configuration
@tanstack/query-example-vue-basic	Configuration