Question 352608 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Microsoft Graph Client – Promise – Return value to next .then() is undefined

I’m struggeling with returning the result of a Promise to the next .then function.
I’m sure I’m blind and it is really small issue, but actually I can’t see the reason why in the parameter of the next .then function is always undefined.

This is my Promise:

await this.props.context.msGraphClientFactory
  .getClient('3')
  .then(async (client: MSGraphClientV3) => {
    return await client
      .api(`/groups/{${this.state.group?.id}}/members`)
      .version("v1.0")
      .get(async (err, res) => {

        if (err) {
          console.error(err);
          return;
        }

        return res.value;
      });
    })
    .then(async (users: Array<MicrosoftGraph.User>) => {
      //users is always undefined
      ...

See the screenshots of debugging:

res.value is set correctly:

enter image description here

…but in next .then function the parameter is undefined:

enter image description here

Can anybody please tell me, what I’m doing wrong? Many thanks in advance!

Tags:

2

Answers


  1. 0

    I’m not familiar with casting in typescript, but the endpoint GET /groups/{groupId}/members returns by default a collection of directoryObjects.

    user derives from directoryObject and in then method you expect a collection of users and maybe casting is not performed.

    I would expect that

    .then(async (members: Array<MicrosoftGraph.DirectoryObject>) => {...}

    should work, and then try cast directoryObject to user in the method.

    Or if you want to really retrieve users, you can perform server casting

    await this.props.context.msGraphClientFactory
  .getClient('3')
  .then(async (client: MSGraphClientV3) => {
    return await client
      .api(`/groups/{${this.state.group?.id}}/members/microsoft.graph.user`)
      .version("v1.0")
      .get(async (err, res) => {

        if (err) {
          console.error(err);
          return;
        }

        return res.value;
      });
    })
    .then(async (users: Array<MicrosoftGraph.User>) => {..}

    https://learn.microsoft.com/en-us/graph/api/group-list-members?view=graph-rest-1.0&tabs=http#optional-query-parameters

    Login or Signup to reply.
  2. 0

    You are returning from a .get(…) callback, not from a promise .then() callback. The client get method appears not to return a promise when you pass a callback, and it certainly doesn’t return a promise for the result of the callback. You want to use the promise API instead where .get() (when you don’t pass a callback) returns a promise, which you can chain .then() or await.

    In general, don’t pass async functions as callbacks, and avoid using .then() when you can easily await instead. Your code then becomes

    const client: MSGraphClientV3 = await this.props.context.msGraphClientFactory.getClient('3');

const res = await client
  .api(`/groups/{${this.state.group?.id}}/members`)
  .version("v1.0")
  .get();

const users: Array<MicrosoftGraph.User> = res.value;
…
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search