Can't get context for pnp get api calls in spfx solution

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
1
down vote

favorite

I'm having trouble getting the correct site context for @pnp/sp. It works fine in workbench but not when I deploy to a site and add to a modern page. My api calls are being made to /_api/sitepages and not the root web. Am I missing something? I'm using the react spfx yeoman template

edited 2 hours ago

Gautam Sheth

23k12046

asked 3 hours ago

chris rowles

675

add a commentÂ |Â

up vote
1
down vote

favorite

edited 2 hours ago

Gautam Sheth

23k12046

asked 3 hours ago

chris rowles

675

add a commentÂ |Â

up vote
1
down vote

favorite

edited 2 hours ago

Gautam Sheth

23k12046

asked 3 hours ago

chris rowles

675

sharepoint-online spfx spfx-webparts pnp-js-core

edited 2 hours ago

Gautam Sheth

23k12046

asked 3 hours ago

chris rowles

675

edited 2 hours ago

Gautam Sheth

23k12046

asked 3 hours ago

chris rowles

675

edited 2 hours ago

Gautam Sheth

23k12046

edited 2 hours ago

Gautam Sheth

23k12046

edited 2 hours ago

Gautam Sheth

23k12046

asked 3 hours ago

chris rowles

675

asked 3 hours ago

chris rowles

675

asked 3 hours ago

chris rowles

675

add a commentÂ |Â

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

You need to initialize the pnp library with the SPFx context.

For that you need to add the below code in your webpart's .ts (TypeScript) file:

1) Add the below import statement

import pnp from "sp-pnp-js";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 pnp.setup(
 spfxContext: this.context
 );

 );

If however, you are using the newer pnp js (@pnp/sp) scoped libraries, you need to add the below code in the webpart's .ts (TypeScript) file:

1) Add the below import statement

import sp from "@pnp/sp";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 // other init code may be present

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

edited 2 hours ago

answered 3 hours ago

Gautam Sheth

23k12046

I think I tried this in the tsx file. I'll try this in the ts file instead
â€“Â chris rowles
2 hours ago

Any idea why it's the ts file and not the tsx?
â€“Â chris rowles
2 hours ago

1

The oninit method is the first method called even before render method. In the oninit method, we initialise and pass the context to PNP. This ensures that the code works correctly. If we do that in tsx file, it will be after render method call which will be problematic.
â€“Â Gautam Sheth
2 hours ago

Got it thanks I'll let you know how I get on
â€“Â chris rowles
2 hours ago

add a commentÂ |Â

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "232"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fsharepoint.stackexchange.com%2fquestions%2f252057%2fcant-get-context-for-pnp-get-api-calls-in-spfx-solution%23new-answer', 'question_page');

);

Post as a guest

Name

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

You need to initialize the pnp library with the SPFx context.

For that you need to add the below code in your webpart's .ts (TypeScript) file:

1) Add the below import statement

import pnp from "sp-pnp-js";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 pnp.setup(
 spfxContext: this.context
 );

 );

If however, you are using the newer pnp js (@pnp/sp) scoped libraries, you need to add the below code in the webpart's .ts (TypeScript) file:

1) Add the below import statement

import sp from "@pnp/sp";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 // other init code may be present

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

edited 2 hours ago

answered 3 hours ago

Gautam Sheth

23k12046

I think I tried this in the tsx file. I'll try this in the ts file instead
â€“Â chris rowles
2 hours ago

Any idea why it's the ts file and not the tsx?
â€“Â chris rowles
2 hours ago

1

The oninit method is the first method called even before render method. In the oninit method, we initialise and pass the context to PNP. This ensures that the code works correctly. If we do that in tsx file, it will be after render method call which will be problematic.
â€“Â Gautam Sheth
2 hours ago

Got it thanks I'll let you know how I get on
â€“Â chris rowles
2 hours ago

add a commentÂ |Â

up vote
2
down vote

accepted

You need to initialize the pnp library with the SPFx context.

For that you need to add the below code in your webpart's .ts (TypeScript) file:

1) Add the below import statement

import pnp from "sp-pnp-js";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 pnp.setup(
 spfxContext: this.context
 );

 );

If however, you are using the newer pnp js (@pnp/sp) scoped libraries, you need to add the below code in the webpart's .ts (TypeScript) file:

1) Add the below import statement

import sp from "@pnp/sp";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 // other init code may be present

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

edited 2 hours ago

answered 3 hours ago

Gautam Sheth

23k12046

I think I tried this in the tsx file. I'll try this in the ts file instead
â€“Â chris rowles
2 hours ago

Any idea why it's the ts file and not the tsx?
â€“Â chris rowles
2 hours ago

1

The oninit method is the first method called even before render method. In the oninit method, we initialise and pass the context to PNP. This ensures that the code works correctly. If we do that in tsx file, it will be after render method call which will be problematic.
â€“Â Gautam Sheth
2 hours ago

Got it thanks I'll let you know how I get on
â€“Â chris rowles
2 hours ago

add a commentÂ |Â

up vote
2
down vote

accepted

You need to initialize the pnp library with the SPFx context.

For that you need to add the below code in your webpart's .ts (TypeScript) file:

1) Add the below import statement

import pnp from "sp-pnp-js";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 pnp.setup(
 spfxContext: this.context
 );

 );

If however, you are using the newer pnp js (@pnp/sp) scoped libraries, you need to add the below code in the webpart's .ts (TypeScript) file:

1) Add the below import statement

import sp from "@pnp/sp";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 // other init code may be present

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

edited 2 hours ago

answered 3 hours ago

Gautam Sheth

23k12046

You need to initialize the pnp library with the SPFx context.

For that you need to add the below code in your webpart's .ts (TypeScript) file:

1) Add the below import statement

import pnp from "sp-pnp-js";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 pnp.setup(
 spfxContext: this.context
 );

 );

If however, you are using the newer pnp js (@pnp/sp) scoped libraries, you need to add the below code in the webpart's .ts (TypeScript) file:

1) Add the below import statement

import sp from "@pnp/sp";

2) Add/Update the onInit method:

public onInit(): Promise<void> 

 return super.onInit().then(_ => 

 // other init code may be present

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

edited 2 hours ago

answered 3 hours ago

Gautam Sheth

23k12046

edited 2 hours ago

answered 3 hours ago

Gautam Sheth

23k12046

answered 3 hours ago

Gautam Sheth

23k12046

answered 3 hours ago

Gautam Sheth

23k12046

I think I tried this in the tsx file. I'll try this in the ts file instead
â€“Â chris rowles
2 hours ago

Any idea why it's the ts file and not the tsx?
â€“Â chris rowles
2 hours ago

1

The oninit method is the first method called even before render method. In the oninit method, we initialise and pass the context to PNP. This ensures that the code works correctly. If we do that in tsx file, it will be after render method call which will be problematic.
â€“Â Gautam Sheth
2 hours ago

Got it thanks I'll let you know how I get on
â€“Â chris rowles
2 hours ago

add a commentÂ |Â

I think I tried this in the tsx file. I'll try this in the ts file instead
â€“Â chris rowles
2 hours ago

Any idea why it's the ts file and not the tsx?
â€“Â chris rowles
2 hours ago

1

The oninit method is the first method called even before render method. In the oninit method, we initialise and pass the context to PNP. This ensures that the code works correctly. If we do that in tsx file, it will be after render method call which will be problematic.
â€“Â Gautam Sheth
2 hours ago

Got it thanks I'll let you know how I get on
â€“Â chris rowles
2 hours ago

I think I tried this in the tsx file. I'll try this in the ts file instead
â€“Â chris rowles
2 hours ago

Any idea why it's the ts file and not the tsx?
â€“Â chris rowles
2 hours ago

The oninit method is the first method called even before render method. In the oninit method, we initialise and pass the context to PNP. This ensures that the code works correctly. If we do that in tsx file, it will be after render method call which will be problematic.
â€“Â Gautam Sheth
2 hours ago

Got it thanks I'll let you know how I get on
â€“Â chris rowles
2 hours ago

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky