I have a pretty straightforward setup here. In a server component I have
import { api, HydrateClient } from "~/trpc/server";
export default async function Posts() {
await api.posts.getPosts.prefetch();
return (
<HydrateClient>
<ClientComponent />
</HydrateClient>
);
}
In the client component:
import { api } from "~/trpc/react";
export function ClientComponent() {
const [data] = api.posts.getPosts.useSuspenseQuery();
return ...
}
Now in this client component you can click a button to edit a post, which takes you to a simple edit post page. The hook I use for editing the post looks like this:
export function useEditPost() {
const router = useRouter();
const utils = api.useUtils();
return api.posts.editPost.useMutation({
onMutate: () => {
utils.posts.getPosts.cancel();
},
onSuccess: async () => {
toast.success("Post updated");
router.push("/posts");
},
});
}
No here's where I'm having difficulty. The onSuccess routes the user back to the posts page. The posts page hits the RSC, which correctly gets the freshest data (with the edited posts details), but for a brief moment the ClientComponent still shows the old values.
Simply put, I want values from the RSC to always override any previously cached values.
My workaround for now is to call removeQueries on getPosts, which feels okay since I'm removing the query right before heading to the RSC which will hydrate it, but I'm not sure this is the right pattern - @main snow seems to encourage not using removeQueries. Any ideas on how to move forward here? Am I missing something?