React Query with Next.js Server Components

the last video we were looking at fetching data with superbase and react query on the client site um so if you haven't seen that video you know we implemented kind of this loading State uh and then fetching our data cine site using react query now as you might have heard uh client signes data fetching is uh kind of frout upon nowadays um everything is kind of moving to react server components and you know next js4 so you're now meant to be fetching data um server site so there is um some documentation for this kind of advanced um server rendering here with uh app rower so um we can actually prefet prefetch and hydrate kind of the data um server s side and then uh use that kind of in combination here so um there is on the query cin there's a prefetch query um where we basically pass in the query key the query function uh and then later on when we here use the use Query in our client component um this data is immediately available because it was um prefetched here and hydrated um into our component so um maybe let's have a look at kind of how we can do uh server siiz data effect chain in uh kind of react servers server components with um superbase JS so yeah let's uh exactly do this so we'll create a new um here we'll say new file and we'll say um SSR countries so service side render countries um ID and then the uh page do um TSX uh and then we we can um maybe copy this part in here and kind of modify that um so yeah we'll we'll get to that part in a bit this will be um country page uh and then also again we'll get our um perams and we'll have the um prams um with ID country uh so that's a number and um query cin prefet query uh yes so um you know if you remember here we have our use um country query uh and here this is using our um use Query so let's modify this um a little bit rather than um returning the use Query let's just recur return this so then we can use this here on um in the prefetch query as well um so let's modify this a little bit Yeah query key query function um get country by ID um lovely and then we need to modify our client component so our client component right now is um doing this uh use country query uh and then one other thing actually is the the use super base so because we have a client super base um so we have a browser uh get super based browser client but for the server components we need um a super base server client so let's modify this as well where um so the use country query will put in um we'll make that an object now to make that easier so country ID and then we'll also put in the client and um the client will be our typed um superbase client here uh uh and then we can again yeah pass the client and construct our um query key with the country ID lovely and then we don't need um these Imports anymore but so now if we go back to um our here countries so now we need to um use country query so we need to first of all wrap this now into use Query from 10stack so uh use Query so remember now this is returning our query key and our query function uh and so now here we need to provide an object and the object needs to be um our country ID which is params do ID and then also our client which needs to be um here we're in a client comp component so we can import um const super base equals use super base super base this one here and then we can pass um super base here give that a save and now if we look um into our app again this is still working fine we're loading uh if we say three we're loading single okay so this is working great and so now we can reuse this in our um server site prefetch query so here now um rather than manually um supplying this we can now use our use country query and our use country query needs our um country ID which is our ps. ID and and our client and so now our client needs to be um a typed superbase client uh let's remove this here for now and then um we'll say this is our country we'll still need to um create that client component um so we need a a server super based client a utils uh let's create a new file uh um superbase server. TS uh and basically we just need to export um this guy here so export let's call it super base server client uh export const equals oh no sorry so super Bas server client equals uh and we need to make that a function so actually uh export let's say default function uh use let's say let's call it use super base server and then uh we need to make that a function our function takes in um the cookies so actually the cookie store I believe and then we return the um create server and so let's import we can import here uh um we don't need the cookie options so uh cookies cookie store is uh the return type of the type of cookies um and then we have our cookie store and so that's how we create our server CLI because um in the server component we need we need to use cookies to store our our authentication details rather on the browser on the browser we're using um cookies as well but there's a different way of accessing the cookies obviously in the server component versus the client component um use superbase server and I believe we also need to type this one with the database from our database types and then we are getting back uh typed superbase client exactly what we want so if we now say const superbase equals use super base server this one here uh and so now we need to provide in the cookie store so um we're importing the cookies from the next headers here and then we can get our uh so we can look at this here this is the cookie store um cookies and then we provide the cookie store so now you we have our typed super base server client and so now we can pass in super base here okay that's great so that how this looks like um and then lastly we need our client component and so now um we basically in here let's create um a new file we'll call it country. TSX uh and so this we'll just call it country uh and we'll just pass in uh ID as number uh and so now what we can do is um again here we can use the same um so use Query comes in from our uh 10 stack and um we don't need this part so you know this is kind of the the way to Showcase where you know posts because we're prefetching posts on um the server here with our prefetch the use country query well they you know their example is post um and then if we have another query post common so this one is not prefetched so that will be fetched on the server but whereas this one is immediately available and doesn't need to be um sorry so this one will be fetched on the client because it hasn't been prefetched on the server whereas this has been prefetched on the server so it will be immediately available and then this query will be um fetched on the client side because um there's no you know query key that was prefetched on on the server but so what we can do now is here our use Query so we use our use country query and our use country query um again needs our country ID which is our ID and now in this case here again we're in our um client component so we need to use the super base equals uh and I probably should have renamed the use super base to uh so if we look in here this is the browser superbase client um should have probably renamed that but then we're passing in the superbase client here give that save and so now we have our data um available so what we can do is we just render out um maybe a pre and then um json. stringify um I like that to Let's format it nicely so this is kind of indent to um yeah and I think that should be it and then just here uh we'll need to import our uh country component and our country component needs to get the it D which is uh I believe params do ID there we are so now we have um set this up all correctly and so now if we're going to um SSR countries you can now see that um there was no loading State um so for example let's load number one so no loading State and we loaded um united king Kingdom it's a good question why this now was fetching clein site I think it might be the um invalidation ah yeah I think I I might need to set this part up here so this is at the very top the um query stale time so with SSR we usually want to set some default stale time above zero to avoid ref fetching immediately on the client yeah so I think this is um what was happening here so um query client providers use state so this should be this so I think if I replace my query client here um with this so now now um let's [Music] see ah wait uh let's check the docks ah okay so this is within the function itself yeah that makes sense uh so here provider uh and then okay we need to wrap this now in uh return and then here we do our query client okay so I think that should now be working and so now as you can see when we're fetching um we're prefetching on the server and we're not fetching again on um the client whereas you know if we had countries here so we're loading and then we're getting um our result so rather now if we replace this with um SSR countries you know we're not getting any loading stage but we're immediately getting the prefetched um query that was fetched server site lovely okay so this is pretty much how you would use um super base together with react query um with you know nextjs 14 uh react server components all of that there is some some tradeoffs here like if you're starting a new like fully next S14 like a new project um I think there was sort of like you know New Concept um you might actually not need server components uh you might actually not need um react query at all so yeah there there's kind of a couple of words here you know um it's hard to give general advice when it makes sense to pair react query with server components or not um so I think in general if you're starting out with a new project um you know you might actually not need uh react uh query at all you can just directly fetch um you know using super based JS in your in your server components um however you know if you have like an existing react query project or you know you're very familiar with react query and you want to kind of um have both you know the the client side data fetching and the server side world and you know sort of slowly migrate things over then I think this approach could um make great sense for you I hope this was useful and uh I'll see you next time [Music] bye-bye

Channel: Supabase

Views: 6,753

Keywords:

Id: AnRshBKUApg

Length: 17min 55sec (1075 seconds)

Published: Wed Jan 10 2024