Peform Posts

Peform

•Created by Peform on 3/1/2025 in #❓-help

server side prefetch + optional client side refetch

Hello, I'm looking for advice on a pattern for server-side prefetching with optional client-side refreshing in Next.js. Current setup: - Next.js app with tRPC - A getUserGuilds procedure that accepts an optional refetch parameter - When refetch: true, it fetches fresh data from Discord, otherwise uses cached data - Server-side prefetch for initial load, need client sided optional refresh Current solution: I'm using two separate queries: 1. First query with no parameters matches server prefetch for initial load: server prefetch:

  await api.discord.getUserGuilds.prefetch();

  await api.discord.getUserGuilds.prefetch();

   const { data: guilds } = api.discord.getUserGuilds.useQuery(undefined, { enabled: true });

   const { data: guilds } = api.discord.getUserGuilds.useQuery(undefined, { enabled: true });

2. Second query with refetch: true for manual refreshing:

   const { data: refetchedGuilds, refetch } = api.discord.getUserGuilds.useQuery(
     { refetch: true },
     { enabled: false }
   );

   const { data: refetchedGuilds, refetch } = api.discord.getUserGuilds.useQuery(
     { refetch: true },
     { enabled: false }
   );

3. Using separate useEffects to update UI state when either dataset changes

export const ServerList = () => {
    const { data: guilds } = api.discord.getUserGuilds.useQuery(undefined, {
        enabled: true,
    });
    const {
        data: refetchedGuilds,
        refetch:,
        isFetching,
    } = api.discord.getUserGuilds.useQuery({ refetch: true }, { enabled: false });
    const [filteredGuilds, setFilteredGuilds] = useState(guilds);
    const [search, setSearch] = useState('');

    useEffect(() => {
        setFilteredGuilds(
            guilds?.filter(
                ({ name, permissions }) => permissions & 0x20 && name.toLowerCase().includes(search.toLowerCase().trim()),
            ),
        );
    }, [search, guilds]);

    useEffect(() => {
        if (refetchedGuilds) {
            setFilteredGuilds(refetchedGuilds.filter(({ name, permissions }) => permissions & 0x20 && name.toLowerCase().includes(search.toLowerCase().trim())));
        }
    }, [refetchedGuilds]);

export const ServerList = () => {
    const { data: guilds } = api.discord.getUserGuilds.useQuery(undefined, {
        enabled: true,
    });
    const {
        data: refetchedGuilds,
        refetch:,
        isFetching,
    } = api.discord.getUserGuilds.useQuery({ refetch: true }, { enabled: false });
    const [filteredGuilds, setFilteredGuilds] = useState(guilds);
    const [search, setSearch] = useState('');

    useEffect(() => {
        setFilteredGuilds(
            guilds?.filter(
                ({ name, permissions }) => permissions & 0x20 && name.toLowerCase().includes(search.toLowerCase().trim()),
            ),
        );
    }, [search, guilds]);

    useEffect(() => {
        if (refetchedGuilds) {
            setFilteredGuilds(refetchedGuilds.filter(({ name, permissions }) => permissions & 0x20 && name.toLowerCase().includes(search.toLowerCase().trim())));
        }
    }, [refetchedGuilds]);

2 replies

TtRPC

•Created by Peform on 2/22/2025 in #❓-help

super quick question about prefetching

Is it best to use a promise.all when using multiple instances of prefetch to fetch data on the server to ensure that both queries are running at the same time? From the looks of it trpc handles this automatically so it is unneeded?

    await Promise.all([api.guild.get.prefetch({ guildId }), api.application.getList.prefetch({ guildId })]);

    await Promise.all([api.guild.get.prefetch({ guildId }), api.application.getList.prefetch({ guildId })]);

1 replies

TtRPC

•Created by Peform on 1/27/2025 in #❓-help

trpc useError hook?

Hey, I have a hook which i use for fetching some data using trpc and I'm wondering if there is some sort of useError so i can catch all of the errors for each query, in one variable? or is the best way using the error property on each of the useQuery invocations? Currently, if I want to display an error I'd have to make 3 separate variables and parse each of those in the if statement if error at the bottom.

export const GuildProvider = ({ guildId, children, fetchChannels, fetchRoles }: Props) => {
    const isFetching = useIsFetching();
    const { data: guild } = api.guild.get.useQuery({
        guildId,
    });
    const { data: channels } = api.guild.channels.useQuery(
        {
            guildId,
        },
        { enabled: fetchChannels },
    );
    const { data: roles } = api.guild.get.useQuery(
        {
            guildId,
        },
        { enabled: fetchRoles },
    );

    if (isFetching) {
        return <CustomLoader />;
    }

    if (error) {
        return <div>Error fetching guild data: {error.message}</div>;
    }

export const GuildProvider = ({ guildId, children, fetchChannels, fetchRoles }: Props) => {
    const isFetching = useIsFetching();
    const { data: guild } = api.guild.get.useQuery({
        guildId,
    });
    const { data: channels } = api.guild.channels.useQuery(
        {
            guildId,
        },
        { enabled: fetchChannels },
    );
    const { data: roles } = api.guild.get.useQuery(
        {
            guildId,
        },
        { enabled: fetchRoles },
    );

    if (isFetching) {
        return <CustomLoader />;
    }

    if (error) {
        return <div>Error fetching guild data: {error.message}</div>;
    }

1 replies

TtRPC

•Created by Peform on 10/13/2024 in #❓-help

onSuccess mutation not being called

Hey, I have this mutation which is called when I click a button. Inside the onSuccess callback I show a toast to the user telling them that the request was successful. However, when I do a state change before I call the mutation, eg setRequests the onSuccess callback never runs, I know this because the console log never appears. But, when I remove the setRequests it does, there is no visible error in my console. Why does this happen? Is it by design?

export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => {
    const clearMutation = api.generations.clear.useMutation();
    const warnMutation = api.punishments.warn.useMutation();
    const banMutation = api.punishments.ban.useMutation();

    const handleBanGeneration = async (requestId: string, requestType: string) => {
        setRequests((prev) => prev?.filter((req) => req.id !== requestId));
        await banMutation.mutateAsync(
            { requestId, requestType },
            {
                onSuccess: (response) => {
                    console.log(234243243);
                    toast('Success', {
                        description: response.message,
                        action: {
                            label: 'Undo',
                            onClick: () => console.log('Undo'),
                        },
                    });
                },
                onError: (error) => {},
            },
        );
    };

export const GenerationsCard = ({ generation, selectedFlag, setRequests }: Props) => {
    const clearMutation = api.generations.clear.useMutation();
    const warnMutation = api.punishments.warn.useMutation();
    const banMutation = api.punishments.ban.useMutation();

    const handleBanGeneration = async (requestId: string, requestType: string) => {
        setRequests((prev) => prev?.filter((req) => req.id !== requestId));
        await banMutation.mutateAsync(
            { requestId, requestType },
            {
                onSuccess: (response) => {
                    console.log(234243243);
                    toast('Success', {
                        description: response.message,
                        action: {
                            label: 'Undo',
                            onClick: () => console.log('Undo'),
                        },
                    });
                },
                onError: (error) => {},
            },
        );
    };

2 replies

TtRPC

•Created by Peform on 8/7/2024 in #❓-help

useQuery `onSuccess` callback depreciated

Hello. I've just found out that the onSuccess callback in useQuery has been depreciated. What should I be using instead?

This callback will fire any time the query successfully fetches new data.

@deprecated — This callback will be removed in the next major version.

This callback will fire any time the query successfully fetches new data.

@deprecated — This callback will be removed in the next major version.

  const {
    data: fetchedUserData,
    refetch: refetchUserData,
    isFetching: fetchingUserData,
  } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: !!form.getValues("userId"),
      onSuccess: (data) => { // depreciated
        setUserData(data);
      }
    },
  );

  const {
    data: fetchedUserData,
    refetch: refetchUserData,
    isFetching: fetchingUserData,
  } = api.userLookup.find.useQuery(
    {
      userId: form.getValues("userId"),
    },
    {
      enabled: !!form.getValues("userId"),
      onSuccess: (data) => { // depreciated
        setUserData(data);
      }
    },
  );

5 replies

TtRPC

•Created by Peform on 6/6/2024 in #❓-help

TRPC response data changing to undefined when typing in a form field.

Hello, I'm currently having a very strange issue, I am using a form to input some data and send off to a trpc endpoint to retrieve some data from the server when I click the submit button. However, the respnose userData variable is being changed to undefined whenever I type into the form field. I am not sure why this is happening as I do not mutate userData anywhere, and there are no new TRPC queries running (verified checking network tab) and the TRPC endpoint is set to disabled. So it will only fetch data once I call the refetch function... Anyone have any idea?

4 replies

TtRPC

•Created by Peform on 6/5/2024 in #❓-help

conditionally fetching data with a useQuery

Hello, From my understanding a useMutation is primarily for updating/deleting/creating a record. And a useQuery is primarily used for fetching data from the server. However, when it comes to conditionally fetching data from the server I belive the syntax for a useMutation is much more ideal? I'm not sure if I am missing something, or if in this scenario it would be better to use a useMutation. The issue is, I only want to query the API when the user presses a specific button and once they have input a userId to search. I also want to display a toast (notification) when the request has finished. However, the onSuccess and onError callbacks are depreciated, meaning I have to now use a useEffect. This is greatly overcomplicating everything. I'm not sure if there is a better way of doing this? Any advice would be appreciated.

3 replies

TtRPC

•Created by Peform on 5/10/2024 in #❓-help

uploading image via trpc endpoint

Hello, is there any example for uploading an image to a trpc endpoint?

5 replies