the_riz
the_rizโ€ข12mo 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