Comments (9)
The video isn't outdated, although it encourages things that aren't best practices and doesn't really explain.
I would suggest you review this documentation and for a getting started project to follow, you can use this reference. That all said to summarize your issue you're correctly setting up your graph variable in the onInit method, but you don't pass that in any way to the component file... you then create a new constant for graph in the component file, but you didn't register any observers (the using part of the call you made in onInit). Please review the documentation, videos, and sample project I've shared above.
from pnpjs.
Thank you Julie for quick response. The documentation is not that straight forward to implement. I am not sure how to pass the graph variable from oninit to component file. Its type is not working with any and I am not able to find any reference where it is passed as props. So, I tried to follow the reference project method. I created separate file "pnpjsconfig.ts" and implemented below code:
import { WebPartContext } from "@microsoft/sp-webpart-base";
import { graphfi, GraphFI, SPFx as graphSPFx } from "@pnp/graph";
// Here getting error for null value assign
var _graph: GraphFI = null;
export const getGraph = (context?: WebPartContext): GraphFI => {
if (_graph === null) {
//You must add the @pnp/logging package to include the PnPLogging behavior it is no longer a peer dependency
// The LogLevel set's at what level a message will be written to the console
//Here getting error for context undefined
_graph = graphfi().using(graphSPFx(context));
}
return _graph;
};
I am getting 2 errors on this:
first on line
var _graph: GraphFI = null;
error - Type 'null' is not assignable to type 'GraphFI'.ts
second on line
_graph = graphfi().using(graphSPFx(context));
error - Argument of type 'WebPartContext | undefined' is not assignable to parameter of type 'ISPFXContext'.
Type 'undefined' is not assignable to type 'ISPFXContext'.
Is there anything I am missing? I have not added getSP method as I don't have installed @pnp/sp.
Please provide your thoughts.
from pnpjs.
That error would have to do with your tsconfig settings.. just change the line to
var _graph: GraphFI;
and then change this line:
if (_graph === null) {
to
if (_graph == null) {
from pnpjs.
What about the context error? any way to fix that?
from pnpjs.
I believe the fix would be
_graph = graphfi().using(graphSPFx(context as ISPFXContext));
You might want to consider taking a TypeScript course because the issues you're running into here are linting/TypeScript errors that you will need to be able to deal with in your code. Although we're happy to provide support for PnPjs these questions aren't really related to that as much as they are to how to write TypeScript.
from pnpjs.
Hi Julie. Thank you for the response. I will surely checkout typescript course. The issue I am facing here is I am not able to find clear documentation about how this code works. So, I am not able to provide any typecasting. In above code I am facing same issue with ISPFXContext. It throws error - Cannot find name 'ISPFXContext'.
I tried typecase as below as well but it is throwing same error:
_graph = graphfi().using(graphSPFx((context as unknown) as ISPFXContext))
does this have dependencies on any packages? Do I need to import anything else?
from pnpjs.
I'm sorry you're struggling; our documentation assumes TypeScript knowledge so it's clear it's just not clear if you don't fully understand TypeScript. The demo version works for me, so I suspect you have different linting or tsconfig settings than the sample does which is why you're having problems. This could be because I upgraded that solution from SPFx 1.15 instead of starting from scratch with 1.18.2 and the linting rules could have changed. I'll try to find some try and recreate your issue but yes ISPFxContext is something you could import from @pnp/sp it's a type. you should not coerce it to unknown and then to ISPFXContext.
from pnpjs.
@lovethakker02 - If you link to the PR that was merged above (#3047) you can see the updated sample project that uses a clean 1.19.0 SPFx project with all the default linting and tsconfig settings. I made the appropriate adjustments to pass those rules. At this point I think you should be able to continue. If you have further questions related to PnPjs specifically, please don't hesitate to submit a new issue.
from pnpjs.
This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.
from pnpjs.
Related Issues (20)
- Batching multiple lists fail HOT 4
- Custom Http request to pull RateLimit-Reset header HOT 3
- Why use the .js extension in imports? HOT 3
- Email Notification delays while send email using @pnp/sp/utilities HOT 9
- Get Version History of a List Item in one request. HOT 3
- v4 - How do I get paged items using async iterator and break only when ALL items are retrieved? HOT 3
- sendEmail from property not working HOT 3
- Update Content Type from List endpoint and not web HOT 2
- Next on cached pagination request HOT 3
- Uploading data into an Excel Spreadsheet. HOT 8
- Add/Update methods no longer returning data as of V4 HOT 3
- How can I get a list of all folders in a document library? HOT 3
- Cannot read property 'Content-Type' of undefined HOT 20
- version 4 - @pnp/sp/favorites doesn't exists HOT 3
- Some of the SharePoint Online users are not showing in the Auto Complete or People Picker HOT 5
- Taxonomy is impossible to work with in v4 HOT 2
- IItemAddResult not found in "@pnp/sp/items", nor anywhere else that I can find HOT 2
- Graph API me/OwnedObjects is missing with pnp js 3.0 HOT 3
- MS Graph Following Endpoint limited to 10 items HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pnpjs.