Nuxt 3: Query from an external API + read more

my name is tim Benniks and this is a
turbo tutorial
in this short tutorial we will be
looking at how you can query data from
an external api and put that data on the
screen in next three
however this is not just a simple query
we're going to add in a bunch of other
things like adding a loading state but
also a refresh for like when you click
load more or read more or something like
that so this is a little bit more
of a real life scenario rather than just
let me query something show it on the
screen this is a bit more fancy alright
so let's go to the computer and have a
look so we are in vs code here this is a
completely clean Nuxt 3 project
no configuration nothing added just the
latest next tree so in here what we're
looking at is when you look at this code
there's quite a bit going on but
actually it's quite simple
so what we're doing here is we are
querying
um
an api that returns conference talks
that i'm speaking at like my conference
talks
right and so if we click on that link
and then we remove that broken thingy
here basically this is what that returns
so if i limit it to one it gives me one
if i click 10 it gives me 10 and these
are my latest talks of the conference
that i'm speaking at
and basically what this is doing we are
actually utilizing the use async data
and in inside of that we are actually
fetching that stuff
and these talks
as you just saw on the url there's a
limit right you can set one or two or
200 or whatever and we're using that so
what i've done is by default i've set
the limit to two docs
and so
we're binding whatever data comes back
from that composable use async data to
the talks
and so then here
we are looking at the bending state
we're loading the talks and if it's not
loading we're actually showing it and
there's also a little button that says
show me all the talks so let's have a
look so right now let's just refresh
this is two talks because that ref that
we just set for count was two talks
and so now when i click load all the
talks it's loading it's at a pending
state and now it came back with 65 talks
wow i almost cannot believe i did 65
talks that's a little crazy
anyways outside of that you can see
there's lots of other data now here we
had a loading state and we had to click
a button to load all the talks and so
how we've done that is i have a see all
function
and that cl function sets that limit ref
that we said in the beginning that was
initially 2 to 200
and then there's the magic of nux3 and
fetching i literally hit the refresh
function and that refresh function is
something that came back from the usage
data
and so basically it just refreshes that
ajax call or that fetch or whatever you
want to call it with the new data that
was set to limit which is loaded here
and then it just
re-kind of
rebinds the stuff that comes from that
new query and then there you go and
there's basically
not much to it and adding a lot more and
a default set of how much you want to
query is actually quite simple
that's it that's what i wanted to show
you today so thank you for watching and
i'll see you in the next turbo tutorial
cheers