sannajammeh / trpc-swr

tRPC-ified SWR hooks
https://trpc-swr.vercel.app
MIT License
209 stars 5 forks source link

Possible Bug with createSWRInfiniteProxy #58

Open Roberto4091 opened 7 months ago

Roberto4091 commented 7 months ago

When using two separate instances of createSWRInfiniteProxy in a single view without specifying a custom key in the request configuration, there seems to be an issue with key assignment. Both instances appear to share the same key internally, leading to cache-related problems.

E.g:

const { data: medicationsData, size: medicationsSize, isLoading: isLoadingMedications, setSize: setMedicationsSize } = infinite.medications.find.use(
  (index) => ({ page: index }),
  { revalidateOnFocus: false },
);

const { data: usersData, size: usersSize, isLoading: isLoadingUsers, setSize: setUsersSize } = infinite.users.find.use(
  (index) => ({ page: index }),
  { revalidateOnFocus: false },
);

The userData is the same as medicationsData

Client

import { httpBatchLink } from '@trpc/client';
import { createSWRProxyHooks } from '@trpc-swr/client';
import { createSWRInfiniteProxy } from '@trpc-swr/infinite';
import type { AppRouter } from '.........';

import { client } from '@utils/auth';

// Initialize TRPC client
export const trpc = createSWRProxyHooks<AppRouter>({
  links: [
    httpBatchLink({
      url:
        import.meta.env.VITE_GATEWAY_BASE_URL || 'http://localhost:8001/trpc',
      maxURLLength: 500,
    }),
  ],
});

// Initialize SWR infinite
export const infinite = createSWRInfiniteProxy(trpc);

When print swr cache the result is:

{key: undefined}

Code to print:

<button
          onClick={() => {
            void mutate(
              (key) => {
                console.log({ key });
                return Array.isArray(key) && key[0].startsWith('medications.');
              },
              undefined,
              { revalidate: true },
            );
          }}
        >
          toggle
        </button>

another print where the cache is saved well but without using inifinite

{key: ["medications.doses.dates"]}
{key: ["events.dates"]}
{key: ["physicians.filters"]}
{key: ["topics.find"]}
{key: ["learn.find", {page: 0}]}

Packages versions

 "@trpc-swr/client": "^2.0.1",
    "@trpc-swr/infinite": "^2.0.1",
    "@trpc/client": "^10.44.1",
    "@trpc/server": "^10.44.1",

Thank you very much for your help

javialon26 commented 7 months ago

+1

sannajammeh commented 7 months ago

Looking into this now

Roberto4091 commented 6 months ago

@sannajammeh Do you have any updates on this?

javialon26 commented 4 months ago

@sannajammeh any news on this? thanks