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
T
teo.villanueva338d ago
Can some one help me please
B
b338d 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.
T
teo.villanueva337d 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
T
teo.villanueva337d ago
T
teo.villanueva337d ago
This is how my react-query devtools look before running the mutation
N
Nick335d ago
This smells of react having to remount everything, or the page being inadvertently reloaded Hard to really say from a distance though
T
teo.villanueva333d 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
N
Nick333d 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
More Posts
tRPC Client on NodeJS server keeps complaining that no fetcher has been configuredHey, I want to create a tRPC setup where I have one server (works fine) and then a client which is cBest Practice to Fetch a Query OnDemandWhat's the best practice to fetch a query on demand? I don't have the context for the query's inputOutput Response ShapeI'm wondering, is the output response shape locked in, or can we modify it in any way? For example: Need help```js import {initTRPC} from '@trpc/server'; import * as trpcNext from '@trpc/server/adapters/next';useQuery hook modify data on fetch.Hello is it possible to modify the data that is fetched with useQuery hook in tRPC basically im storAccepting a DecoratedProcedure with inputs and outputs that extend some given typesIs there any way to accept a DecoratedProcedure that extends { mutate: Resolver<TProcedure> } where useEffect and useMutation error about conditional rendering of hooksI am using t3 stack with tRPC, and I am trying to mark all emails as seen when the page loads by usiGuide to create an adapterIs there a guide on the docs that explains the basics to create an adapter?Does tRPC websocket client supports wss protocol?After changing the websocket client url from ws to wss, it fails to connect. Tested out the connectiGet the type of context after middlewareHow can I get the type of the context of `adminProcedure` from `export const adminProcedure = public[How To] Properly use trpc UseQuery based on currently selected itemI have a component with a video element and a flatlist. I want to utilize a trpc query to get the viData from useQuery is inferred as data: {} | undefinedMy server query returns data from database via ElectroDB. TypeScript can statically infer all properCannot access 't' before initializationHi, I'm migrating my app to a mono repo but I just can't get past this error for some reason `CannottRPC Middleware consuming memory limit on VercelHi all, I'm running into a weird error where my tRPC middleware to enforce that a user is authed, isUsing react-query parameters in tRPC for useQueryHello, the useQuery from react-query can take parameters such cacheTime, staleTime, refetchOnWindowFtRPC type error on turborepo```Types of property 'query' are incompatible. Type 'inferHandlerFn<{}>' is not assignable to tyStack for expo?Can someone recommend a stack for an expo project? I'm considering trpc + fastify + fly.io, but havImplementing a "Prisma model converter middleware"Bit of a fancy name, but if you've ever worked with Symfonys param converters (especially the DoctriSenior Full Stack Developer is Ready.✍️ Skill Set HTML/CSS/JS, TS React/Next.js, Angular/RxJs, Tailwind CSS WoSuggested way to invalidate queries on a component that is used on multiple pages.Please suggest me a way I can handle the following situation in the best possinle manner. Coinsider