T
TanStack•16mo ago
dependent-tan

Long Loading Times With Prefetch

I am a little confused with prefetching data in a Next JS (app router) server component. On the dashboard I prefetch 10 queries which reach out to multiple AWS lambdas after a user logs in. This is causing load times of around 20 seconds. Should I only be loading crucial items for displaying the page? Do prefetch queries run in parallel? Should I be using suspenseQueries? Looking to see if anyone has any solutions to this issue.
2 Replies
conscious-sapphire
conscious-sapphire•16mo ago
If you call await queryClient.prefetchQuery(), it runs in serial if you kick them off in parallel and then do Promise.all, it should be paralell but I'm actually working on something where you can pass the promise to the client wihtout needing to await right about now
dependent-tan
dependent-tanOP•16mo ago
So useQuery does run in parallel just not prefetchQuery? This is part of the code. This would prefetch in parallel? 
export default async function EventId({ params }: Readonly<EventIdProps>) {
  const queryClient = new QueryClient();

  await Promise.all([
    queryClient.prefetchQuery({
      queryKey: [ACTIVITIES, params.eventId],
      queryFn: () => fetchActivities(params.eventId, 'event'),
    }),

    queryClient.prefetchQuery({
      queryKey: [CONTACTS],
      queryFn: () => fetchContacts(),
    }),

    queryClient.prefetchQuery({
      queryKey: [EVENT, params.eventId],
      queryFn: () => fetchEvent(params.eventId),
    }),

    queryClient.prefetchQuery({
      queryKey: [LOCATIONS],
      queryFn: () => fetchLocations(),
    }),

    queryClient.prefetchQuery({
      queryKey: [NOTES, params.eventId],
      queryFn: () => fetchNotes(params.eventId, 'event'),
    }),

    queryClient.prefetchQuery({
      queryKey: [TASKS, params.eventId],
      queryFn: () => fetchTask(params.eventId),
    }),
  ]);

....
export default async function EventId({ params }: Readonly<EventIdProps>) {
  const queryClient = new QueryClient();

  await Promise.all([
    queryClient.prefetchQuery({
      queryKey: [ACTIVITIES, params.eventId],
      queryFn: () => fetchActivities(params.eventId, 'event'),
    }),

    queryClient.prefetchQuery({
      queryKey: [CONTACTS],
      queryFn: () => fetchContacts(),
    }),

    queryClient.prefetchQuery({
      queryKey: [EVENT, params.eventId],
      queryFn: () => fetchEvent(params.eventId),
    }),

    queryClient.prefetchQuery({
      queryKey: [LOCATIONS],
      queryFn: () => fetchLocations(),
    }),

    queryClient.prefetchQuery({
      queryKey: [NOTES, params.eventId],
      queryFn: () => fetchNotes(params.eventId, 'event'),
    }),

    queryClient.prefetchQuery({
      queryKey: [TASKS, params.eventId],
      queryFn: () => fetchTask(params.eventId),
    }),
  ]);

....

Did you find this page helpful?