teo.villanueva•2y ago

Trpc refetches all of the queries when i run a mutation

Im running node 16.15.0 with Pnpm When i run a mutation for some reason all of the queries get refetched. Im using the app dir and rehydrating the client but I think it has nothing to do with the issue

8 Replies

teo.villanuevaOP•2y ago

Can some one help me please

Lu•2y ago

Should show us some code, where the mutation is being ran, what part of the app the mutation is being ran at, is it invalidating anything? etc.

teo.villanuevaOP•2y ago

export function useUpdateShopForm(_args?: UseUpdateShopFormArgs) {
  const { shop } = useShop();
  const updateShopMutation = api.shop.update.useMutation({});

  const updateShopForm = useZodForm(UpdateShopSchema, {
    defaultValues: {
      name: shop.name,
      description: shop.description,
      deliveryMethods: shop.deliveryMethods,
      paymentMethods: shop.paymentMethods,
    },
  });

  const onSubmit = useCallback(
    async (input: UpdateShopSchema) => {
      if (
        Object.values(input.deliveryMethods).every(
          (value) => value === false
        ) ||
        Object.values(input.paymentMethods).every((value) => value === false)
      ) {
        toast.error('At least one value must be checked.');
        return;
      }

      const updatedShop = await updateShopMutation.mutateAsync({
        shopSlug: shop.slug,
        ...input,
      });

      updateShopForm.reset({
        name: updatedShop.name,
        description: updatedShop.description,
        deliveryMethods: updatedShop.deliveryMethods,
        paymentMethods: updatedShop.paymentMethods,
      });
    },
    [updateShopMutation, shop, updateShopForm]
  );

  return {
    updateShopMutation,
    updateShopForm,
    loading: updateShopMutation.isLoading,
    handleSubmit: updateShopForm.handleSubmit(onSubmit),
  };
}

export function useUpdateShopForm(_args?: UseUpdateShopFormArgs) {
  const { shop } = useShop();
  const updateShopMutation = api.shop.update.useMutation({});

  const updateShopForm = useZodForm(UpdateShopSchema, {
    defaultValues: {
      name: shop.name,
      description: shop.description,
      deliveryMethods: shop.deliveryMethods,
      paymentMethods: shop.paymentMethods,
    },
  });

  const onSubmit = useCallback(
    async (input: UpdateShopSchema) => {
      if (
        Object.values(input.deliveryMethods).every(
          (value) => value === false
        ) ||
        Object.values(input.paymentMethods).every((value) => value === false)
      ) {
        toast.error('At least one value must be checked.');
        return;
      }

      const updatedShop = await updateShopMutation.mutateAsync({
        shopSlug: shop.slug,
        ...input,
      });

      updateShopForm.reset({
        name: updatedShop.name,
        description: updatedShop.description,
        deliveryMethods: updatedShop.deliveryMethods,
        paymentMethods: updatedShop.paymentMethods,
      });
    },
    [updateShopMutation, shop, updateShopForm]
  );

  return {
    updateShopMutation,
    updateShopForm,
    loading: updateShopMutation.isLoading,
    handleSubmit: updateShopForm.handleSubmit(onSubmit),
  };
}

This gets called when the form is submitted

teo.villanuevaOP•2y ago

teo.villanuevaOP•2y ago

This is how my react-query devtools look before running the mutation

Nick•2y ago

This smells of react having to remount everything, or the page being inadvertently reloaded Hard to really say from a distance though

teo.villanuevaOP•2y ago

Im using the app dir with react server components This is my products page

import { AddProductButton } from '@/components/add-product-button';
import { AdminPageHeader } from '@/components/admin-page-header';
import { ProductsTable } from '@/components/products-table';
import { HydrateClient } from '@/lib/trpc/client/hydrate-client';
import { rsc } from '@/shared/server-rsc/trpc';

export const metadata = {
  title: 'Products',
};

export default async function AdminShopProductsPage({
  params,
}: {
  params: { shopSlug: string };
}) {
  await rsc.product.all.fetch({ shopSlug: params.shopSlug });

  const dehydratedState = await rsc.dehydrate();

  return (
    <HydrateClient state={dehydratedState}>
      <AdminPageHeader heading="Products" headingRight={<AddProductButton />} />
      <ProductsTable />
    </HydrateClient>
  );
}

import { AddProductButton } from '@/components/add-product-button';
import { AdminPageHeader } from '@/components/admin-page-header';
import { ProductsTable } from '@/components/products-table';
import { HydrateClient } from '@/lib/trpc/client/hydrate-client';
import { rsc } from '@/shared/server-rsc/trpc';

export const metadata = {
  title: 'Products',
};

export default async function AdminShopProductsPage({
  params,
}: {
  params: { shopSlug: string };
}) {
  await rsc.product.all.fetch({ shopSlug: params.shopSlug });

  const dehydratedState = await rsc.dehydrate();

  return (
    <HydrateClient state={dehydratedState}>
      <AdminPageHeader heading="Products" headingRight={<AddProductButton />} />
      <ProductsTable />
    </HydrateClient>
  );
}

just checked with the component profiler and it doesnt look like it is remounting If you want I can give you access to the codebase I also have this deployed to vercel also, im not performing any manual invalidation

Nick•2y ago

App Dir and RSC for us is still an experimental thing for us so YMMV If you can reproduce any specific issues then opening a issue would be welcome