Pnpjs: spODataEntityArray won't resolve

[sympmarc]

Category

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

Version

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

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

Expected / Desired Behavior / Question

I can't for the life of me figure out why spODataEntityArray won't resolve below.

This is a new project scaffolded up with @pnp/spfx and including PnPjs. This is the first time I'm using PnPjs 2.x. I've reinstalled it with NPM in case something wasn't right. Any ideas?

It's straight from the example here, and I had it working just fine with PnPjs 1.x in a different project.

[sympmarc]

It seems like there is a missing export in @pnp\sp\index.js, but adding:

export { odataUrlFrom, spODataEntity, spODataEntityArray } from "./odata";

doesn't solve the problem. I feel like I might be close, though.

Using this:

import { spODataEntityArray } from '@pnp/sp/odata';

resolves.

[sympmarc]

Now trying to figure out how spODataEntityArray works in 2.0.0, which is somehow different...

[patrick-rodgers]

Probably need to update the docs - and also see about the missing export. My focus right now when I have time is 100% on fixing the module issues so this will come after that and likely would see resolution in 2.0.3 in Feb.

[sympmarc]

If I can figure out how it works now, I'll update the docs, but I haven't come up with the right incantation yet.

[patrick-rodgers]

@sympmarc - so yes, those docs are wrong. It is like I got it halfway updated, got distracted, and never finished. Sorry about that. Here is the updated code sample that will be in the docs:

import { sp, spODataEntityArray, Item, IItem } from "@pnp/sp/presets/all";

// interface defining the returned properties
interface MyProps {
  Id: number;
  Title: string;
}

try {

  // get a list item loaded with data and merged into an instance of Item
  const items = await sp.web.lists.getByTitle("OrderByList").items.select("Id", "Title").usingParser(spODataEntityArray<IItem, MyProps>(Item))();

  console.log(`Item id: ${items.length}`);

  console.log(`Item id: ${items[0].Title}`);

  // now we can call update because we have an instance of the Item type to work with as well
  await items[0].update({
      Title: "New title.",
  });

} catch (e) {

  console.error(e);
}

I am also updating the exports to ensure the spODataEntityArray and spODataEntity are included in the all preset.

[sympmarc]

Thanks, @patrick-rodgers. I assume this will all work right after the next point release? I just tried something analogous to what you show above, and the object type I'm getting back doesn't look right.

With

      const items: IProject[] = await web
        .lists
        .getByTitle("Project Ids")
        .items
        .select("Id", "Title")
        .usingParser(spODataEntityArray<IItem, IProject>(Item))();

I end up with objects which look like this:

rather than my IProject interface structure.

export interface IProject {
    Id: string;
    Title: string;
}

[patrick-rodgers]

That is correct - you are seeing the proxy which v2 uses to represent all the objects. The properties and methods you expect are there you just need to trust the typings. You should be able to do obj.Id without issue.

IF you need to dump the object there is a trick I need to write a docs page on:

import "@pnp/odata/debug";
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";

// example, works for any obj after importing debug
const o = sp.web;

// this represents the properties of the underlying object within the proxy
const jsonOfObject = o.__json;

// this represents the request data of the queryable
const dataOfObject = o.__data;

[patrick-rodgers]

You can see the new docs article in #1037 - note the unwrap method doesn't exist yet in the published library, I just added it based on this thread.

[sympmarc]

Do you have something in the docs that explains it like:

If you're using to seeing objects like this.,.. Now you'll get objects like this... ?

To me, a sentence starting like "Because all queryables are now represented as Proxy objects" makes my brain bleed. It's clear that the results we get back now have different structures. So I guess I'm looking for the description of why that is and why it's better. You probably have it somewhere and I just haven't found it? If this is something I can help with, let me know.