Best GraphQL Client-Side Setup in Next.js with urql, GraphQL Codegen and TypeScript

hi today i will show you one of my favorite setups for creating applications in xjs that consume graphql apis and as a graphql client library we'll be using oracle let's get started [Music] [Applause] so why oracle it's a well-built library and it's a library that creates small bundles so if we go to the documentation you can see that it's very small compared to the default choice the most popular choice which is a polo and there is also relay so this one is roughly six kilobytes so let's see how we can use it with next.js to consume those graphql apis and as an example of an api i will be using a sailor api you can access it at this url and we can start doing our query so for example in this case i will be fetching a list of products with id and name and then i need to also specify how many products i want and default channel like that and i should get those products so we will be trying to execute this query from an xjs application using oracle as the graphql client library so first of all let's create our next.js app i will be using pnpm and we'll be using typescript so let's call it oracle next up and before we go even further let's add oracle as dependency we can also add graphical tag it will be useful later and let's open the project so the first thing we need to do is to connect to our endpoint so let me create a folder inside this folder i will create a graphql typescript file and let's import create client from oracle and now we can export our client and it requires a url and as the url we'll be using versal sailor cloud graphql like that so now we need to provide this client to our react application so we'll be using a provider provider from your ql and it takes value which is the client and we need to import that like that so next let's create a folder for storing our graphql queries and i call it just graphql and inside this folder let's create our first query fetch product list graphql so i prefer to use files with graphql extensions because it's easier for the tooling and for the developer experience and to make it even better you would need to add a plugin called vs code plugin called graphql so install graphql so that's the one you need to install so it provides you some hints auto completion but in order to make it work we need to create a configuration file called graphql rc yaml and here we need to provide the schema which is exactly the same as the one we add here and now if you start writing your i think you need to reload the window so yeah it will autocomplete to products edges node id as before name and maybe let's add thumbnail url so it's pretty convenient to use like that and we also name our query it's important to name queries for caching and [Music] just to have it nicely organized and here as before i will fetch 12 and the channel would be the default channel this is something specific to sailor api okay so we have our query and now we can maybe execute it so usually and let's remove that so oracle provides this hook called use query and here we need to provide the query we want to execute so you need to have it available as a string and that's not ideal so i'd like to automate that process and in order to do that we will be using a library code graphql code gen so we will install graphql code in cli it takes a while and now we can do this init process so it will ask us some questions about our setup so first of all we want to build a react app then we need to provide the schema location which is the graphql endpoint url so in our case it's verso sailor cloud graphql then where we the place where we are storing our graphql queries mutations and fragments so in my case that's graphql and now the plugins so we'll be using typescript typescript operations we are not using apollo so let's exclude that and we are using urql so i will add this one and there's one more plugin we need to add but i will do it just after this setup so finally generated so we also keep it top level for convenience and introspection we don't need that and the default name for the configuration files okay and now we need to define the name of a script to run the outer generation i will do generate simply and that should be it this will add a list of plugins to our package.json you can see it here it's they are not yet installed we need to install them so the script is not smart enough to recognize that i was using pnpm it's just npm but we will be using pnpm to install that and now i can open another window and here i can write generate and it works so usually it's a good idea to keep it watching so it generates and then if something changes like for example i remove that it will automatically get triggered and regenerate so let's keep it like that in one window and now we also need another plugin so that we can create named hooks based on the name of our queries and the plugin is called graphql typescript urql okay we have it let's open code gen we need to add it here type script urql and restart the autogenerate yeah so we have it now in generated we have this huge file because the graphql sailor graphql api is pretty massive it contains a lot of queries mutations so we have like a file which is pretty long 10 000 lines maybe even more or even 50. and we can now go back to our component and instead of using this generic use query that's provided by oracle we can have this use fetch product list query so as you can see it automatically detected that we have a query named fetch product list which is here and it depended use the conv the convention for react hooks and the query at the end and now we have this query available so we can get data loading error from the results and so if loading we can return a div saying loading if error we can return a div saying error and i think this should be message here yeah and if not data return no data otherwise we will generate the results and let's just do that so json stringify data products as you can see is autocompleting so let me just show you that again i have products edges and now it's a collection so if i save that it should be working so it's not called loading here it's fetching it's called loading in apollo and yeah so we have that we have watching the schema enabled and now we can start the app and see if it works and we refresh we see that we are getting the results it sounds pretty so let's quickly maybe make it a little bit better so i will be iterating so we have the names and we can maybe improve it a little bit by adding let's say the image so normally you should use the image component i will be using emg because it's simpler for now and thumbnail url yeah it works we have the list fetched and that's pretty much it this is how we can quickly connect an xjs application with a graphql api using oracle it's fast it's convenient and there's also one more thing if you build your app so if we are going to build our app we'll see that the first load is 100 more than 100 kilobytes and so if you used apollo this would be bigger and that's the advantage of using oracle because it's only five almost six kilobytes so it doesn't add to this first load payload that you're fetching it's very important if you're building larger applications in xjs this doesn't apply to other frameworks that's all i have today thanks for watching see you next one

Channel: Zaiste Programming

Views: 7,401

Keywords: graphql, nextjs, urql

Id: EoM-1Lq0rjU

Length: 14min 47sec (887 seconds)

Published: Sat May 21 2022