Peform•3w ago

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

1 Reply

PeformOP•3w ago

While this works, it feels like there should be a nicer way?. Is there a recommended approach for handling this server-prefetch + client-refresh scenario with tRPC in Next.js?

server side prefetch + optional client side refetch

Did you find this page helpful?