►
From YouTube: Svelte-Query-Demo
Description
This is a demo of Svelte-Query a module that provides conventional state management features around Server Side State.
Repository:
https://github.com/twilson63/svelte-query-demo
Blog Post
https://blog.hyper63.com/intro-to-svelte-query/
A
Hello,
my
name
is
tom
wilson,
and
this
is
a
demo
of
spelt
query.
Swelt
query
is
a
performant
and
powerful
data
synchronization
synchronization
for
svelt
in
this
demo
I'll
show
you
kind
of
three
core
features
of
swelt:
query
the
query:
to
get
a
list
of
users,
the
pagination
feature,
and
finally,
the
mutation
feature
to
create
a
to
do.
A
Up
then,
we've
already
pulled
in
use
query
from
svelte
query
and
we've
got
our
url,
so
we
just
need
to
call
it
and
we'll
say:
query
result,
equals
use,
query
and
use.
Query
is
a
hook,
so
it
takes
a
key
and
we'll
say
users
and
then
a
function
that
returns
a
promise.
So
this
function
will
be
our
fetch
and
it'll.
Take
our
url
and
then
we'll
convert
it
to
json.
A
A
A
A
A
A
A
A
A
A
A
Object
and
being
reactive
will
be
every
time
the
page
changes.
This
object
will
change
and
then
it'll
notify
the
query
component
to
get
some
more
data.
So
we'll
set
our
query
key,
and
this
is
going
to
be
equal
to
post
and
the
page
to
make
that
unique,
and
then
our
query
function
and
we'll
call
fetch
post
passing
the
page
and
then
finally,
we're
going
to
say,
keep
previous
data.
A
A
Okay,
let's
talk
about
svelt
query
mutations
in
this
demo,
we're
going
to
create
a
mutation
hook
for
spelt
query
to
create
a
new
to
do
so,
we're
going
to
go
into
our
to
do's
template
and
let's
go
ahead
and
wire
up
this
form.
So
we've
got
this
to
do's
form,
we're
going
to
capture
the
title
input
and
we'll
create
an
own
submit
handler.
A
A
A
A
I
think
I
need
one
more
parenthesis
and
that's
our
hook
and
so
to
call
it.
We
use
the
store
reference
dollar
sign,
mutation,
dot,
mutate
and
we'll
pass
in
user
id
one
and
our
title
for
our
to
do.
We
could
say
if
it's
completed
or
not,
but
this
should
be
good
enough
and
then
we
want
in
our
markup
to
check
and
see
the
state
of
the
mutation.
So
is
it
loading
we'll
say.
A
A
A
And
let's
give
it
a
whirl
test
submit,
so
you
saw
it
kind
of
saying
adding
to
do
and
then
it
added
successfully.
So
that's
pretty
much
it
it
using
the
mutation.
It
manages
all
of
those
conditions
internally,
so
you
can
just
declaratively
react
to
them.
Whether
it's
loading
or
error
are
a
success
and
give
you
all
the
bits
you
need
to
successfully
create
a
swelt
form
using
the
mutation
hook
and
spell
query.