Peform
Peform5w 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
Peform
PeformOP5w 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?

Did you find this page helpful?