PeformP
tRPC•11mo ago•
1 reply
Peform

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

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

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]);
Was this page helpful?