►
From YouTube: 3/11 Svelte/Vue Meetup for Charleston JS
Description
3/11 Svelte/Vue Meetup for Charleston JS, Tom Wilson presents Svelte-Query a Server Query/State management tool for Svelte
https://sveltequery.vercel.app/
You can check out a little more polished demo here
https://www.youtube.com/watch?v=p3bCvBF7LHo
A
And
this
is
the
svelt
view
edition
of
the
charleston
js
meetup,
so
this
year
we're
doing
the
meet-up
30-minute,
meeting,
30
or
40
minutes
every
week,
and
I
think
we
kicked
it
off
with
kind
of
node
a
few
weeks
ago.
Then
we
did
react
and
today
we're
doing
vue
and
svelte
and
I'm
trying
to
get
presenters
queued
up
but
was
unable
to
get
one.
So
I'll.
A
That
can
really
be
a
pain
to
manage
and
you
can
do
it
all
kinds
of
ways
right
from
using
tools
like
redux
or
tools
like
mobx
and
some
folks
actually
use
graphql
and
apollo
clients
to
help
with
with
this
challenge.
But
there's
a
new
kind
of
pattern
out
and
it
started
with
react.
Query
and
actually
in
our
next
react.
A
A
A
A
So
one
of
the
things
that
it
does
is
it
actually
compiles
into
a
small
bundle
and
the
framework
goes
away,
so
the
bundle
sizes
are
super
small
and
results
in
really
fast
performance,
and
so
here's
like
a
very
simple
swell
app
over
on
the
right
here.
You
have
a
script.
You
declare
your
variable
and
then
you
use
the
curly
braces
to
reference
it.
A
So
if
I
change
that-
and
you
can
see
it
just
flows
and
hopefully,
as
I
go
through
this
demo,
you'll
get
an
idea
of
how
swell
works
today,
I'm
going
to
talk
about
spelt,
query
and
spelt.
Query
really
makes
it
easier
to
load
data.
It
handles
caching,
multiple
requests
updating
on
a
date
knowing
when
your
data
is
out
of
date
and
performance,
optimizations
and
managing
memory
and
garbage
collection
and
memoizing.
So
you
get
a
lot
out
of
the
box
with
sveltequery,
and
basically
all
you
have
to
do
is
give
it
a
promise.
A
A
One
of
the
things
that
we'll
do
with
swelt
query
is
we'll
include
this
query,
client
and
query
client
provider
component.
So
we
import
those
in
and
that
kind
of
sets
the
cache
and
all
of
the
kind
of
error
handling
for
this.
So
we
wrap
our
entire
kind
of
app
or
all
our
routes
within
this
query,
client
provider
component-
and
we
pass
the
query,
client
kind
of
instance.
A
And
this
is
where
we're
actually
making
the
fetch
call.
So
we're
making
this
fetch
call
in
here
and
we
pull
in
use,
query
and
use.
Query
is
a
hook
if
you're
familiar
with
react
hooks.
Basically,
it's
going
to
to
run
in
a
reactive
kind
of
state
and
on
on
line
three.
We
call
use
query
and
we
give
query
a
key,
and
this
key
helps
it
remember
that
this
request
is
unique.
A
And
if
it's
success
we're
going
to
display
the
username
in
email
and
I've
kind
of
already
wired
this
up.
So
you
should
be
able
to
see
the
loading
and
then
we
have
the
users
and
that's
kind
of
the
first
time.
So
if
I
come
back
and
go
to
users,
you'll
notice
that
you
never
see
the
loading
and
that's
because
react
or
swap
query
has
cached
that
list
and
as
long
as
you
know,
for
for
a
set
amount
of
time,
it's
going
to
keep
that
in
the
cache.
A
A
A
Set
it
to
query
result
so
use
query
and
let
us
give
it
a
key
of
to
do's
and
then
we
pass
it
a
promise.
So
at
this
point
it
can
be
any
promise
and
we'll
use
fetch
and
call
our
url
and
then
we'll
just
convert
that
to
json
okay
and
that's
our
query
result
and
to
paint
it.
We
just
use
an
each
directive
in
svelt
and
it
actually
puts
it
in
a
store.
A
B
A
A
A
B
A
A
A
Just
wrap
that
in
an
if
statement-
and
I
think
that
should
work
yep,
so
we've
got
all
of
our
to-do's
and
the
the
only
other
thing
that
I
wanted
to
show.
There's
there's
two
really
cool
things
about
this
that
have
a
lot
of
value.
One
one
is
the
query
component
and
pagination
and
then
the
the
other
is
mutations.
So
so
mutations
is
pretty
cool,
but
let's
yeah.
A
A
C
A
A
A
A
A
C
A
A
A
All
right:
well,
I
don't
know
why
that's
not
working,
but
before
we
go,
I'm
just
want
to
show
you
a
little
bit
of
the
pagination.
So
I
think
that's
really.
The
the
coolest
part,
at
least
for
me,
is
pagination.
Is
it's
one
of
those
things?
That's
not
a
lot
of
fun
on
the
front
end
and
spelt
query
makes
it
really
really
easy,
especially
with
felt
and
its
reactivity.
A
So
if
you
set
it
to
one
it's
going
to
automatically
fetch
page
one,
you
set
it
to
two
it'll
set
it
to
page
two,
and
you
can
do
these
checks,
like
is
previous
data
and
does
does
the
query
have
more
data
then
increment
or
here
you
can
just
subtract.
So
and
then
you
can
disable
the
button
if
page
equals
zero.
So
so,
basically,
what
happens
is
this
query
component
creates
like
a
little
watcher
on
this
page
variable
and
then
to
do
pagination.
A
All
you're
doing
is
incrementing
that
page
variable
from
one
to
two
to
three
to
four,
which
is
really
nice
and
it
handles
the
loading
and
handles
the
error
as
well
in
these
branching
statements.
So
so
those
were
the
three
demos
I
wanted
to
show
one
just
querying
data
using
a
fetch
and
then
the
mutation
and
the
pagination.
A
Yeah,
so
if
you
are
just
focusing
on
querying
data
from
the
server
and
managing
data-
and
you
don't
have
a
lot
of
business
logic
in
your
presentation
layer,
a
swelt
query
is
great.
So
if
you
keep
your
presentation,
layer
kind
of
simple
are
focused
about
the
presentation
and
that
then
you
want
to
use
this,
and,
and
the
redux
are
our
mob
x.
Ours
are
context
or
whatever
you
want
to
use
for
state
is
more,
is
a
better
use
case
for
client-side
state,
where
you're
dealing
with
state.
A
That's
basically
only
really
focused
around
the
client,
whether
it's
keeping
the
current
user
in
the
session
right.
That
would
be
a
great
kind
of
use
case
for
using
something
like
redoxes
managing
that
user.
You
want
to
show
that
user
on
multiple
pages
through
your
app
and
keep
track
of
whether
they're
logged
in
or
logged
out.
A
B
A
A
A
Charleston.Js
meetups
for
30
minutes
or
so
every
week
and
next
week
will
be
dino
and
functional
javascript,
and
I
think
I
have
a
pretty
good
presentation
for
that
and
then
we'll
do
node
then
react
and
then
swelt
and
then
dino,
so
we'll
just
keep
rotating
them
if
you're
interested
in
presenting
in
any
of
those
meetups.
Just
let
me
know
and
I'll
be
happy
and
it
and
it
doesn't
have
to
be
specific.
A
So
if
you
have
like
a
tool
that
you
know,
developers
of
node
or
dino
or
react
would
be
interested
in,
and
you
want
to
showcase
that
ted
from
github
may
have
some
new
tools
that
developers
might
be
interested
in.
We
yeah
love
to
have
you
talk
about
it
so
and,
and
that's
really
all
I
had.
Is
there
any
any
comments
or
questions
are
shout
outs
to
the
group.
C
I
was
just
gonna
say
at
least
if
we're
allowed
to
make
requests
absolutely.
I
would
love
any
kind
of
talks
about
about
gui
testing.
You
know
automated
robot
testing
or
any
kind
of
testing.
I
looked
at
it
a
couple
of
years
ago
and
it
was
just
kind
of
overwhelming
to
get
started,
so
I
haven't
really
kept
up
with
that.
So
if
we
had
a
had
somebody
in
the
group
that
was
really
good
at
it,
I
think
that'd
be
a
great
presentation.
C
A
I
know
the
cto
at
cyprus
who
they
do
web
automation
testing,
so
so
it's
it's
a
web
driver
and,
and
it
will
drive
your
browser
and
you
kind
of
just
say
you
know,
go
to
this
page
click.
This
button
enter
this
text
and
it'll
do
all
of
that
in
the
background
for
you
would
that
be
in
that
camp
yeah?
That
would
be
great.
D
D
A
A
A
D
A
Sorry,
my
connection,
it's
not
great
yeah.
I
think
that
sounds
really
cool
and,
like
I
said,
there's
some
people
in
that
space,
but
maybe
not
doing
exactly
what
you're
thinking
I
think
wasm
may
be
interesting.
An
assembly
script
may
be
interesting
to
check
out
without,
even
though
it
can't
write
to
the
dom
it
might
be
like
a
hot
client
and
then
one
I
think
interesting
thing
was
felt.
Is
it
renders
really
well
on
the
server
because
it
essentially
converts
everything
to
a
string,
whereas,
like
react
is
everything?
Is?
Is
javascript
objects?
A
Well,
if
you've
ever
used
like
tools
like
webdriver
or
selenium,
those
are
so
slow
and
painful.
Cypress
really
solves
that
problem
from
you
know
the
kind
of
javascript
side.
You
just
write
your
test
and
you
know
press
the
run
button
in
cyprus
and
it
it
plays,
and
it
actually
gives
you
a
little
video
of
it
driving
your
app.
So
it's
pretty
cool.
A
D
There's
a
service,
my
wife,
maybe
you
already
have
something,
but
my
wife
used
a
service
to
do
that
for
a
fundraising
thing
for
the
twins,
club
and
remember
the
name
of
it
I'll
send
you
later,
but
it's
like
people
can
order
their
individual
shirts
and
you
know,
have
some
printed
things
and
and
then
the
coming
hands
all
the
individual
logistics
and
the
club
gets
like
or
you
could.
You
know,
donate
the
money
somewhere
else,
but
and
then
the
club
gets
like
a
cut
of
it.
A
Yeah
yeah,
that's
it's
probably
a
similar
thing
using
printful
with
a
front-end
store
on
it
and
it's
it's
like
there's,
not
it's
not
any,
really
profit
from
it.
It's
just
you
know.
Just
it
just
makes
it
easier
than
you
know.
We
can't
go
to
a
meet-up
and
hand
out
shirts
anymore,
maybe
that'll
change,
but
I'll.