How to add @odata.nextLink in graph api request

Question

I've a service to get all users from Azure AD.

public getAllUsers(): Promise<Array<Person>> {
    return graph
      .users
      .select("displayName", "accountEnabled")
      .top(25)
      .expand("manager")
      .get()
      .then((results) => {
        return results.map((item: any) => {
          return {
            displayName: item.displayName,
            accountEnabled: item.accountEnabled,
            manager: item.manager ? item.manager.displayName : ''
          };
        });
      });
  }

export class Person {
  public displayName: string;
  public accountEnabled: number;
  public manager: any;
}

I have over 200 users. I use .top to get 25 users per request. And in the response I receive a link to the next request '@odata.nextLink'.

Can you please tell me how can I request this link again while it is coming? And write the results to a common array.

Answer 1

If you want to do recursive call based on next link then you should use paged method which can give necessary details related to page.

Try below code, it should work (Important: I have created sample using pnpjs version 3.17.0, and if you are using older version of pnpjs then you might need to adapt as per older documentation)

import * as React from 'react';
import { IHelloWorldProps } from './IHelloWorldProps';

import { GraphFI, graphfi, SPFx as graphSPFx, IPagedResult } from "@pnp/graph";
import '@pnp/graph/presets/all';
export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  private graph: GraphFI;

  constructor(props: IHelloWorldProps) {
    super(props);

    this.graph = graphfi().using(graphSPFx(this.props.context));

  }

  async componentDidMount() {

    let allUsers: any[] = new Array<any>();
    let result: IPagedResult = null;    
    do {

      if (result == null) {
        result = await this.graph
          .users
          .select("displayName", "accountEnabled")
          .top(100)
          .expand("manager").paged();
      }
      else if (result.hasNext) {
        result = await result.next();
      }
      allUsers.push(...(result.value as any[]))
      console.log('DEMO', result);
      if (!result.hasNext) {
        break;
      }
    }
    while (true)

    console.log('DEMO', allUsers);

  }

  public render(): React.ReactElement<IHelloWorldProps> {


    return (
      <div>Sample Web Part</div>
    );
  }
}

See output below: