Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Possible Bug with createSWRInfiniteProxy #58

Open
Roberto4091 opened this issue Jan 3, 2024 · 4 comments
Open

Possible Bug with createSWRInfiniteProxy #58

Roberto4091 opened this issue Jan 3, 2024 · 4 comments
Assignees

Comments

@Roberto4091
Copy link

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
Copy link

+1

@sannajammeh sannajammeh self-assigned this Jan 17, 2024
@sannajammeh
Copy link
Owner

Looking into this now

@Roberto4091
Copy link
Author

@sannajammeh Do you have any updates on this?

@javialon26
Copy link

@sannajammeh any news on this? thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants