11 replies

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)

TTC

Theo's Typesafe Cult•2y ago•

11 replies

Bartholomeas

Refetching/revalidating server query with TRPC

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>
  );
};

Refetching/revalidating server query with TRPC

Similar Threads

Refetching/revalidating server query with TRPC

Similar Threads

Similar Threads

Similar Threads