Nuxt 3: Pick & Transform

my name is Tim Benniks and this is a
turbo tutorial
so in this short tutorial we will be
looking at some magical properties that
you are getting with nuxt threes use
fetch and use async data
and basically what you can do is you can
kind of choose which keys of an object
you want to be returned from your ajax
call and the one and then show those in
your page so that means you can pick and
choose which things you want from that
call rather than getting everything and
this is important because sometimes you
get back a lot of stuff but you really
don't need all that stuff so there's a
bunch of data over the wire
and what's important here when you're
rendering nuxt in its default mode which
is the universal rendering mode which
we'll talk about in another tutorial
that universal rendering mode actually
renders you your page statically so
there's actually with some ssr on build
there is html and then what happens it
adds the javascript on top and it
hydrates
but to be able to hydrate the page there
needs to be a script tag on the bottom
that has all the data needed to hydrate
the page so few knows what to do
but sometimes if you don't need all that
data that came back from your hs go on
the client
and you put it all in that scriptdeck
your page becomes huge and so when you
use the pick and transform properties
off use fetch and use async data and
stuff you can clean it up completely and
it's much better for performance and all
of that stuff so how about we go into
the computer into vs code and i'll show
you how that's done so when we have a
look now at um the vs code here i have a
very simple setup this is basically a
next project without any
setup set settings nothing it's just out
of the box
and i have created an internal route for
api
friends so when we have a look server
api friends and in here um i basically
just took some lines for a from a very
iconic episode of the france tv show if
you don't know france you're probably a
bunch younger than me check it out on
netflix it's a lot of fun
so basically there's two lines here ross
and rachel they're saying some stuff and
that's it so when we look in the browser
of what comes out it's literally this
ross and rachel
so what i now want to do
is imagine this came from some headless
cms it's a huge output and let's say i
only want to see ross and not rachel
because i don't need that data right so
before we do that let's have a look at
what that script tag looks like right
here's the script
and there's the data that came from our
api call here we have rachel and here we
have ross
but
i only need ros and not rachel so let's
remove this data
so what we can do is add some options
here and we can say pick
and um here we say you know what i only
want ross
let's refresh and here is now only ross
that came back
and when you have a look oops
at that script tag it says only ross
there is no rachel anymore so we have
now completely cleaned up the thing with
what we want
so let's put it back because there's
another thing that's really interesting
because what if that data that came back
from your api call
is great it's exactly what you need but
it's just in the format that your
components don't really like like in
this case this is an object with key and
value but maybe i want an array with
objects inside that says name
rachel message blah blah blah that's
much easier for me to work with imagine
right so what we can do is add another
thing that's called a transform and i
have this in my copy paste because it's
a bunch of code
and so basically
what you can do here
is actually add a transform property and
what you get is the response and you can
do whatever you want with that response
here so i'm just looping over my
response and i'm getting like for each
person in the response make an array and
push in the name of the person and then
the message and then return the result
and so when we do that and we go to the
browser and refresh
what we get back is name equals original
message blah blah blah and this is
handy because you can
first
you pick what you need then you
transform it into something amazing and
you tailored the json to what you need
in your components so you don't have to
adapt your components when you do
another api call to another system or
maybe when it updates and so that's what
i wanted to show you thank you for
watching and i'll see you in the next
turbo tutorial cheers