T
tRPC

How to modify existing cache data?

How to modify existing cache data?

Tthe_riz
View on Discord
6/14/2023
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)

Looking for more? Join the community!

T
tRPC

How to modify existing cache data?

Join Server
Recommended Posts
When using createServerSideHelpers can the context be typed as GetServerSidePropsContext?I assume the reason we should recreate the context when using createServerSideHelpers is because theQuery data is undefined for a bit and is then populated. How to use with React State?I have an asychronous submit function that's called upon a button press. It refetches the query witshould we use tRPC for handling form submittion or not?Hey everyone, I've started using tRPC for my API endpoints and my project is based in Svelte/SvelteKWhat's the benefit of using the context instead of a direct import for the database connection?I've wondered why I should use the tRPC context instead of just importing my database singleton from