Pnpjs: sp onInit code for SPFx

[PathToSharePoint]

Category

• [ ] Enhancement
• [ ] Bug
• [x] Question
• [ ] Documentation gap/issue

Version

Please specify what version of the library you are using: [2.0.10]

Please specify what version(s) of SharePoint you are targeting: [ SPFx Online ]

Question

I am trying to understand the onInit code snippets mentioned in the docs. I am working with the SharePoint Framework and plan to use pnp/sp for both SharePoint and Microsoft Teams.

What is the difference between those two snippets:
on https://pnp.github.io/pnpjs/sp/

    sp.setup({
      spfxContext: this.context
    });

on https://pnp.github.io/pnpjs/authentication/client-spfx/
sp.setup(this.context);

Thank you!

[juliemturner]

Nothing, the second is a shortcut for the first.

[PathToSharePoint]

Got it. Thanks Julie!

[PathToSharePoint]

Sorry, I am reopening this question as I am seeing a weird behavior. I'd like to double check before reporting this as a bug.

I have had a refresh issue with a Web Part and it seems that it comes from the onInit sequence.

My test is very basic:

• Hello World Web Part with React
• Add support for fullwidth and Teams.
• import sp:

import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/files";
import "@pnp/sp/folders";

• add the onInit code

Observed behavior:
If I use sp.setup(this.context) : the Web Part does not re-render content on page refresh. I see a blank area. The controls such as opening the propertypane don't work.

if I change to {spfxContext: this.context}: everything looks fine so far.

I'll do more testing but I'd be interested to hear if it's just me.

[juliemturner]

This is how I do onInit and I have never had a problem, so I don't think there's a bug

import { Logger, LogLevel, ConsoleListener } from '@pnp/logging';
import { sp } from '@pnp/sp';
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

public async onInit(): Promise<void> {
    Logger.subscribe(new ConsoleListener());
    Logger.activeLogLevel = LogLevel.Info;

    sp.setup(this.context);
}

..with obvious variations for what I need to happen in Init...

[PathToSharePoint]

Thanks again for the feedback Julie.