React Query with Next.js App Router

today we're looking at react query or how it's now called 10stack query which is a popular asynchronous state management um for react and um so I thought we can take a look how we can use it together with super base now I actually got inspired um by my friend Jan Carlo who's the creator of maker kid uh and he's written a blog post on how to use react query with um super base and he's using uh the remix framework here um but I know a lot of you are using uh nextjs so I thought let's try and use it within the new um nextjs so let's go from scratch uh let's use create next app create a new um next app we'll just call it super uh react query and then yes we do want typescript we do want eslint yeah sure let's use Tailwind um no yeah let's just use all the um defaults here great so now we can go into our super re query and I like to use um PS code let's open this up here um so we can see now we have our um app directory we have our um page in here so now we can say npm run def just kind of spin this up and let's have a quick look at it so here is our um Local Host let's pin that here um and so now if we're looking at um the blog post we'll need to install a couple libraries we need Super based JS uh react query and then um superbase SSR so um superbase SSR allows us to use superbase in um a server side rendering context so if we're using nextjs uh especially now with the new um server components and all that new stuff um the SSR library is really helpful in you know allowing us to use client site um server s kind of all all the sites basically okay great so now we have that installed and so as you can see kind of creating a react query client so in the root component of our app we need to kind of add this um query client provider um so now in remix there there's kind of an outlet here so there's a note if you're using nextjs um this will be in the um here appor app TSX now we're using the new app router here so we have um the layout component which is now kind of the global um sort of root layout but however if we were to try um and do this here so we can have um uh you know just just for fun let's have um a look we can uh import this from um yes react query there we go um so this is our query client coming in from um react query and then now if we were to um get the query client provider and just wrap um so you know this is our route here and then we were to wrap this and um we we get this from here the query client query client provider um so you know first of all this looks like there's no errors or anything but now if we're um running this and we're going back to our local host and refresh this um we will now see an error here uh plain objects um yeah client components from server components so there's an issue here where you know we can't use um kind of this this query client uh provider in a server So currently this is server server rendered so we actually need to pull this out into um a client component so let's create um a new file um let's let's just say components uh and then let's say react query um client provider do um TSX and um yep let's stop this for a second uh and so now what we can do is we can um you know basically do kind of this uh here um but uh we'll just uh export it so we'll we'll say um export uh const react query client provider um and that's a function that takes in uh children and the children are of type uh react. react [Music] node um yeah and then basically you will just say um actually I think we can just return um this so we'll uh return the query client yeah we just need to import this one as well query client provider uh and then these are our um children uh and then no okay there we are so now we have our um rqu provider and so the important thing here um we'll need to say use client um you know to tell uh nextjs that this is a client component and so now in our layout we can go um and say instead of importing this we'll be importing the uh react query client provider uh so we don't need this anymore and we'll just say um so we'll wrap this into our react query client provider uh here and we'll just get that in from um yep from our components okay give that save and so [Music] now uh if we're going back to our page refresh this so now we see uh we're not getting any errors anymore because um this is now properly uh a client component okay let's go further in the tutorial um so here uh yeah he's creating uh a hook to uh create a super based client um so we can do this uh as well maybe we'll just say um a new file uh we'll call it yeah maybe we'll just call it hooks uh um and then use super base maybe um I think okay so it calls it get superbase browser client so actually the hook is down here now yeah the use memo so kind of the reason he he reps that is to prevent the client from being recreated on every render um actually it should be fine like the the client creation isn't too expensive and it uses kind of the same um the same you know storage mechanism in the background so um actually it should be should be fine but maybe let's just then say um new file so we'll just say utils slash um superbase do TS and then um this is kind of where we create our um browser client so uh from superbase SSR uh we'll remove this um it's prob probably useful uh and then yes the database so we can import all the database types um into our um client now we don't actually need kind of the return type here uh there's a super based client that is um you can import export from super base super base JS um there's the superbase client type uh and so we can actually say um superbase client with database and um yeah we don't actually need this get En um because we'll get the environment variable so we can just uh in nextjs I think this is kind of the remix um things we can just create a env. local file um and here we can then uh import our super base U variables but let's first um kind of follow this up uh we actually also you know yeah we could we could check this here but um the library actually the create browser CLI checks this um itself and then um we can say uh process. n dot um superbase and then process do env. superbase Anon key just need to mark them as um provided okay and then we return the client now uh let's create our database types so so what we can do is we can link our project um to a superbase project so I just have a simple superbase project here countries um and cities so let's go to our settings API and then we can copy this um so our super base URL and then our super base and on key so this is our super base URL and this is our um Anon key there we are okay let's save them here um and so what we can now do this is our um project identifier um you can see this here as well uh or if you go to General it will tell you here the the reference ID as well so what we can say is super base um in it so first we'll initialize um uh a superbase uh folder here and then we can say superbase link um and we put in the project reference here uh we will need our um database password uh to kind of pull down all the the schema from the database so ideally when you create your project use um use some uh password manager and you um now we're all Linked UP And so what we can now do is super base gen types typescript so we're generating types for uh typescript we're saying we want to go from um the linked and we only want the um public schema okay and then we want to write this to our utils slash we'll call it database. types. TS uh and so now uh we can see we have our database types uh in here so for our um countries uh and cities uh in there and so now what we can do is we can uh get our types from at utils SL database types dots okay okay so now we can see that our client has our uh all our types in there uh our database types so create browser client uh now has our cities and uh countries and kind of all that um yep and then we'll just need to hook this up here where we say um this is in year TOS uh and then super base um get browser supervis client uh actually here where was this I think yeah we don't need the TS um okay great and so that is all hooked up now um okay and then we'll be able to uh use our um use super base hook and so now let's create um a hook to fetch data so we'll just say hooks um use organization quy so in our case we're not um creating an organization uh we just have um create new file here we're already in the hooks and then we'll just say use um country query and so we can copy this over next now and we'll just need to our get our um use super base yeah and then get organization by ID so you can see here that um basically the queries themselves um you know are are just kind of the pure uh queries uh and then uh these are basically the way the way uh he organizes this is in a separate um queries folder he kind of has all um sort of the queries I mean yeah I think that's a that's a good way to create this so in our case is like get um maybe country by ID yeah so in new queries folder um get country by ID and so what we can do is um this is like export function get um we'll just say country by ID now our uh client here is um our super based client so we'll import um yeah I think how did he type the client and uh yeah okay so return type off yep so we'll just say import um yeah maybe in new super base where do we actually um get browser client here so um maybe we can also export the uh type um export type my um maybe typed super base client um and so basically we'll say type superace client is this and then we can say typed super based client here uh and then we can just import the typed super based client in our um queries here so we'll just say type superbase client we can import this from um the utils and then um oh yeah in our case I guess okay so actually type superbase client is not allowed to be undefined so we'll say type super based client or this one here is um okay and then so here the client is are typed uh and then we say country ID is a number and so we can now say client from uh and that's a cool thing here now as we write our um queries we get the code completion because we have the typed supervis cin so we say countries uh we want the ID and the name where the ID equals the country ID um and then yeah we just want a single result and so basically this is just defining um the query itself and so now we can um use this query so this would be the get country I can't type get country by ID uh and then we'll just say yeah maybe we just find anywhere where there organization organization and replace that with uh well now uh uppercase country so we'll replace that one no that was wrong um y yep no no no okay and now lowercase country yeah I know there's a probably better way of doing this uh and then use Query here is coming from um yeah react query um so that is using our query and then our query key is basically here um kind of put together by you know we're saying basically countries and the country ID so um this is kind of used for the the caching and kind of the revalidating things like that um you need to specify the the query key um yeah and so now we should be able to um kind of use this okay and so now um we'll create a new um page uh and then kind of use the query in in in in that page so in our app has create a new file so we'll want um countries then uh by the country ID and then we'll have our um page. TSX um so we can look at kind of the page here we'll just export um default function so in our page we'll um export default function uh we'll call it country page uh and then so in our case we'll have the params and the [Music] params have an ID um that's a number like this and then um we have the use um so in our case we know use or uh use country query that's the one uh and we need to provide the country ID which is just the um perams doid and then we have a is loading and then data uh and then we'll have country uh ID or name uh um yeah uh well I guess here we can say either if is error or no country but you can see like the typing is kind of nicely um coming through here uh and then we can say country dotame um okay and so now if we see and I think we probably need to again mark this as um client so if we were to say countries uh one I think yeah we'll get an error is not a function so um I think this do we just say use client here um let's see uh and I think did we maybe have to restart after we created the yeah. local is now applied I think we have our keys in there and so now ah Now remind me because this is a client component um it needs to be next public um yes now need need to remember my um my conventions next public okay so that should be it now is that correct and so now we're loading and we're getting an error uh yes of course because I actually turned on uh Ro level security policies for um these tables so um RS is on but we don't have any policies so let's um quickly create a a read read exess for everyone yep that's it so policy um for select uh using true so we'll use this template review save policy and so now if we go back give that a refresh so we now see we're loading and then United Kingdom um and you can see here now you know because this is a is a client component um the actual fetching of the data is um performed client site now there is some documentation available uh how to do server side rendering with uh Rea query specifically with like nextjs app router um now it is um a somewhat bigger topic so I'll split that out into the next video so stay tuned for that and let me know in the comments what else you'd like to learn and see you next [Music] time

Channel: Supabase

Views: 10,600

Keywords:

Id: Z4L_UE0hVmo

Length: 25min 53sec (1553 seconds)

Published: Tue Jan 09 2024