feat(solid-query): Add reconcile option

[ardeora]

This pull request proposes a new feature for solid-query that allows for more precise updates to query data. The new reconcile option enables updates to be made between state updates, while the structuralSharing option is removed since it doesn't work well with solid-js' data diffing patterns.

Visualisation

Before

Consider this following example that fetches data for a users list with createQuery.

interface User {
  id: number
  name: string
  last_online: string
}

const usersList = createQuery(() => ({
  queryKey: ['users_list'],
  queryFn: async () => {
    const users = await fetch(`${API_URL}/users`).then(res => res.json()) 
    return users as User[]
  },
}))

return (
  <div>
    <button onClick={usersList.refetch}>Refetch</button>
    <For each={usersList.data}>
      {user => (
        <div>
          <div>{user.name}</div>
          <div>{user.last_online}</div>
        </div>
      )}
    </For>
  </div>
)

Currently, every time a user clicks the Refetch button, the queryFn is re-run, and a new array reference of the updated users list is returned. As a result, new DOM nodes are created every time the query data updates, which can quickly become expensive.

With the proposed feature, whenever the query data updates, the previous data will be transformed into the shape of the new data while preserving referential equality of the data array between updates. This will allow for fine-grained updates to the already created DOM nodes.

After

interface User {
  id: number
  name: string
  last_online: string
}

const usersList = createQuery(() => ({
  queryKey: ['users_list'],
  queryFn: async () => {
    const users = await fetch(`${API_URL}/users`).then(res => res.json()) 
    return users as User[]
  },
  reconcile: 'id', // Not needed since reconcile defaults to `id`
}))

return (
  <div>
    <button onClick={usersList.refetch}>Refetch</button>
    <For each={usersList.data}>
      {user => (
        <div>
          <div>{user.name}</div>
          <div>{user.last_online}</div>
        </div>
      )}
    </For>
  </div>
)

The diagram illustrates how the reconcile option can enable fine-grained updates. Whenever the queryFn is re-run, the id reconcile key can help solid-query identify which objects in the array have been updated, allowing for precise updates to those objects while preserving their referential equality.

This feature can be compared to the key prop used in React, which allows for efficient updates of lists by identifying unique keys for each element. The reconcile option in solid-query works similarly but operates at a more granular level, allowing for precise updates to individual elements within an array.

Overall, this feature can significantly improve the efficiency of applications and reduce the cost of updates by enabling precise and efficient updates to query data.

API reference

The reconcile option in solid-query can be used in multiple ways.

Option 1: reconcile key

interface Fruit {
  name: string;
  emoji: string;
}

const fruits = createQuery(() => ({
  queryKey: ['fruits'],
  queryFn: async () => {
    const fruitsResponse = await fetch(`${API_URL}/fruits`).then(res => res.json()) 
    return fruitsResponse as Fruit[]
  },
  reconcile: 'name',
}))

Similar to the example above. The reconcile option can take any string value that will act as a key for the data returned by createQuery. In the example above, the reconcile option is set to name, which means that solid-query will use the name property of each fruit object to reconcile updates to the query data.

Option 2: reconcile function

import { produce } from "solid-js/store";

interface Fruit {
  name: string;
  emoji: string;
}

const fruits = createQuery(() => ({
  queryKey: ['fruits'],
  queryFn: async () => {
    const fruitsResponse = await fetch(`${API_URL}/fruits`).then(res => res.json()) 
    return fruitsResponse as Fruit[]
  },
  reconcile(oldData, newData) {
    if (!oldData) return newData;
    return produce((draft: Fruit[]) => {
      draft.forEach((fruit) => {
        const newFruit = newData.find(f => f.name === fruit.name)
        if (newFruit) {
          fruit.emoji = newFruit.emoji
        }
      })
    })(oldData)
  },
}))

Another way to use the reconcile option in solid-query is by providing a callback function that receives both the previous data and the new data returned by createQuery. This function allows users to provide their own reconciliation logic based on the data being updated.

In the code snippet above, the reconcile function takes two arguments: oldData and newData. If there is no oldData, the function returns the newData as is. If there is oldData, the function uses the produce function from the solid-js/store library to create a mutable copy of the old data. It then iterates over each fruit object in the old data, checks if there is a matching fruit object in the new data based on the name property, and updates the emoji property of the old object if a match is found.

Option 3: disable reconcile logic

interface Fruit {
  name: string;
  emoji: string;
}

const fruits = createQuery(() => ({
  queryKey: ['fruits'],
  queryFn: async () => {
    const fruitsResponse = await fetch(`${API_URL}/fruits`).then(res => res.json()) 
    return fruitsResponse as Fruit[]
  },
  reconcile: false,
}))

If users don't want to perform fine-grained updates to the data, they can disable the reconcile option by setting it to false. This will bypass any reconciliation logic and perform immutable updates between query updates.

I believe this change makes solid-query even more powerful and intuitive by allowing users to optimize the performance of their applications while providing a smooth user experience.

As always, we encourage everyone to test out this new feature and provide feedback and concerns in the comments. Thank you for your contributions!

[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)			Apr 20, 2023 9:11pm

[nx-cloud]

☁️ Nx Cloud Report

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

📂 See all runs for this branch

---

✅ Successfully ran 4 targets

• nx run-many --target=test:build --projects=root
• nx affected --target=test:lib --parallel=5 --base=0b0b7062db1f25b459c154e05406362192e71172
• nx affected --target=test:types --parallel=5 --base=0b0b7062db1f25b459c154e05406362192e71172
• nx affected --target=test:eslint --parallel=5 --base=0b0b7062db1f25b459c154e05406362192e71172

---

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 43001f5:

Sandbox	Source
@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

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and project coverage change: -5.34 ⚠️

Comparison is base (75a2b4d) 90.07% compared to head (43001f5) 84.74%.

📣 This organization is not using Codecov’s GitHub App Integration. We recommend you install it so Codecov can continue to function properly for your repositories. Learn more

Additional details and impacted files

@@            Coverage Diff             @@
##            alpha    #5287      +/-   ##
==========================================
- Coverage   90.07%   84.74%   -5.34%     
==========================================
  Files          75       11      -64     
  Lines        2681      177    -2504     
  Branches      742       32     -710     
==========================================
- Hits         2415      150    -2265     
+ Misses        234       21     -213     
+ Partials       32        6      -26     

Impacted Files	Coverage Δ
packages/solid-query/src/QueryClientProvider.tsx	100.00% <ø> (ø)
packages/solid-query/src/createInfiniteQuery.ts	100.00% <ø> (ø)
packages/solid-query/src/createMutation.ts	100.00% <ø> (ø)
packages/solid-query/src/createQueries.ts	100.00% <ø> (ø)
packages/solid-query/src/createQuery.ts	100.00% <ø> (ø)
packages/solid-query/src/useIsFetching.ts	100.00% <ø> (ø)
packages/solid-query/src/useIsMutating.ts	100.00% <ø> (ø)
packages/solid-query/src/QueryClient.ts	100.00% <100.00%> (ø)
packages/solid-query/src/createBaseQuery.ts	69.31% <100.00%> (+3.49%)	⬆️

... and 65 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[ardeora]

Here is an example of it in action! https://stackblitz.com/github/ardeora/solid-query-reconcile?file=src%2FApp.tsx