►
Description
This PnP community demo is taken from the bi-weekly SharePoint Developer Community – SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded on February 13, 2020
In this 15-minute demo, Darrel Miller from the Microsoft Graph team and who presented in the January 30th client-side call, walks viewers through selected functionality found in the 2 Microsoft Graph libraries - Graph Types (the auto-generated library) and Graph Client (js library), he manages. On behalf of the Graph team, Darrel would very much appreciate it if PnP Community members would evaluate capabilities in either Graph library and provide feedback on functionality that may not translate well to SPFx.
Presenter:
• Darrel Miller (Microsoft) | @darrel_miller
Supporting materials:
• Microsoft Graph JavaScript Client Library | https://www.npmjs.com/package/@microsoft/microsoft-graph-client
• Microsoft Graph TypeScript Types | https://www.npmjs.com/package/@microsoft/microsoft-graph-types
• PnP client-side session Darrel delivered on January 30th | https://www.youtube.com/watch?v=Fls5lDsiBJ4
• React portal | https://developer.microsoft.com/graph/get-started/react
• React Graph Tutorial | https://docs.microsoft.com/en-us/graph/tutorials/react
All SharePoint PnP Developer Community demos: https://www.youtube.com/playlist?list=PLR9nK3mnD-OWSbg0o9a7mx_E7s2u7h_o2Learn more about the SharePoint developer community at: http://aka.ms/sppnp.
A
So
no
slides
few
pages
and
some
demo
code
and
I'm
gonna
start
up
with
a
few
caveats
here.
So
this
is
one
of
those
few
calls
where
I'm
on
the
call
and
I'm
happy
that
I
can
say:
I
am
a
program
manager
on
the
Microsoft
graph
developer
experience
team
I
am
not
wearing
my
developer
hat
today
because,
as
you
will
quickly
learn,
my
experience
in
JavaScript
is
spectacularly
thin.
A
I'm
also
going
to
say
my
experience
and
understanding
of
both
SharePoint
FX
and
SharePoint
are
also
spectacularly
weak.
So
you
might
ask
the
question:
well
why
on
earth
are
you
here
talking
to
us
and
really
this?
This
search
here
in
NPM
is
kind
of
the
answer
to
that
question.
So
the
Microsoft
graph
types
and
the
Microsoft
graph
client
library
are
two
libraries
that
I
am
the
PM
for
and
our
graph
SDK
team
is
the
team
that
builds
these
libraries
you'll
also
notice.
A
For
the
PM
PJs
library,
and
yet
just
because
of
the
way
things
happened
and
historically
we
have
this
graph
client
that
our
Microsoft
team
owned
and
if
you
were
on
the
call
from
a
few
weeks
ago,
I
talked
about
the
work
that
we
were
looking
into
doing
with
regards
to
trying
to
develop
a
fluent
API
and
auto-generated
in
the
same
way
that
we
do
for
other
libraries
and
how
we
were
looking
in
to
try
and
find
a
way
of
doing
that
generation.
So
it
can
also
work
with
the
peon
PJs.
A
So
one
of
the
reasons
that
I'm
here
and
kind
of
showing
you
the
what
we're
doing
the
Microsoft
graph
client
is
largely
to
learn
from
your
community
and
to
understand
how
we
can
improve
and
how
we
can
stop
duplicating
effort,
because
I
hate
the
fact
that
we
have
a
situation
where
we're
doing
the
same
things.
It's
the
same
as
what
vase
was
just
talking
about
the
Stardust
and
they
the
fluent
thing.
A
It
makes
no
sense
to
do
two
different
things
and
then
have
developers
have
to
make
decisions
as
to
which
one
to
I
am
do
I
have
to
use.
So
I
want
to
get
more
involved
in
this
community
to
understand
what
your
needs
are
to
try
and
understand
more
about
the
problems
that
you're
trying
to
solve,
so
that
we
can
make
sure
that
you
can
learn
from
p.m.
PJs
and
we
can
do
things
that
are
closer
there
and
maybe
hopefully
vice
versa.
A
We
can
some
of
the
things
that
we
build
will
be
valuable
to
the
the
SharePoint
community.
Also,
so
I
mentioned
these
two
libraries
that
we
have
and
I
don't
have
access
to
the
chat.
So
if
people
are
going
to
be
asking
questions,
I'm
not
going
to
be
able
to
see
them
so
feel
free
anybody
to
come
off
mic
and
yell
at
me
with
questions
as
we
go
along.
So
there's
two
libraries
and
I'll
explain
the
difference
between
the
two
of
them.
A
The
Microsoft
graph
client
is
a
JavaScript
library
and
I'll,
as
Sebastian
mentioned,
which
he
hurtfully
called
the
old
library,
but
I
understand
it
is,
has
been
around
for
a
little
while
this
is
the
library
that
has
that
syntax
have
been
able
to
say,
client,
API
and
then
has
all
the
OData
type
functions
and
you
can
install
it
for
maybe
NPM.
You
can
also
install
it
from
Jas
deliver
and
there's
instructions
here.
Basically,
how
you
set
this
up
and
to
be
able
to
make
calls
I'm,
gonna
scroll
down
here,
hopefully
somewhere
down
here.
A
It
Thaksin
shows
you
how
to
go
and
retrieve
email
messages
to
how
to
send
email
messages,
and
that
kind
of
thing.
A
couple
of
things
to
point
out
here
is:
we
have
recently
introduced
these
things
called
authentication
providers
which
are
wrappers
around
the
Microsoft
off
library
and
in
the
demo.
I'll
show
you
how
that
plugs
into
the
overall
setup,
so
this
is
kind
of
a
securely
JavaScript
way
of
making
calls
to
graff
and
constructing
your
eyes
and
being
able
to
get
at
the
json
response
body.
A
But
really
it
is
just
a
JSON
blob
or
a
JavaScript
object.
At
that
point,
the
next
library
is
the
one
that
we
auto-generate,
which
is
the
Microsoft
graph
type
script
type.
So
we
use
the
metadata
of
Microsoft
graph
in
order
to
generate
a
set
of
model
so
that,
if
you
are
working
in
typescript,
you
get
this
strongly
typed
experience
to
be
able
to
see
what
the
properties
are
on
all
the
different
classes
and
as
Microsoft
graph
grows
and
grows,
and
we
add
more
capabilities
in
there.
A
This
just
provides
that
nice
discovery
mechanism,
and
this
is
available
both
on
NPM
and
available
on
definitely
typed,
and
there
is
source
code
available
that
allows
you
to
get.
The
beta
libraries
were
not
currently
publishing
the
beta
libraries,
but
that's
something
that
we
need
to
get
onto
and
get
those
published
to,
so
that
people
can
experiment
with
the
the
beta
capabilities
that
are
available.
A
Application
and
I
went
to
the
graph
developer
portal
and
I
went
to
the
getting
started
and
I
went
to
find
the
react
app
and
you
can
actually
download
it
all
as
a
complete
app
or
you
can
just
walk
through
it
and
say,
create
your
project
and
it
walks
you
through
step
by
step
as
to
how
to
do
it,
how
to
register
the
pour
the
app
in
the
portal
and
how
to
get
some
information
and
I'm
just
going
to
show
you
running
you
here.
So
this
is.
A
Events
on
your
calendar
and
I
went
in
just
to
prove
that
I
could
actually
add
a
tab
and
I'm
not
completely
hopeless
in
JavaScript,
I
went
and
rent
read
all
of
my
messages
in
my
email
inbox
right.
Let's
just
take
a
quick
look
at
what
that
code
looks
like,
so
it
was
created
from
from
basically
just
using
create
react,
app
and
then
copying
and
pasting
stuff
in
from
the
the
getting
started,
but
the
getting
started
actually
does
a
bit
of
a
kind
of
what
I'm,
considering
the
an
anti-pattern.
A
A
So
I
did
some
refactoring
on
this
library
and
if
we
look
at
the
class
app
and
look
at
the
constructor
of
it,
one
of
the
first
things
that
you
have
to
do
if
you're
working
with
AM
Sal
is
set
up
a
user
agent
application
to
allow
you
to
do
an
implicit
flow
login
and
we
pull
the
app
ID
from
the
client
ID
from
the
config
file
and
pull
the
client
ID
from
the
config
file
and
the
redirect
URL.
And
then
we
go
and
say
well.
A
Have
you
previously
logged
in
because
the
one
nice
thing
about
emcell
is:
it
has
a
token
cache
and
if
you've
previously
logged
in
it
will
remember
that
and
it
will
pull
out
the
user
if
you've
already
logged
it.
And
then
we
go
and
get
a
client
application.
And
this
is
the
same
client
application
that
if
you
use
from
the
SPF
X
that
you
do
API
we're
just
creating
it
manually
ourselves.
A
This
way
and
I'll
show
you
how
I
do
that
in
the
get
client
method
which,
if
I
scroll
down
just
a
little
bit
over
here,
there
is
a
static
factory
method
and
we
can
say
in
it
with
middleware,
and
this
is
one
of
the
pieces
of
value
the
library
brings.
Is
it
has
this
middleware
pipeline
that
comes
out
of
the
box
with
handling
retries
and
dealing
with
making
sure
that
you
don't
read
our
tokens
across
across
domains?
A
Although
I'm
wondering
whether
in
JavaScript,
that
is
actually
an
issue,
it
certainly
is
in
some
of
the
other
languages,
and
what
we've
tried
to
do
is
across
the
languages,
provide
this
consistent
pattern
of
using
these,
these
middleware
pipelines.
So,
in
order
to
get
authorization
and
to
be
able
to
get
the
tokens
we
plug
in
this,
what
we
call
an
implicit
emcell
authentication
provider
with
the
particular
scopes
that
we
you
will
be
using
in
order
to
make
the
graph
API
calls
and
we
pass
this
off
provider
into
the
graph
client.
A
And
we
return
that
graph,
client
and
then
I,
basically
just
set
it
as
a
property
on
the
app
object
and
that
property
is
going
to
get
passed
down
into
various
react
components
that
we
use
throughout
the
application.
So
one
of
the
first
things
that
we
do
as
soon
as
you
have
sign
gain
is
go
and
do
get
user
profile,
and
if
I
just
go
to
the
definition
here,
we
call
a
method
called
get
user
details
which
lives
in
a
service
library
and
the
only
reason.
A
It
was
kind
of
two
reasons
that
I
created
this
service
library.
One
is
because
that's
kind
of
how
the
the
starter
app
showed
it.
But
the
other
reason
is
because
I
actually
converted
into
a
typescript
library
just
to
kind
of
give
a
feel
for
how
the
typescript
interacts.
So
if
I
flip
over
to
get
user
details,
this
is
in
this
grass
service
library.
A
You
can
see,
get
user
details
just
takes
that
client
and
calls
the
API
and
returns
the
user,
and
the
value
here
is
oh,
no.
The
point
I
was
going
to
make
is
this
is
set
up
currently
as
a
set
of
functions
that
you
pass.
The
client
in
it
would
probably
be
a
better
design
to
actually
just
create
this
as
a
service
where
you
pass
the
client
into
the
constructor
of
that
service.
So
it's
actually
a
class
and
you
don't
have
to
pass
the
client
in
on
every
single
action.
A
So
anyway,
this
returns,
the
user,
which
shows
the
name
and
you
can
get
the
profile
photo
and
for
things
like
that,
you
can
see
here
how
we
are
getting
the
events
for
the
calendar,
and
you
can
also
key
here
how
we
were
getting
the
messages
and
we
are
also
building
some
other
higher-level
capabilities
around
these
libraries
and
one
of
those
pieces
of
functionality
we
built.
Is
that
the
problem
with
them?
You
do
get
messages.
A
Is
you
only
get
like
the
first
page
and
if
you
want
to
get
more,
you
have
to
follow
that
next
links,
then
you've
got
to
go
and
get
the
next
link
and
call
it
and
call
it
again
and
again
and
again
so
in
the
second
implementation.
The
method
I
have
get
all
messages
where
we
get
the
first
page,
but
then
we
pass
it
into
what
we
call
a
page
iterator.
A
So
you
just
pass
the
collection
in
and
we
have
a
callback
that
adds
all
of
the
messages
into
a
collection
and
then
returns
all
of
them
and
and
we
can
do
a
count
and
limit
it
so
that
we
don't
end
up
returning
too
many.
But
this
page
iterator
class
is
just
a
way
of
making
it
easier
to
deal
with
these
page
collections.
A
There
are
a
few
other
classes
that
we've
started
to
build
in
order
to
deal
with
these
higher-level
scenarios,
where
you
actually,
instead
of
just
making
one
call,
you
want
to
make
a
multiple
calls
into
achieve
a
higher
level
goal
and
I
don't
have
that
in
this
source
code,
but
I'm
just
gonna
flip
over
to
some
preview
documentation.
This
should
be
up
fairly
soon.
A
This
is
the
graph
requests
patching,
and
we
touched
on
this
very
briefly
in
the
fluent
discussion
last
week,
because
I
know
PM
pjs
has
a
very
similar
way
of
doing
this,
and
it
would
be
great
to
align
what
we're
doing
here,
especially
because
I
know,
there's
on
the
that
there
are
plans
of
adding
some
extra
capabilities
into
batching
on
the
graph
and
again
I.
Don't
want
us
to
both
have
to
implement
the
same
mechanism
twice,
but
the
idea
here
is
you
create
a
request,
object.
A
This
is
going
and
getting
the
profile
photo
request,
and
then
here
in
this
case,
is
a
little
bit
of
a
strange
example.
We
create
we
go
get
it
and
then
we
we
request
the
photo
and
then
I
think
we
upload
the
photo
right
afterwards,
and
but
we
create
these
multiple
of
requests,
convert
them
into
batch,
request,
steps
and
then
package
them
all
up
into
a
single
batch
request.
Content
which
is
over
here
so
here,
are
the
different
steps
that
have
been
put
into
the
batch
request,
content,
object
and
then
just
using
client
at
API.
A
We
pass
it
to
the
dollar
batch
endpoint
and
pass
that
entire
content,
so
this
is
just
a
wrapper
around
making
it
easier
to
do
batch
calls,
and
the
one
last
example
I'll
show
is
a
large
file
upload
mechanism,
and
this
is
a
task
has
been
built
and
we
we
made
this
available
for
both
onedrive
and
SharePoint,
and
also
now
you
can
upload
large
mail
attachments.
So
you
create
a
task
object
and
you
pass
it
in
just
this.
A
So
this
is
another
piece
of
functionality
that
layers
some
capabilities
on
stop,
so
that
was
really
all
I
wanted
to
show
is
just
a
case
of
if
you
want
to
understand
how
that
graph
client
works
outside
of
the
SharePoint
world
and
outside
of
SPF
X.
This
is
how
you
can
go
around
and
go
and
play
around
with
it,
and
we
certainly
are
looking
for
feedback.
We
want
to
know
what
about
it
won't
work
well
for
the
the
in
the
SharePoint
world.
A
What
what
stuff
we
can
incorporate
and
help
moving
forward
with
regards
to
consolidating
our
efforts
between
P
and
PJs
and
the
graph
client.
So,
hopefully,
that
gives
you
a
little
bit
of
perspective
of
what
you're
doing
and
hopefully,
everybody's
on
board.
It
was
about
the
fact
that
we
don't
want
to
write
all
of
this
code
multiple
times
and
with
that
I
will
hand
it
back
to
you
Patrick,
fantastic
thanks
Darrell
for
showing
that.