Kay•8mo ago

Trpc calls being uncessarily made

Hi friends, i am relevatively new to TRPC so this could be somethign super basic. I have a component that is making a bunch of useQuery statements

export default function RegistryItem(props: IRegistryItemProps) {
    const { data: session } = useSession();
    const updateTeamRegistryById = TrpcClient.updateTeamRegistryById.useMutation({
        onSettled: () => {
            teamItems.refetch();
            registryData.refetch();
        },
    });
    console.log("item", props.item, "teamITem", props.teamItem);
    const userId = session?.user?.id;
    const teamId = session?.user.teamId;
    const registryData = TrpcClient.getRegistryById.useQuery({ id: props.item.id });
    const registry = registryData.data;
    const teamItems = TrpcClient.getTeamRegistry.useQuery({ registryId: props.item.id, teamId: teamId as string });
    const teamItem = teamItems.data;
    const count = registry?.team_registry.filter((f) => f.enabled === true)?.length || 0;
...

export default function RegistryItem(props: IRegistryItemProps) {
    const { data: session } = useSession();
    const updateTeamRegistryById = TrpcClient.updateTeamRegistryById.useMutation({
        onSettled: () => {
            teamItems.refetch();
            registryData.refetch();
        },
    });
    console.log("item", props.item, "teamITem", props.teamItem);
    const userId = session?.user?.id;
    const teamId = session?.user.teamId;
    const registryData = TrpcClient.getRegistryById.useQuery({ id: props.item.id });
    const registry = registryData.data;
    const teamItems = TrpcClient.getTeamRegistry.useQuery({ registryId: props.item.id, teamId: teamId as string });
    const teamItem = teamItems.data;
    const count = registry?.team_registry.filter((f) => f.enabled === true)?.length || 0;
...

Everytime i click on an empty space in the window, it refetches, happens also when switching tabs. This is causing a lot of unnecessary request. Why is this occuring?

2 Replies

Kay•8mo ago

So i think this might havebeen because of "refetchOnWindowFocus" i wonde what other quirks like this exists im still experiecin a refetch whenever i swap tabs and tab back in

Nick•8mo ago

React query does a lot of smart fetching like you say, recommend you check their docs The clicking and refetching may be because you’re inadvertently causing some component to remount, but playing with the cache/stale times might alleviate this, you can set them high like 30 seconds