the_riz•2y ago

How to modify existing cache data?

I have a message queue being fetched with InfiniteQuery requests. When adding a new message, I want to prevent client-reload by adding the message to the front of the existing messages array. Is the tool for this setInfiniteData() ? When I return a modified version of the existing cache-data, TS throws errors about the [cachedData] being recursively incorrectly formatted no matter what I do 😠! Q1: This is way outside my league but I noticed this: Is there possibly an error in the [react-query] TS-definition at https://github.com/trpc/trpc/blob/main/packages/react-query/src/shared/proxy/utilsProxy.ts lines 155+156 because they are duplicates. Q2: What am I doing wrong here? Am I just using the wrong tool?

const trpcUtils = api.useContext();
const session = useSession();
const createNewMessage = api.msg.create.useMutation({ // called in a client component w/appropriate data...
  onSuccess: (newMsg) => {
    if (session.status !== "authenticated") return; // clears @TS-error for getting id below 👌🤷  
/*** --- ❓ use `setInfiniteData()?` ❓  --- ***/   
// ❌❌❌ The `cachedData` argument throws crazy recursive TS errors ❌❌❌
     trpcUtils.msgs.infiniteFeed.setInfiniteData( {}, (cachedData) => {  // ❌❌❌
       // nothing in first arg because I only want to change existing data?
       if (!cachedData) { return { pages: [], pageParams: [] }; }

       const newMsgDataForDisplay = {...newMsg, user: {id: session.data.user.id } };
       const pages = cachedData.pages;
       const firstPage = pages[0];
       const laterPages = pages.slice(1);
       const firstPageMessageQueue = firstPage?.messageQueue.slice() ?? [];

       return { 
          ...cachedData,
          pages: [{ ...firstPage
                    messageQueue: [newMsgDataForDisplay, ...firstPageMessageQueue],
                  },
                  ...laterPages ]
        };
      });
    }
  })

const trpcUtils = api.useContext();
const session = useSession();
const createNewMessage = api.msg.create.useMutation({ // called in a client component w/appropriate data...
  onSuccess: (newMsg) => {
    if (session.status !== "authenticated") return; // clears @TS-error for getting id below 👌🤷  
/*** --- ❓ use `setInfiniteData()?` ❓  --- ***/   
// ❌❌❌ The `cachedData` argument throws crazy recursive TS errors ❌❌❌
     trpcUtils.msgs.infiniteFeed.setInfiniteData( {}, (cachedData) => {  // ❌❌❌
       // nothing in first arg because I only want to change existing data?
       if (!cachedData) { return { pages: [], pageParams: [] }; }

       const newMsgDataForDisplay = {...newMsg, user: {id: session.data.user.id } };
       const pages = cachedData.pages;
       const firstPage = pages[0];
       const laterPages = pages.slice(1);
       const firstPageMessageQueue = firstPage?.messageQueue.slice() ?? [];

       return { 
          ...cachedData,
          pages: [{ ...firstPage
                    messageQueue: [newMsgDataForDisplay, ...firstPageMessageQueue],
                  },
                  ...laterPages ]
        };
      });
    }
  })

Any help is greatly appreciated! (env is React/Next13 via T3-Stack)

GitHub

trpc/packages/react-query/src/shared/proxy/utilsProxy.ts at main · ...

🧙‍♀️ Move Fast and Break Nothing. End-to-end typesafe APIs made easy. - trpc/packages/react-query/src/shared/proxy/utilsProxy.ts at main · trpc/trpc

0 Replies

No replies yetBe the first to reply to this messageJoin