Refetching/revalidating server query with TRPC

[Nextjs 14 app Dir] Hello, i want to revalidate my query after form sumit but for some reason i dont know what am i doing wrong. As im newbie in trpc i want to just revalidate specified request "onSuccess" after mutation but it doesnt work. Thats the code: Here im fetching card of user (with .query),
const WizardPanel = async () => {
const company = await api.user.getUserCompany.query();
const card = await api.card.getBusinessCard.query();

return (
// <CardStylesProvider card={card}>
<CardStylesStoreProvider card={card}>
<div className="flex h-full flex-col">
<div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
<h2 className="text-lg font-semibold">Kreator</h2>
...
const WizardPanel = async () => {
const company = await api.user.getUserCompany.query();
const card = await api.card.getBusinessCard.query();

return (
// <CardStylesProvider card={card}>
<CardStylesStoreProvider card={card}>
<div className="flex h-full flex-col">
<div className="container flex flex-col items-start justify-between space-y-2 py-4 sm:flex-row sm:items-center sm:space-y-0 md:h-16">
<h2 className="text-lg font-semibold">Kreator</h2>
...
then im passing it to CardStylesStoreProvider where im creating zustand store with that:
export const CardStylesStoreProvider = ({ card, children }: CardStylesStoreProviderProps) => {
const storeRef = useRef<StoreApi<CardStylesStore> | null>(null);
if (!storeRef.current) {
storeRef.current = createCardStylesStore(getInitialState(card));
}

return (
<CardStylesStoreContext.Provider value={storeRef.current}>
{children}
</CardStylesStoreContext.Provider>
);
};
export const CardStylesStoreProvider = ({ card, children }: CardStylesStoreProviderProps) => {
const storeRef = useRef<StoreApi<CardStylesStore> | null>(null);
if (!storeRef.current) {
storeRef.current = createCardStylesStore(getInitialState(card));
}

return (
<CardStylesStoreContext.Provider value={storeRef.current}>
{children}
</CardStylesStoreContext.Provider>
);
};
Lastly onsubmit im updating my DB with data and want to revalidate this previous request but for some reason it doesnt work.. When i change route and back im getting old state (it only works on total F5 reload)
7 Replies
Bartholomeas
Bartholomeas7mo ago
export const PersonalizeText = () => {
const methods = useForm<z.infer<typeof TextElementConfigSchema>>({
defaultValues: DefaultTextElement,
resolver: zodResolver(TextElementConfigSchema),
});

const { getChosenElement, getIsDirty, setStateClear, changeTextElement } = useCardStylesStore();

const utils = api.useUtils();

const { mutate, isLoading } = api.card.updateTextElement.useMutation({
onSuccess: async input => {
setStateClear();
// await utils.card.getBusinessCard.invalidate({
// id: input.id,
// });
await utils.card.invalidate(undefined, { refetchType: "all" });
await utils.card.refetch();

console.log("success..", { input });
},
});
export const PersonalizeText = () => {
const methods = useForm<z.infer<typeof TextElementConfigSchema>>({
defaultValues: DefaultTextElement,
resolver: zodResolver(TextElementConfigSchema),
});

const { getChosenElement, getIsDirty, setStateClear, changeTextElement } = useCardStylesStore();

const utils = api.useUtils();

const { mutate, isLoading } = api.card.updateTextElement.useMutation({
onSuccess: async input => {
setStateClear();
// await utils.card.getBusinessCard.invalidate({
// id: input.id,
// });
await utils.card.invalidate(undefined, { refetchType: "all" });
await utils.card.refetch();

console.log("success..", { input });
},
});
Idk where im getting wrong :/ as this satte is kind of dehydrated SSR state so i should be able to refetch that, riht? I can do just "router.refresh()" but its kinda... workaround, not solution
Circus
Circus7mo ago
I'm working on this issue as well. @Bartholomeas did you ever find a solution other than router.refresh?
Bartholomeas
Bartholomeas7mo ago
Still not :/
Circus
Circus7mo ago
I'm sure you've seen revalidatePath, which would be helpful if TRPC ever implemented something like this. https://nextjs.org/docs/app/api-reference/functions/revalidatePath I haven't been able to make it work with TRPC though :/
Bartholomeas
Bartholomeas7mo ago
i've had this response from my older question but hmm.. Looks not best idea
No description
Bartholomeas
Bartholomeas7mo ago
i mean there is no way to revalidate single request? 😐 So one awesome function of nextjs is not handled by trpc? @Matvey Sorry for ping but similar question; maybe you know somethinf more? 😄
Fossil
Fossil7mo ago
Yea shades of the same issue - I have found no documentation online for how to handle trpc endpoint cacheing/revalidation with Next Ap Router https://discord.com/channels/966627436387266600/1212328159991570452/1212328159991570452 & https://discord.com/channels/966627436387266600/1228337408563740803
Want results from more Discord servers?
Add your server