►
From YouTube: Getting started with PnPjs in SPFx solutions
Description
In this 18-minute developer-focused demo, Julie Turner delivers an overview on files/code in a PnPjs v3.x sample. Items called out - changes between v2 and v3, dependencies, pnpjsConfig file (importing only selected bits of functionality libraries), chaining behaviors together, establishing global context for factory interfaces, caching, loadUser method (get information from Graph), rendering, creating a batched instance for grouped updates, discussion on approach to structure of production vs sample code. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on November 3, 2022.
Demo Presenter
• Julie Turner (Sympraxis Consulting) | @jfj1997
Supporting materials
• Library - Getting Started PnPjs Library | https://pnp.github.io/pnpjs/getting-started/
• Sample - SharePoint Framework sample using @pnp/js and ReactJS | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-sample
• Sample – @pnp/js and ReactJS Functional Components | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pnp-js-hooks
Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community
A
Foreign,
so
what
we
have
today
is
a
pmp.js
version,
3
sample
solution,
and
so
what
I
decided
to
do?
We
do
have
a
Patrick
and
I
did
do
videos
on
this
sample
and
the
sample
is
available
in
the
dev
spfx
sample
repo.
So
you
can
go
and
check
it
out.
I
did
update
it
a
tiny
bit
for
today's
call
to
just
do
highlight
some
other
things,
and
so
so
this
is
a
demo
you
can
in
general,
see
but
we'll
we'll
go
through
it
a
little
bit
a
little
bit
more
detail.
A
Okay,
so
this
is
the
sample
that
I'm
going
to
show
you
the
code
for
essentially
what
it
does
is.
It
looks
into
the
document
library
and
it
gets
all
the
documents
in
the
document,
library
and
Returns
the
size
and
the
name
and
the
title
of
the
document,
and
then
I
have
a
button
here.
That
updates
the
titles
and
what
it
essentially
does
is
just
append
the
word
Dash
updated
to
each
name,
which
is
super
like
super
useful
right.
We
all
want
to
be
able
to
do
that.
A
So
if
we
click
update,
item
titles,
it'll
go
out
and
do
that
update
and
then
update
the
UI
so
that
it
shows
that
the
name
of
the
file
was
updated.
If
we
go
in
the
document,
Library
it'll
show
that
the
other
thing
that
you
see
here
is
this
little.
This
extra
new
thing
that
says
my
name
is
Julie
Turner
and
we're
going
to
talk
about
where
that
came
from
and
why
in
just
a
second?
A
So
that's
what
we're
going
to
look
at
code
for
so,
let's
start
and
switch
over
to
the
code
and
so
here's
our
solution
and
I'm,
starting
by
looking
at
the
package.json.
So
when
you
want
to
use
pmp.js,
you
need
to
install
those
dependencies
and
if
you
go
to
our
documentation
and
look
at
the
getting
started,
documentation
it'll
show
you
how
to
do
that
specifically.
A
But
I
want
to
just
point
out
that
for
this
project,
I've
included
the
SP
package,
which
is
all
the
SP
SharePoint
rest
endpoint
support
and
then
I
also
included
the
graph
one.
And
this
is
our
support
for
graph
calls,
and
this
is
not
in
the
sample
that
you'll
find
on
the
repository.
That's
why
that's
sort
of
new
for
today-
and
we
also
added
the
logging
package
in
V2.
The
logging
package
was
embedded
in
the
SharePoint
package
in
the
graph
package,
but
we've
separated
it
out
for
V3.
So
that's
a
separate,
install
now.
A
Okay,
so
we
have
our
packages
installed
and
it's
all
running.
So
we
know
everything
is
good
to
go.
So
now
we're
going
to
talk
about
this
config
file.
So
one
of
there's
essentially
two
ways
to
that.
We
recommend
that
you
bring
use
PNP
JS
in
your
Solution
by
one
either
creating
a
sort
of
a
config
file
or
a
container
for
all
of
your
pnp.js
calls,
or
that
you
create
a
service
I'm
not
going
to
demo
a
service.
A
Today,
I
will
say
that
a
service
is
how
I
do
all
of
my
coding,
but
that
doesn't
necessarily
work
for
everything
so
and
for
everybody
in
their
in
their
patterns
of
development.
So
that's
just
my
preferred
way,
but
here's
one
where
we're
going
to
use
a
config
file
and
so
what
a
config
file
essentially
is.
A
Is
it
a
way
for
us
to
consolidate
all
our
Imports
that
we're
going
to
use
in
one
place,
and
so
what
that
means
is
that
for
each
of
our
libraries,
our
SP
library
and
our
graph
Library,
we
have
packages
of
functionality
and
we
blocked
them
into
different
Imports
so
that
you
could
just
import
the
bits
of
functionality
that
you
need
for
your
project,
thereby
keeping
the
amount
of
code
that
you're
bundling
in
as
small
as
possible.
So
I've
included
all
the
stuff
that
I
need
for
the
SharePoint
rest
calls
that
solution
did
so.
A
We
need
these
Baseline
SharePoint
ones.
We
are
going
to
use
logging,
so
our
logging
package
is
imported
and
then
we
imported
webs
lists
items
and
batching,
because
I'm
going
to
show
you
batching
and
then
in
addition
to
that,
as
I
said,
we
I
included
graph.
So
one
of
the
things
I
want
to
point
out
right
now
is
that
if
we
were
just
using
SharePoint
and
not
using
the
graph,
then
this
import
right
here
where
it
says
spfx
could
just
be
that
we
wouldn't
need
this
additional
part
here.
A
This
additional
part
where
it
says
as
SP
spfx
is
sort
of
a
renaming.
So
in
the
PNP
SP
package
there
is
a
method
for
spfx.
That
ins
creates
the
behaviors
that
we
need
we're
going
to
give
it
a
different
label,
because
there
is
an
identically
named
one
in
our
graph
package
for
instantiating
graph
context
and
so
I'm
going
to
rename
that
one
to
graph
spfx,
because
I'm
going
to
use
both
libraries
so
now
I'm,
creating
globals
for
our
SharePoint
Factory
interface
in
our
graph
Factory
interface
and
then
I'm.
A
Creating
two
methods
here
that
I'm
going
to
export
so
I'm
exporting
a
constant
that
is
get
SP.
It
needs
the
context.
That's
the
web
part
context
passed
into
it
and
then,
assuming
that
the
context
isn't
null
it's
just
going
to
create
the
the
SharePoint
Factory
interface
that
we
need.
So
we
could
then
call
spfi.
A
We
say
we're
going
to
use
the
behavior,
the
SharePoint
spfx
Behavior,
which
establishes
our
context.
So
we
pass
the
context
to
it
and
just
to
illustrate
how
you
can
add
a
chain
additional
behaviors,
we're
going
to
add
dot
using
and
then
we're
going
to
pass
in
PMP
logging,
because
we
imported
that
and
set
our
level
our
level
for
when
we
want
logging
to
occur.
A
So
this
is
how
you
chain
behaviors
together,
and
if
you
look
at
our
documentation,
you
can
see
a
bunch
of
different
behaviors
that
we
provide
and,
of
course
you
could
build
your
own.
So
that
then
sets
up
this
SP
object,
which
is
a
global.
So
then
we
have
an
identical
method
for
getting
the
graph
context
and
again
it's
the
factory
interface
we're
using
our
graph
spfx
to
create
the
context
for
graph
and
I'm
using
logging
on
that
one
too.
It's
the
exact
same
thing:
okay,
so
let's
just
ignore
that
for
a
second
and
move
over.
A
Okay,
that's
the
big
change
from
version
2
to
version
three
is
that
those
objects
are
not
Global
anymore,
so
we
need
to
sort
of
create
our
own
Global
versions
of
them.
Okay,
now
that
that's
done,
we
can
just
jump
right
into
our
root
component.
So
this
is
our
root
component
that
we,
that
does
all
the
work.
This
is
maybe
not
how
I
would
do
it
in
production
and
I
want
to
kind
of
make
that
point
that
this
example
is
purely
met
as
an
example.
A
A
So
what
we
do
to
do
that
is.
We
have
this
SP
Factory
method
and
if
we
pass
an
existing
Factory
interface
into
it,
what
that
will
do
is
copy
all
the
behaviors
that
are
already
exist
on
the
SP
Factory
and
the
this
dot
underscore
SP
Factory
interface
to
the
new
one,
we're
creating,
which
will
include
our
context,
which
means
that
we
have
all
authentication
stuff
that
we
need
to
use
it
as
well
as
the
logging
that
we
had
added
in
that
original
one.
A
A
That
is
a
little
bit
more
clean
where,
if
there's
no
title
I'm
going
to
say
it's
unknown,
if
the
file
length
doesn't
exist,
I'm
going
to
set
it
to
zero,
just
some
cleanup
on
those
items,
and
then
this
is
the
added
thing
here:
I
added
a
new
method.
Here
again,
this
is
not
how
you
would
do
this
in
production,
I
added
a
new
method
here,
where
I'm
going
to
load
a
user,
and
this
is
where
I
wanted
to
just
demo
quickly.
That
I
can
make
graph
calls
here
as
well.
A
The
other
thing
that
I
want
to
show.
Let's
minimize
this
up,
is
go
back
up
to
our
render
method
and
just
show
that
here's,
where
I'm
rendering
that
display
name,
but
it
could
be.
You
know
any
of
the
other
properties
about
me,
including
about
me,
and
we
could
render
whatever
that
is
in
there,
and
this
is
where
I'm
rendering.
Then
the
items
now
I
have
that
button.
If
you
recall
where
I
was
going
to
update
the
titles,
so
let
me
come
down
here
and
just
look
at
what
update
titles
does
so
in
update
titles.
A
If
you
think
about
it,
we
have
a
whole
bunch
of
elements,
items
that
we
retrieved
from
the
document
library
and
it's
not
really
efficient
for
us
to
just
call
one
after
another.
Make
multiple
rest
calls
one
after
another
to
update
each
of
those
items,
so
in
this
case
we're
going
to
create
a
batched
instance.
So
now
I'm
going
to
take
the
SP
object
again
the
behavior
on
this
right
now.
The
behaviors
that
exist
on
this
object
are
the
context
for
security
and
logging.
A
So
now
I'm
going
to
say:
okay,
this
dot,
SP
and
then
one
of
our
root
methods
on
that
is
batched.
And
what
that
returns
is
what's
called
a
tuple
and
a
tuple
is
an
array
here
with
two
properties
in
it,
one
of
which
the
batched
SP
is
a
an
instance
of
the
the
SharePoint
factoring
interface,
but
which,
with
all
the
extra
needed
Plumbing
to
do
batch
requests.
And
then
a
second
thing
is
a
method
called
execute.
A
So
now
what
we're
going
to
do
is
I'm
going
to
just
go
clone
our
state
variable
with
items
in
it,
because
we
never
work
on
the
state
variable
directly
when
we're
we're
doing
work
like
this.
So
I'm
I'm,
using
a
little
shortcut
here
to
clone
that
and
then
I'm
going
to
Loop
through
each
one
of
the
items
and
make
a
a
call
but
I'm
going
to
use
the
batched
SP
as
the
call.
So
we'll
do.
A
So
this
is
an
array
of
the
updated
item,
results
and
I'm
going
to
push
each
of
the
results
onto
that,
so
that
they're
available
after
and
then
I'm
going
to
await
the
execute
method,
and
so,
when
I
await
the
execute
method
that
launches
all
that
batch
request,
that
I
created,
which
will
do
all
of
these
updates.
All
in
one
grouped
update
after
that,
I
then
remember
that
I
added
the
the
results
to
this
item
update,
result
array.
So
that
means
this
result
has
each
of
the
list
items
in
it.
A
So
if
I
then
Loop
through
the
results
and
do
the
result
dot
item,
this
gives
me
a
queryable
instance
of
the
item,
and
so
the
reason
we're
doing.
That
is
remember
that
when
I
got
the
items
from
the
the
list,
originally
I
used.
Caching,
and
so,
if
I
made
that
call
again
because
it's
the
same
endpoint,
it
wouldn't
know
that
it,
it
wouldn't
go,
get
a
new
version,
because
it's
cash,
so
we'd
have
to
clear
the
cache
Etc
et
cetera.
A
So
what
I'm
just
showing
you
here
is
that
we
can
use
this
item
result
since
the
batched
entry
didn't
have
the
caching
on
it.
Then
this
item
isn't
it.
It
is
not
batched,
but
it
can
be
used
to
go
and
fetch
the
item
and
ID
and
title
from
the
item
so
that
I
can
update
our
items
with
the
new
title
and
then
I
can
set
State
setting
the
new,
updated
items
because
I
cloned
them
so
I'm
going
to
set
them
back
to
State,
and
then
that
will
update
my
user
interface.
A
A
B
So
this
is
great
for
pmpj
Snippets,
but
going
on
what
you
said,
are
there
samples
available
where
people
can
see
the
production
code
to
make
sure
that
they're
structured
stuff
correctly?
So
you
called
out
something
in
here
which
was
about
the
craft
or
something
which
is
not
about
the
production,
but.
A
A
So
when
I
say
don't
use
this
as
like
production
code,
what
I
more
mean
around
that
is
this!
The
the
structure
of
the
code,
like
I,
just
wouldn't
put
a
lot
of
this
logic
about
reading
files
and
loading,
the
user
and
updating
the
titles
in
the
same
component
file
where
I'm,
rendering
the
UI.
That
was
more.
What
I
meant
by
that
and
then
the
other
part
about
the
loading
user
I,
probably
would
do
that
I
did
it
in
line
with
reading
the
file
sizes.
A
I
probably
do
both
calls
at
the
same
time
and
load
them
into
separate
variables.
So
I
wouldn't
be.
You
know,
I
I'm,
essentially
forcing
a
Serial
path
through
this.
That's
why
I
was
sort
of
saying
I
wouldn't
do
this
in
production.
I
wouldn't
call
do
a
bunch
of
asynchronous
calls
and
then
do
the
asynchronous
call
to
the
loading,
the
user,
because
they
don't
depend
on
each
other.
So
there's
no
sense
in
waiting
for
one
to
finish
to
do
the
other,
especially
when
you're
writing
asynchronous
code.
That
doesn't
make
a
lot
of
sense.