►
Description
In this 10-minute developer-focused demo, Sébastien Levert shows how to use the Microsoft Graph Toolkit SharePoint provider to access and leverage new functionality of Graph JS SDK in SPFx. A web part sample developed using React Framework showcases how to use the latest microsoft-graph-client in SPFx. The client enables throttling management (no 429s), Chaos management, uses latest types, getting RAW responses from API, Content-Type is already set for PUT, and a lot more! This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on May 20, 2021.
Demo Presenter: Sébastien Levert (Microsoft) | @sebastienlevert
Supporting materials:
• Article - Using the latest microsoft-graph-client in SPFx | https://www.sebastienlevert.com/2021/04/18/latest-microsoft-graph-client-spfx/
• Library - Microsoft Graph JavaScript Client Library | https://github.com/microsoftgraph/msgraph-sdk-javascript
• Sample - Graph MGT Client | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-graph-mgt-client
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
How
you
can
really
improve
your
sharepoint
framework
solutions,
utilizing
the
latest
microsoft
graph,
client
in
sharepoint
framework.
So
a
little
bit
about
me,
I'm
a
sharepoint!
I
I'm
a
recovering
sharepoint
dev
been
a
long
time.
Community
member
was
awarded
the
mvp
award
six
times
before
I
joined
microsoft
now
six
months
ago,
and
I
now
work
as
a
senior
program
manager
on
the
microsoft
graph
team,
a
little
bit
of
history
here
on
why
I
wanted
to
kind
of
bring
this
simple
that
I
built
a
couple
of
weeks
ago
to
your
attention.
A
First,
amazing
that
the
sharepoint
framework
has
been
supporting
the
microsoft
graph
since
2018.
So
since
in
one
of
the
early
versions
of
sharepoint
framework,
I
cannot
remember
exactly
which
one,
maybe
someone
in
the
chat
could
add
it
right.
There,
sharepoint
framework
has
been
supporting
the
graph
with
the
graph
client.
A
First.
Why
would
you
want
to
use
the
latest
well
first,
and
I
think
that's
the
most
important
one
is
to
basically
leverage
its
built-in
middleware
architecture.
What
does
it
mean?
It
means
that,
right
now
in
the
current
version
of
the
sdk,
that
is
in
spfx,
you
don't
have
retry
handlers.
You
cannot
create
chaos
in
your
apps
and
make
sure
that
they're
always
well
behaving
under
certain
circumstances,
especially
when
you're
about
to
hit
some
throttling
limits.
A
A
So
how
will
accomplish
this?
But
you
know
what
let's
close,
the
the
slides
now
and
let's
go
through
the
actual
code.
First
of
all,
we're
gonna
have
to
upgrade,
depending
on
which
version
of
your
rush
compiler,
your
your
hat,
to
leverage
some
some
of
the
latest
typescript
capabilities
that
are
required
because
we
are
going
to
use
for
a
second
time
today.
Mgt,
the
microsoft
graph
toolkit
microsoft
graph
toolkit
will
be
what
will
be
providing
the
capabilities
of
having
access
to
that
latest
version
of
the
sdk.
A
So,
let's
start,
let's
start
with
the
first
code
here.
So
basically,
the
first
thing
we're
going
to
do
is
when
our
web
part
will
get
initiated
or
initialized.
We
will
want
to
make
sure
that
we
set
that
our
global
provider-
this
is
provided
by
the
microsoft
graph
toolkit.
It
is
how
you
can
assign
kind
of
a
provider.
It
can
be
an
msl
provider
if
you're
working
in
regular
react
app,
but
when
you're
doing
sharepoint
stuff,
you
need
to
set
it
to
the
sharepoint
provider
in
by
passing
in
the
current
web
part
context.
A
Mgt
will
do
a
bunch
of
different
magic
right
there,
including
adding
the
right
version
of
the
sdk
making
sure
it's
all
authenticated
for
you,
so
you
don't
have
to
go
through
any
of
the
hoops
of
getting
an
access
token
to
microsoft.
Graph,
it's
going
to
respect
all
the
scopes
that
are
available
in
your
sharepoint
online
administration
portal,
where
you
can
see
all
the
different
api
access
that
are
being
used
or
through
the
web
parts
that
you
want
to
deploy.
A
Then
afterwards.
I
have
a
super
simple
graph,
client
here.
It's
that's
my
component.
It
there's
literally
nothing
in
there
a
simple
state,
a
component,
a
component
here
that
has
one
text
field:
that
is
the
query
or
the
api
request.
You
want
to
do
a
text
field
of
the
number
of
requests
you
want
to
emit
to
graph.
Here
it's
going
to
be
to
emulate
throttling
and
here
a
button
that
then
will
automatically
start
a
query.
So,
let's
start
with
this,
this
here
is
the
default
graph.
A
Client,
that's
how
the
calls
have
been
made
to
graph
historically,
so
you
get
the
graph
client,
you
get
the
client
and
once
you
get
it,
you
can
call
the
api
and
set
the
state.
So
let's
go
here
and
let's
go
see
what
it's
in
here.
So
let
me
reload
that
that
guy
just
to
make
sure
we
have
everything,
I'm
going
to
do
a
and
here
you're,
going
to
see
on
the
right
it's
going
to
showcase
the
different
events.
A
So,
basically,
I
just
filter
on
event
with
status
quo
equals
200.,
so
the
ones
that
are
completing.
So
let
me
go
here.
Let
me
do
slash
me,
slash
events,
I'm
going
to
hit
run
query,
and
now
I
got
a
200..
That's
great!
That's
what
we
want,
but
now,
if
we
want
to
go
a
little
bit
further
and
start
challenging
this,
let's
do
let's
do
the
following
now,
let's
do
something
like
I
want
to.
A
Let
me
I'm
just
going
to
copy
paste
some
code
from
a
magic
notepad
that
I
have
on
the
other
screen
this
here
this
year,
what
it's
going
to
do
it's
going
to
iterate
the
number
of
time
that
I
have
in
my
number
of
requests
and
we'll
emit
these
calls
to
microsoft
graph
using
the
graph
client.
So,
what's
going
to
happen,
let
me
save
that
I'm
just
going
to
make
sure
that
my
webpack
has
been
working
excellent.
So
now
it's
reloaded
now.
A
If
I
come
here
and
I
hit
reload
on
this
screen,
I'm
going
to
do
exactly
this
call,
but
I'm
gonna
do
it
a
thousand
times
graph,
especially
on
the
on
on
some
areas
of
graph,
especially
here
on
the
mailbox
has
some
throttling
limits.
You
cannot
call
graph
a
thousand
times
a
second
expecting
to
receive
results.
What
you're
going
to
receive
is
a
what
we
call
a
429
or
we're
going
to
tell
you
you're,
calling
graph
a
little
bit
too
much.
A
Can
you
back
off
just
a
little
bit
and
come
back
to
graph
in
a
couple
of
seconds?
So
now,
if
I
emit
this
call
a
thousand
times
to
graph
you're
going
to
see
a
bunch
of
calls
being
emitted
and
they're
going
to
be
emitted
in
in
one
after
the
other,
and
this
is
doing
that
in
parallel,
because
I'm
using
a
map
function
here,
this
is
going
actually
to
run
all
of
these
in
parallel,
not
sequentially.
So
we're
not
I'm
not
waiting
for
the
previous
call
to
complete.
A
What's
going
to
happen
here
is
you're
going
to
start
to
see
quite
soon
a
series
of
429
happening
here,
and
these
429s
will
not
resume
you're
going
to
get
the
request
you're
going
to
get
the
errors,
but
the
graph.
The
way
that
the
current
sdk
that
is
built
into
spfx
is
built
you're
not
going
to
get
the
retry
that
exists
in
the
sdk.
A
So
let
me
just
change
that
up
and
do
exactly
the
same
thing
that
I'm
doing
and
doing
this
and
now
what
I'm
doing
instead
of
calling
the
the
previous
graph
client
I'm
just
going
to
bring
in
the
last
here.
Instead
of
using
this,
ms
graph
client
factory
get
client,
I
am
going
to
use
the
global
provider
that
I
set
earlier
dot
graph
that
api,
and
here
I
will
be
able
to
pass
in
the
the
url.
A
A
I
can,
through
the
api
here
I
can
add
some
middleware
options,
so
it
says
here.
I
want
you
to
wait
five
seconds
and
retry
up
to
10
times
for
each
queries
that
will
be
in
there.
So
it
means
that
you
can
even
instruct
some
customized
version
of
that
retry
handling.
Now,
if
I
hit
save
I'm
going
to
do
a
small
reload
here
and
now
yes,
we
will
be
having
429s.
I
will
still
be
getting
a
couple
of
for
29.
That's
what
graph
is
all
about.
A
So
that's
what
we
want,
but
in
the
end
all
the
1
000
queries
that
we're
gonna
do
on
graph
will
indeed
complete.
So
if
we're
looking
here-
and
we
look
at
the
number
of
queries
here
when
it's
going
to
end,
we
will
be
at
1
000
out
of
x
number
of
requests
compared
to
what
we
had
earlier,
which
is
just
potentially
700
or
750..
A
So,
if
you're
doing
craft
work
with
spfx,
I
really
recommend
to
use
that
approach.
That
way,
you
don't
have
to
manage
the
429s
yourself.
You
can
leave
that
to
the
sdk
without
really
changing
any
type
of
code
in
your
stuff.
As
it's
basically
all
there
for
you
really
really
simple
using
the
microsoft
graph
toolkit,
so
that's
what
I
wanted
to
share
with
you
all
today,
all
right!
Thank
you
very
much
seb
for
that.