The recommended way of using the admin's listUser with TanStack Start

// OPTION 1 (authClient.admin.listUsers + useQuery)
const fetchListUsers = async (): Promise<UserWithRole[]> => {
    const data = await authClient.admin.listUsers(
        {
            query: {
                limit: 50,
                sortBy: "createdAt",
                sortDirection: "desc",
            },
        },
        {
            throw: true,
        }
    );
    return data?.users || [];
};

const useListUsersQuery = () =>
    useQuery({
        queryKey: ["users"],
        queryFn: () => fetchListUsers(),
    });
// in the component
const { data: users = [], isPending } = useListUsersQuery()

// OPTION 2 (auth.api.listUsers + useSuspenseQuery)
const fetchlistUsers = createServerFn({ method: "GET" })
    .middleware([userMiddleware])
    .handler(async () => {
        const users = await auth.api.listUsers({
            query: {
                limit: 50,
                sortBy: "createdAt",
                sortDirection: "desc",
            },
            headers: getRequestHeaders(),
        });

        return users?.users;
    });

const listUsersQueryOptions = () =>
    queryOptions({
        queryKey: ["users"],
        queryFn: () => fetchlistUsers(),
    });
// in the component
loader: async ({ context }) => {
        await context.queryClient.ensureQueryData(listUsersQueryOptions());
    },
...
const { data: users = [], isPending } = useSuspenseQuery(
        listUsersQueryOptions()
    );

// OPTION 1 (authClient.admin.listUsers + useQuery)
const fetchListUsers = async (): Promise<UserWithRole[]> => {
    const data = await authClient.admin.listUsers(
        {
            query: {
                limit: 50,
                sortBy: "createdAt",
                sortDirection: "desc",
            },
        },
        {
            throw: true,
        }
    );
    return data?.users || [];
};

const useListUsersQuery = () =>
    useQuery({
        queryKey: ["users"],
        queryFn: () => fetchListUsers(),
    });
// in the component
const { data: users = [], isPending } = useListUsersQuery()

// OPTION 2 (auth.api.listUsers + useSuspenseQuery)
const fetchlistUsers = createServerFn({ method: "GET" })
    .middleware([userMiddleware])
    .handler(async () => {
        const users = await auth.api.listUsers({
            query: {
                limit: 50,
                sortBy: "createdAt",
                sortDirection: "desc",
            },
            headers: getRequestHeaders(),
        });

        return users?.users;
    });

const listUsersQueryOptions = () =>
    queryOptions({
        queryKey: ["users"],
        queryFn: () => fetchlistUsers(),
    });
// in the component
loader: async ({ context }) => {
        await context.queryClient.ensureQueryData(listUsersQueryOptions());
    },
...
const { data: users = [], isPending } = useSuspenseQuery(
        listUsersQueryOptions()
    );