Loader not waiting for all async operations

When I await multiple promises in a loader function, the page gets rendered as soon as I hit the first

await

await

.
Example:

export const Route = createFileRoute('/test')({
  component: Component,
  loader: async ({ context: { queryClient, client } }) => {
   const a = await queryClient.ensureQueryData(getData1());
    console.log('first');

    const b = await queryClient.ensureQueryData(getData2());
    console.log('second');

    return Promise.resolve([a, b]);
  },
});

function Component() {
  console.log('render');
  const { client, queryClient } = Route.useRouteContext();
  const [{ data }] = useSuspenseQueries({ queries: [d()] });
  const navigate = useNavigate();

  return (
    <div>
      Test
    </div>
  );
}

export const Route = createFileRoute('/test')({
  component: Component,
  loader: async ({ context: { queryClient, client } }) => {
   const a = await queryClient.ensureQueryData(getData1());
    console.log('first');

    const b = await queryClient.ensureQueryData(getData2());
    console.log('second');

    return Promise.resolve([a, b]);
  },
});

function Component() {
  console.log('render');
  const { client, queryClient } = Route.useRouteContext();
  const [{ data }] = useSuspenseQueries({ queries: [d()] });
  const navigate = useNavigate();

  return (
    <div>
      Test
    </div>
  );
}

This will print:

first
render
second

first
render
second

Seems like the router starts rendering as soon as the loader function relinquishes the thread.
Am I missing something?

TanStack•2y ago•

28 replies

skinny-azure

Loader not waiting for all async operations

When I await multiple promises in a loader function, the page gets rendered as soon as I hit the first

await

await

.
Example:

export const Route = createFileRoute('/test')({
  component: Component,
  loader: async ({ context: { queryClient, client } }) => {
   const a = await queryClient.ensureQueryData(getData1());
    console.log('first');

    const b = await queryClient.ensureQueryData(getData2());
    console.log('second');

    return Promise.resolve([a, b]);
  },
});

function Component() {
  console.log('render');
  const { client, queryClient } = Route.useRouteContext();
  const [{ data }] = useSuspenseQueries({ queries: [d()] });
  const navigate = useNavigate();

  return (
    <div>
      Test
    </div>
  );
}

export const Route = createFileRoute('/test')({
  component: Component,
  loader: async ({ context: { queryClient, client } }) => {
   const a = await queryClient.ensureQueryData(getData1());
    console.log('first');

    const b = await queryClient.ensureQueryData(getData2());
    console.log('second');

    return Promise.resolve([a, b]);
  },
});

function Component() {
  console.log('render');
  const { client, queryClient } = Route.useRouteContext();
  const [{ data }] = useSuspenseQueries({ queries: [d()] });
  const navigate = useNavigate();

  return (
    <div>
      Test
    </div>
  );
}

This will print:

first
render
second

first
render
second

Seems like the router starts rendering as soon as the loader function relinquishes the thread.
Am I missing something?

Loader not waiting for all async operations

Similar Threads

Loader not waiting for all async operations

Similar Threads

Similar Threads

Similar Threads