Theo's Typesafe Cult•6mo ago

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•6mo 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•5mo ago

I'm working on this issue as well. @Bartholomeas did you ever find a solution other than router.refresh?

Bartholomeas•5mo ago

Still not :/

Circus•5mo 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•5mo ago

i've had this response from my older question but hmm.. Looks not best idea

Bartholomeas•5mo 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•5mo 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

Gaming

Programming

Refetching/revalidating server query with TRPC