Liltripple_reid
Liltripple_reid3mo ago

trpc optimistic updates causing data flicker

I'm trying to add optimistic updates to a calendar component but when the mutate function is called there's a flicker in the existing events
3 Replies
Liltripple_reid
Liltripple_reid3mo ago
const utils = api.useUtils();
const { data: events } = api.entries.getByMonth.useQuery(
{ workspaceId, monthDate: format(month, "yyyy/MM") },
{
initialData,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
);

const { mutate } = api.entries.update.useMutation({
onMutate: async (input) => {
await utils.entries.getByMonth.cancel();
const prev = utils.entries.getByMonth.getData({ workspaceId, monthDate });

if (!prev || !auth) return;

const updatedEvent = {
...prev.find((e) => e.id === input.id)!,
...input,
temp: true,
};

utils.entries.getByMonth.setData({ workspaceId, monthDate }, (prevState) => {
if (!prevState) return [];

return [...prevState.filter((e) => e.id !== updatedEvent.id), updatedEvent];
});

return () => utils.entries.getByMonth.setData({ workspaceId, monthDate }, prev);
},
onSettled: () => {
return utils.entries.getByMonth.invalidate({
workspaceId,
monthDate,
});
},
onError: (error, _variables, rollback) => {
toast.error("Something happened, please try again!", {
description: error.message,
});

if (rollback) {
rollback();
}
},
});
const utils = api.useUtils();
const { data: events } = api.entries.getByMonth.useQuery(
{ workspaceId, monthDate: format(month, "yyyy/MM") },
{
initialData,
refetchOnWindowFocus: false,
refetchOnReconnect: false,
},
);

const { mutate } = api.entries.update.useMutation({
onMutate: async (input) => {
await utils.entries.getByMonth.cancel();
const prev = utils.entries.getByMonth.getData({ workspaceId, monthDate });

if (!prev || !auth) return;

const updatedEvent = {
...prev.find((e) => e.id === input.id)!,
...input,
temp: true,
};

utils.entries.getByMonth.setData({ workspaceId, monthDate }, (prevState) => {
if (!prevState) return [];

return [...prevState.filter((e) => e.id !== updatedEvent.id), updatedEvent];
});

return () => utils.entries.getByMonth.setData({ workspaceId, monthDate }, prev);
},
onSettled: () => {
return utils.entries.getByMonth.invalidate({
workspaceId,
monthDate,
});
},
onError: (error, _variables, rollback) => {
toast.error("Something happened, please try again!", {
description: error.message,
});

if (rollback) {
rollback();
}
},
});
this is the part that's controlling the optimistic update
Liltripple_reid
Liltripple_reid3mo ago
this is the flicker I'm referring to when updating an entry
More Posts
> Error: Invariant: headers() expects to have requestAsyncStorage, none availableHi, I use trpc v1045.1 in next 14.1 app router. I call it server side and have the following. ```js How do I exclude properties while returning data?I basically need to create a dto's that would exclude properties like access keys etc. while returniDoes anyone have an example of subscriptions implemented in CloudFlare Workers?I'm trying to use subscriptions via WebSocket in CloudFlare Workers, but it's been a real pain so faTRPCClientError: Unable to transform response from serverI am currently encountering this error occasionally in my apps. I am using a Monorepo, which includeUnexpected tokenWorks fine locally, doesn't work when deployed to AWS via sst.dev. Was working last night. RedeployeContext is not being passed correctlyI will include my setup at the end. My problem is that I am using nextauth with database sessions anHow to get the Request Body data of QStashHello everyone. I'm currently working on a client project that involves using trpc with Next.js. We'Preventing uncaught error propagation from server to clientHello guys, is there any way to create default error handler? I want to avoid leaking internal inforThrowing something other than `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`I'm trying to do custom error handling but whatever I throw just ends up being `Unexpected token '<'Create client that is used in every request, without re-creating clientHi all, Consider the following ``` export const createContextInner = async ({ req, res, }: {