0

Could you help me please, I try to understand, why the site collection doesn't appear in my service query? This way, I get an error:query to get list data

This is my service to get data from list:

export class PersonService implements IPersonService {
  public get(): Promise<Array<Person>> {
    let users = new Array<Person>();
    const processResultUsers = (items: Array<Person>):void => { users = users.concat(items); };
    const birthdays = this.getBirthdays();
    birthdays
      .then(processResultUsers)
      .catch(error => { console.error(error); });
    return Promise.all([birthdays]).then(() => {
      return users.sort((a, b) => a.eventDate.valueOf() - b.eventDate.valueOf());
    });
  }

private getBirthdays(): Promise<Array<Person>> {
    return sp.web.lists.getById(Settings.listPersonal).items
      .select('*',
        `${Fields.Employee}/EMail`,
        `${Fields.Employee}/Id`,
        `${Fields.Employee}/FirstName`,
        `${Fields.Employee}/LastName`)
      .expand(Fields.Employee)
      .get().then((usersList) => {
        return usersList
          .filter(item => item[Fields.BDDate] !== null)
          .map(item => {
        return {
          id: personType.Birthdays + item.Id,
          firstName: item[Fields.Employee].FirstName,
          lastName: item[Fields.Employee].LastName,
          email: item[Fields.Employee].EMail,
          userId: item[Fields.Employee].Id,
          eventDate: moment(item[Fields.BDDate]),
          eventType: item[Fields.BDDate] !== null ? moment(item[Fields.BDDate]).format('MMM DD') : '',
          type: personType.Birthdays
        };
      });
    });
  }

And I get this data from service in my web-part component to render.

private loadData():Promise<Array<Person>>{
    return this.props.service.get().then((result: Array<Person>) => {
      return result;
    });
  }

My .ts file with onInit method:

import { sp } from "@pnp/pnpjs";

export default class EmployeesEventsWebPart extends BaseClientSideWebPart<IEmployeesEventsWebPartProps> {
  public onInit(): Promise<void> {
    return super.onInit().then(_ => {
      sp.setup({
        spfxContext: this.context as any
      });
    });
  }

  public render(): void {
    let service = new PersonService();
    }

    const element: React.ReactElement<IEmployeesEventsProps > = React.createElement(
      EmployeesEvents,
      {
        title: this.properties.title,
        seeAllLink: this.properties.showAllLink,
        showAll: this.properties.showAll,
        isOpenInNewTab: this.properties.shouldOpenNewTab,
        service: service,
        profilePageUrl: this.properties.profilePageUrl,
        displayNumber: this.properties.numberOfItemsToDisplay
      }
    );

    ReactDom.render(element, this.domElement);
  }

My package.json:

 "dependencies": {
    "@microsoft/sp-core-library": "1.16.1",
    "@microsoft/sp-lodash-subset": "1.16.1",
    "@microsoft/sp-office-ui-fabric-core": "1.16.1",
    "@microsoft/sp-property-pane": "1.16.1",
    "@microsoft/sp-webpart-base": "1.16.1",
    "@pnp/pnpjs": "^2.0.13",
    "@pnp/spfx-controls-react": "3.12.0",
    "@pnp/spfx-property-controls": "3.11.0",
    "axios": "^0.27.2",
    "moment": "^2.24.0",
    "office-ui-fabric-react": "^7.199.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-facebook": "9.0.12",
    "react-instagram-carousel": "^2.0.1",
    "react-social-media-embed": "2.3.3",
    "react-twitter-widgets": "1.11.0",
    "tslib": "2.3.1"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-4.5": "0.2.2",
    "@rushstack/eslint-config": "2.5.1",
    "@microsoft/eslint-plugin-spfx": "1.16.1",
    "@microsoft/eslint-config-spfx": "1.16.1",
    "@microsoft/sp-build-web": "1.16.1",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "gulp": "4.0.2",
    "typescript": "4.5.5",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "eslint-plugin-react-hooks": "4.3.0",
    "@typescript-eslint/parser": "5.49.0",
    "@microsoft/sp-module-interfaces": "1.16.1"
  }
6
  • Have you initialized PnPjs in your webpart's init method? Mar 24, 2023 at 16:50
  • @theChrisKent, yes, I added additional code with onInit method above
    – Propool
    Mar 24, 2023 at 17:13
  • which version of PnPjs are you using? Mar 25, 2023 at 4:52
  • @Propool, try using latest version of PnP JS library and follow this documentation for proper setup: pnp.github.io/pnpjs/getting-started. Let me know if this works for you. Mar 25, 2023 at 10:02
  • @KalpeshVaghela, "@pnp/pnpjs": "^2.0.13". I've just added my package.json file above.
    – Propool
    Mar 31, 2023 at 7:58

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.