0

I'm fairly new to the sharepoint framework so this maybe something quite fundamental that I have misunderstood but here goes:

I'm working on a sharepoint framework typescript / react webpart that uses a number of API calls which are all working on the workbench.aspx but not working when i test on sitePages using modern pages.

For example this:

import { Web, sp, SearchQuery, SearchResults, SearchQueryBuilder, Search } from '@pnp/sp';
sp.search("test").then((resultSet: SearchResults) => {
    console.log(resultSet)
});

On the workbench it works and returns my search results.

The same function on a modern page inserts /SitePages into the API call and returns a 404:

https://{server}/sites/{site}/SitePages/_api/search/postquery

I had the same problem with the currentUser web service and got round it doing this:

let spweb: Web = new Web(this.props.wpContext.pageContext.web.absoluteUrl);

spweb.currentUser.get().then(user=>{
    console.log(user);
});

This works in both workbench and modern pages but I think these are symptoms of something more fundamentally incorrect with my code.

Sorry for the lack of code shared but I'm asked not to share code by my organization.

Any tips on where I'm going wrong would be appriciated.

  • try this before your search statement: sp.setup({ spfxContext: this.props.wpContext }); – R. Sperre Jan 16 at 14:17
  • 1
    Thank you for responding so quickly. I managed to get the call working by instantiating a new search() and using using seach.execute()... but I will read up on sp.setup as well as it's not something I'm got fully familiar with – andy moore Jan 16 at 15:11
2

You need to provide the context/setup to the pnpjs library which then determines what URLs to use internally to fetch the data.

To do that , you need to add the below import statement in your <webpart>.ts file.

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

After that , you need to add the onInit method which will be executed before other lifecycle methods as below:

public onInit(): Promise<void> {

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

    // other init code may be present

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

Once this is done, you can run the gulp tasks and upload the package again.

Reference - Getting started with PnPJS

  • @andy-moore - you can accept it as answer if it helped fix your issue :) This will remove it from the list of unanswered questions and you also get additional points and badges for doing so. Cheers, welcome to the community :) – Gautam Sheth Jan 21 at 6:46
  • Sorry for the delay, thanks for your help no this. I'm more familiar now with how context works and the wider framework itself. Cheers! – andy moore Jan 28 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.