►
From YouTube: React CHS JS Meetup 4/1/2021
Description
Scott Sandman presents React Query
A
This
is
the
charleston
js
react
meetup
and
we've
got
a
presentation
today
on
react,
query,
scott
sandman
will
be
doing
the
presentation
and
then
we'll
open
it
up
for
discussion
or
if
anyone
has
any
kind
of
lightning
talks
they
want
to
share.
That
would
be
great
too,
but
yeah
so
I'll
go
ahead
and
pass
the
the
torch
over
to
scott
and
let
him
get
started
thanks
for
coming.
A
B
B
Essentially,
I
was
looking
for
ways
to
clean
up
the
some
of
my
front
end
code
and
how
I
was
handling
state
and
I
came
across
react
query
and
when
tom
mentioned
it
I
dove
in
to
see
what
it
was
about.
Especially
the
statement
you
see
here.
The
separation
of
client
and
server
state
react.
Query.
Is
the
tanner
linsley's.
B
B
B
B
It's
it's
passing
a
function
basically
which
fetches
our
data
or
throws
an
error
if
it
doesn't,
if
it
can't
retrieve
that
data
and
it
comes
pre-configured,
but
it
is
also
very
highly
configurable,
just
a
few
of
the
features
it's
of
it's
back
end.
Agnostic
really
doesn't
care
where
your
api
is
coming
from.
A
B
Request
cancellation,
prefetching,
I'm
sure
you
guys
have
read
the
list
already
by
now.
There's
a
lot
of
cool
things
on
here
and
pretty
much
everything
you're
seeing
on
the
screen
is
coming
out
of
the
box.
It's
ready
to
go
from
word
one
a
few,
and
these
are
tanner
words,
important,
aggressive,
but
same
defaults.
B
So
out
of
the
box,
the
hooks
use,
query
and
use
infinite.
Query.
Consider
cache
data
scale
immediately
is
changing
it
real
quick,
and
I
will
show
you
how
we
can
modify
that
and
set
it
to
what
we
want
it
to
be,
if
something
other
than
an
immediate
stale
inactive
queries
are
garbage
collected
after
five
minutes
again.
This
is
going
on
in
the
background.
B
If
you
don't
want
to
change
that,
it's
already
set
up
for
you
failed
queries
are
silently
retried
three
times
with
an
exponential
back
off
delay.
That
is
also
customizable.
You
can
change
that
into
a
linear
delay.
You
can
change
the
exponential
delay
if
you
want,
or
you
can
just
simply
put
in
a
straight
delay
and
then,
according
to
tanner's
data,
results
are
structurally
shared
to
see
if
data
has
changed,
if
not
data
reference
remains
unchanged
according
to
tanner
99.9
percent
of
time.
B
B
B
B
B
C
B
B
B
B
Just
to
let
you
know
there
are
20
returns
that
can
be
extracted
from
use
query
alone,
just
this
single
hook
as
far
as
options
go
for
the
use
query.
There
are
24
of
those,
so
there's
a
lot
of
configurability,
a
lot
of
stuff
that
you
can
handle
on
your
own.
If
you
choose
to
do
so
and
don't
want
to
use
auto
box
settings.
B
These
three
show
names
right
here,
pretty
straightforward
stuff
right
out
of
the
box,
as
we
got
into
the
use
query
hooked.
The
first
thing
that
we
have
here
is
a
query
key.
These
become
very
important
as
you're.
Moving
along
query
keys
are
how
your
data
is
identified
in
the
cache,
so
we'll
get
a
little
bit
deeper
into
those
as
we
get
into
some
other
examples,
but
just
know
that
you
will
always
have
a
query
key
and
then
from
there
we're
just
passing
it.
B
B
B
B
B
So
now
in
the
default
query
component,
I've
brought
in
use,
query
and
use
query
client,
so
we
would
pass
the
client
down
through
the
provider,
so
all
I
have
to
do
is
set
it.
The
query
client
use
the
query
client
here
and
now
all
I
need
to
pass
into
my
use
query
because
of
the
default
query
function
is
the
key.
B
So
from
that
key,
I'm
going
to
be
able
to
get
the
data
out
that
I
am
looking
for,
and
so
now
you
can
see
that
we
have
a
whole
list
of
shows
here.
I
believe
it
goes
about
240
deep,
so
the
benefit
of
using
something
like
the
default
query,
in
my
mind,
is
if
you
have
some
an
app
that's
similar
to
this
where
front
end
user
is
just
getting
a
lot
of
data
and
you
have
the
same
url
basically,
except
for
a
few
api
changes
on
the
back.
B
B
Moving
on
from
there
react
query
has
their
own
independent
dev
tools
set
up,
I'm
just
gonna
uncomment
those
right
now.
This
is
also
highly
customizable,
when
I
show
it
to
y'all
I'll.
Tell
you
about
some
of
the
things
that
you
can
change
right
now.
I've
set
initial
is
open
to
be
false,
so
it
will
be
closed
when
I
open
it
up
but
react
query.
Dev
tools
can
also
be
inserted
into.
B
Your
application,
while
you're
in
development
as
a
component
itself,
so
where
it's
actually
moving
around
inside
as
you're
scrolling,
not
sure
who
wants
to
use
that,
but
it
is
available
to
you
so
when
we
get
this
opened
up,
we're
taking
a
look
at
dev
tools.
Here
you
can
see
the
query
key
that
I
passed
in
and
then
you
can
see
where
the
data
came
in
and
then
in
the
query
explorer.
We
have.
You
know
our
default
options,
cache
time
and
some
other.
B
B
B
So
I've
written
a
few
hooks
here.
I
have
a
search
hook
and
a
show
by
id
hook
here,
they're
coming
through
this
hooks
and
cache.
So
there's
a
little
bit
more
going
on
in
this
one
than
we
had
yoga
once
I
did
for
the
first
time
have
to
use
some
state
from
react.
This
is
merely
to
handle.
Client
state
has
nothing
to
do
with
our
global
state.
I'm
gonna,
download
or
use
the
query
client
again,
and
then
I've
brought
in
two
hooks.
B
B
B
B
So
I
used
red
to
make
it
a
little
more
obvious
but
well.
I've
gone
used
that
query
client
to
go
and
take
a
look
in
the
cache
and
told
it
that
I
want
to
look
at
the
key
show,
and
I
want
to
specifically
look
at
the
id
of
the
specific
link
that
I
just
clicked
and
if
that
has
been
saved
in
the
cache,
I
want
to
change
it
to
color
red.
B
So
it's
giving
you
some
really
deep
finite
control
over
how
you
want
to
handle
your
client-side
state
as
well
as
your
server-side
state.
As
far
as
visually,
it
really
digs
deep
and
can't
even
get
into
the
number
of
you
know,
returns
and
options
that
are
available
and
that
stuff
there's
a
lot
pretty
similar
to
the
use.
Query
one
so
very
similar.
B
B
So
the
other
hook,
so
I
just
took
the
id
from
the
show,
passed
it
back
down
into
this
next
hook,
which
is
you
show
query
to
use
the
id
in
order
to
pull
up
the
episodes
for
those
shows
again,
you
can
see
very
intuitive
code,
not
a
lot
of
code
at
all.
To
make
that
happen,
everything
behind
the
scenes
is
basically
doing
right
by
us.
At
this
point
there
isn't
a
whole
lot
that
we
have
to
add
or
do
to
get
the
data
that
we
need
or
to
handle
it.
B
So
react
hook
in
and
of
its
hooks
and
react
in
and
of
itself.
You
could
take
a
lot
of
these
different
hooks
and
you
can
manually
just
put
them
side
by
side
and
call
them
and
get
the
data
that
you
need,
and
that
would
be
fine,
but
if
you
need
that
to
be
dynamic
or
you
have
a
different
number
of
calls
each
time
that
is
against
the
laws
of
plugs-
that's
not
something
that
is
going
to
be
allowed.
However,
mr
linsley
has
made
it
possible.
B
B
If
you
need
it
in
your
function,
that's
kind
of
the
rule
of
thumb,
that's
how
everything
again
is
identified
in
the
cache
for
you
and
then
from
there.
I
just
needed
to
map
over
the
data
in
order
to
get
it
to
show
you
some
stuff,
and
let's
take
a
look
at
that.
There
are
the
three
shows
I've
had
a
canadian
sense
of
humor.
B
C
B
Think
that's
the
parallel
queries
I
think,
have
a
lot
of
some
applications,
not
a
lot
of
application,
but
some
application
this
down
here,
I'm
not
going
to
implement
this.
This
is
actually
code
that
I
have
live
right
now
for
a
project
that
I'm
working
on.
I
just
wanted
you
just
to
show
you
a
different
way
that
use
queries
can
actually
be
handled,
so
I'm
just
using
an
object
platform
and
directly
passing
in
a
query
key
and
then
the
function
I
want
to
execute
so
use.
B
B
B
B
B
So
again,
it's
not
taking
us
a
whole
lot
of
code.
In
order
to
accomplish
this,
I
do
have
a
local
state
that
I'm
using
to
keep
track
of
our
page
number
and
then
I'm
also
bringing
in
query
client
again.
I
will
show
you
what
I'm
using
that
for
here
in
just
a
moment,
so
same
thing,
we're
extracting
data,
I'm
extracting
one
more
piece
of
data
with
this
particular
one.
B
B
So
then
active
will
stay
in
the
cache
and
won't
be
garbage
collected
for
five
minutes
based
on
default
settings.
If
we
take
a
look
at
page,
one
we're
immediately
stale,
so
in
a
lot
of
applications,
this
probably
isn't
ideal
depending
on
you
know
your
user
case
and
how
much
you
need
data,
but
in
a
situation
like
this,
if
I
was
to
leave
and
go
here
and
then
come
back,
it's
refetching
automatically
on
window
focus,
and
so
that
call
is
being
made
back
to
the
server
again.
B
B
B
If
that's
something
that
you
don't
need
for
your
particular
app.
If
it's
okay,
that
your
app
doesn't
refresh,
so
you
can
see
it'll
go
stale.
So
if
I
leave
now
and
come
back
to
it,
it
remains
stale.
Now
it's
not
making
that
call
again
and
it'll
remain
stale
until
it's
told
to
re-fetch
either
based
on
the
cash
going
using
up
its
time
limit,
or
you
make
some
sort
of
call
that
refreshes
that
data
for
you.
B
Is
on
success
so,
if
you're
doing
something-
and
you
want
to
do
something
immediately
on
the
success
of
receiving
your
data,
you
can
pass
it
through
right
there
on
options
and
it'll
go
ahead
and
take
care
of
it
right
there
for
you,
I
think
again,
that's
a
really
neat
feature
to
have.
We
also
can
do
the
same
thing
with
on
air.
B
B
B
And
you
can
see
that
that
didn't
take
quite
as
long.
You
can
also
change
retry
to
infinite
and
it'll
just
keep
going
and
going
and
going
until
you
get
your
data,
but
this
is
also
in
this.
Retry
would
be
where
you
can
set
your
your
exponential
delay
or
your
linear
delay
can
all
be
done
right
in
here,
or
you
can
just
simply
set
it
to
true
and
it'll
also
keep
retrying
over
and
over
again
until
it
has
success.
B
And
there
you
can
see
we
have
our
data
again.
It's
remaining
fresh
react.
Query
also
comes
with
mutations.
I
didn't
I
haven't
I've
taken
a
dive
into
the
mutations,
yet
there's
a
lot
going
on
on
the
on
the
query
side
of
it,
and
I've
been
spending
a
lot
of
time
in
there
making
sure
that
I
have
a
pretty
good
understanding
of
that.
At
this
point
I
am
pretty
much
a
fan.
B
B
A
A
C
B
A
C
B
B
A
B
B
It
would
still
be
viable,
but
as
far
as
you
know,
mentally
now,
having
the
separation
of
client
and
server
state,
I'm
pretty
sold
that
just
from
you
know
my
perspective,
it
just
cleans
things
up
enough
for
me
that
you
know
I
liked
react
before
a
lot
and
I've
used
it
pretty
much
exclusively
through
the
past
year
or
so,
and
I
had
some
frustrations
as
of
late
with
you
know
not
clean
code
and
things
getting
a
little
jumbled
on
me
and
running
across.
This
is
just
it's.
B
B
A
A
A
All
right,
well,
I
will
put
my
thinking
cap
on
feel
free
to
hit
me
up
next
week,
we'll
be
talking
about
svelt
and
the
new
spelt
kit
release.
Do
a
quick
demo
of
that
and
then
you
know
we'll
have
react.
I
think
it'll
be
in
in
may
or
next
or
probably
the
end
of
april.
Next
react
meetup
and
look
forward
to
seeing
you
guys
next
time.
Thanks
again
scott
awesome
job
and
I
think.