Building A GraphQL Server In Next.js With Neo4j Aura And Vercel

hey folks welcome to the neo4j stream my name is will and today we are taking a look at building graphql apis with next js deploying to versel and neo4j aura and a little bit about graph visualization and neo4j bloom so i'll talk a little bit about what we're going to be working on and and how all this kind of ties together so we're picking up where we left off last time working with what we call the lobsters graph project so if you remember last time we used github actions to set up a recurring data scrape of the lobsters api so lobsters i'll drop a link to that in the chat here corey says you like the large images and videos yeah i'll try to make sure that i'm zoomed in enough uh but definitely shout if things are not big enough so lobsters is a social news aggregator so members of lobsters can post links to articles they get upvoted down voted commented on by the community and then there's this algorithm that sort of floats things of current relevant interest to the top and so last time we used github actions to set up this workflow so give actions allows us to define uh some code some workflows that run anytime there's some event that happens with the repo so typically this is used for like continuous improvement deployment running tests doing a deployment that kind of thing with github but we can also schedule these to be on a cron job so to in our case run every hour so every hour we're using this really cool action called flat data so this comes from the github team flat data allows us to fetch data from a file url it's like a json endpoint which is what we're using with the lobsters data or run a database query and then check that data into the github repo and then do some post-processing steps on it so we're using flat data to fetch the uh the newest dot json so these are all of the newest articles and then we're using another action that i wrote called flat graph and let me drop some links to this that this is interesting as well so the flat data project is here this is what we we talked about last time oh yeah cory says it deleted his first message yeah if you want to if you want to send the first message again i just saw the one about uh large images and video so flat data is uh this github action that we just saw that allows us to fetch data and do some post-processing and then there's also a vs code integration and a data viewer which we didn't look at last time but this i think is really neat and this enables some really neat data workflows with github actions and so i wrote just a really simple let's see if we can find it in the marketplace i just wrote a really simple github action called flat graph yeah here it is uh that allows you to in that yaml file where we defined our give action to fetch data uh so over here so we defined a bunch of steps and so the first step is to check out the repository the second step is to use flat data to fetch our json file and then we want to import that into neo4j as our post-processing step and so we could write a script in like javascript or python that uses the driver connects to neo4j uh loads this json file and then executes some cipher query to load the data so i just wrote a give action that that's a wrapper around those steps so we can just include the credentials for in this case the neo4j aura instance the file name that we want to work with so this file gets loaded and then passed as a parameter to a cipher query that we define here for how we want to create the data and so this newest.json file this gets passed as a cipher parameter so here the convention is value so we just write some cipher statement that says how we want to work with the json object at the cipher parameter called value and this runs every hour after we fetched the latest data so that's what we did last time and the code for that is here in that repo that i linked did i like it no i didn't like it let me drop that in the chat too so this is a link to the code that we're starting from so what we're going to do is start from where we left off and what i really want to do with this project is i want to show how graph visualization uh is really powerful when it comes to working with social network data and how it helps us to kind of find insights and explore that data so i thought this lobsters data set was a really good one because there's a social element to this users have to invite other users into the lobster's site to be able to to post and comments and we have users interacting and posting articles so what i want to do is is build this kind of interactive graph visualization application that we can use to kind of explore this data and maybe try to find are there is there content articles that are relevant for us what kind of insights can we have and so that's kind of the next step that i want to do today is take a look at what kind of out-of-the-box data visualization tools are available so we're going to look at neo4j bloom um in a minute here uh and then because we want to build a more custom full stack application we're going to get started on that i like to use next.js and what we're going to focus on today is building the graphql api so for our full stack application that we're going to build using next.js and react we want to deploy that out there and we don't want to just expose our database so we don't we don't want our react application just talking directly to our database uh so we want to build some api layer that is actually going to serve the data and that will be a graphql api so next.js which we'll talk about in a minute has because it's a full stack framework has the ability for us to include api routes which we can use to build a graphql server so that's the part we're going to focus on today is building that graphql server in next.js and then we'll deploy that to uh versailles and use that along with nerve jay aura so that is uh the plan uh oh and so corey's course question was curious about how and where to store large media like images and video let's say i want to store media attached to the lobster posts um is that where vercell comes in so for something like that so uh we have actually let's let's jump over to neo4j yeah so here we go so this is um this is our lobster's data in neo4j and so corey's question is okay so i have like a video or some images here we have user avatars that's a good one so every user has an avatar and there's an image associated with that so rather than storing the file as uh inserting the video the image as a file in the database instead what we typically do is just store some reference to it in the database so here we have avatar url stored as a string and the value of that is just the url for this image file this has to be hosted on lobsters but typically what we would do is store those in something like s3 um on aws and store a reference to that or like a google cloud storage bucket uh something like that where we're storing the file in some other service and then we're just storing a reference to it in the database for cell can [Music] host static content for us so we'll talk about what vercell is in a minute vercell is a platform for deploying front-end applications and it also handles serverless functions to us which is what we're going to be using for our graphql api so what we could do is check those files um and deploy them on versailles and as static content and then we have some url to them i'm not sure um what versailles sort of uh because cory's also talking about free services i'm not sure what versailles pricing policy is for static content and file sizes that might be something to look at um but yeah i i typically am using something like s3 which is um not free but it's pretty cheap as far as file storage goes you can also kind of get away with storing these things on github and there's a raw get cdn that you can use as well although since you specifically mentioned free services but that's typically not great for large files cool yeah good question so um so we have our scraper running so it's been running for uh for a while we have a bunch of data in here this is what it looks like so we have here's a user we have some information about the user they submit articles so here's one of the submissions this is something about opengl so we have the url to the article that they submitted so we can take a look and see what that is and then each article can have one or more tags so this is specific to linux and graphics we can traverse the graph to find okay here are other graphics related articles and we can see who submitted that other submissions from this user we can also see who invited them uh who they invited into the lobster's network so digging into graph visualization now so that's our ultimate goal here is to build some sort of interactive graph visualization application and we can see we have some kind of limited graph visualization functionality in this tool this is called neo4j browser and by the way this is this is my neo4j aura instance so if you missed last time uh we were using neo4j aura which has a free tier so we can just spin up a new instance in the cloud without um without putting in a credit card which is which is quite nice uh so that's what we're using here uh and the default way that we interact with neo4j and neo4j aura is neoj browser which you can think of as like a query workbench for neo4j so it's really designed for writing cipher queries so here we've written a cipher query starting off just to find 10 articles and you can see we can kind of click around and visualize things a little bit but it's really good just for developments good for users that know cypher but that's not really the tool i want to use because i want to build this application that anyone can kind of use and interact with uh and one tool that is available with neo4j and and also with neo4j aura is called neo4j bloom and bloom is bloom is a interactive tool for exploring graphs visually so with bloom let me zoom in a little bit here here we go so bloom is really a tool for uh users that are not going to be writing cypher so it's not a developer-facing tool it is something maybe comparable to like a business intelligence tool uh if you're familiar with like tableau like in in that same class of tools maybe um i think of it as a bit more interactive and uh and self-guided but anyway the the point with bloom is that we can configure it's called a perspective so configure how users see the graph what they interact with but then bloom allows us to explore the graph visually with the sort of natural search capability um and kind of clicking around to find the insights we're looking for so very much not about writing cipher so before we jump into next.js and graphql let's take a look at bloom so you can get an idea of what kind of functionality bloom has so here's my neo4j aura dashboard i have a few different projects going now uh here's this one lobster's graph that's what i'm looking for and so we can open with neo4j bloom and then the default username is neo4j and then i'll need my password which i have somewhere over here i think this is the right one let's see okay so bloom's firing up so bloom is available hosted in ufj aura so that's another free tier service that's available with aura which is quite nice so we said that with bloom we have the ability to configure a few things so we can configure the perspective it's called so a perspective is sort of how things are configured in the visualization and by default the perspective is generated from the data in the database so by default i don't have to configure anything it says okay you have articles you have tags you have users these are based on the node labels that were found in the database cool so the first thing we can do here let's search for a tag where the name contains database let's see tag name so you see we have this kind of natural language search capability where i just started typing the name of the label and the property i want to search for and and it gave me the option to now narrow that down to search for nodes with the label tag where [Music] the value of the name property is databases cool so i have that here um hi rad oh cool yeah thanks for joining oh yeah red says uh this first introduction to neo was uh one of my videos on linkedin learning oh yeah that that's fun that that was a while ago uh i should probably do an updated version of that now um cool yeah well thanks for joining so we've found the databases tag uh and so now what i can do i can right click on this and let's see if we can zoom in a bit and bloom yeah maybe that's as much as we want to zoom here so we can right click on this and say well okay i want to traverse this a bit and let's expand to now show me all of the articles that are connected to this tag database and i can see these i can kind of zoom in a little bit and let's find one that is particularly interesting to us um here's the oh the gql manifesto yeah that is a good one now we can expand out on this one and we can see what user submitted that so here's the user who submitted this article uh oh here's another oh here's one that i wrote actually that's that's a fun one let's i'll be a little biased and uh expand out this one so this is this is actually the write-up of uh our last stream so no cost data scraping with give actions and neo4j aura so you can see in in bloom we have the ability to see okay what relationships does this node have what other nodes is it connected to we can see the properties node also has editing capability built in so we can we can edit the graph as well and this article is also has the tag api so let's expand out to show all of the articles that also have the topic api so this is a good use of the force directed layout so if i'm interested in databases and apis i can kind of see well anything that is at the intersection of those two so these two here those are probably interesting for me so uh maps with django and um something about using postgres at stripe yep like those those sound relevant for me cool so another thing that's really useful in bloom is conditional styling so currently all these nodes are the same size they're colored according to uh according to the node label or specifically it's called a category because we can have a group of labels in a category in the bloom perspective but we can configure the styling to take into account property values and this is really useful when you have a lot of nodes on the screen and you want to just very quickly at a glance interpret some information so that's really useful with graph algorithms where maybe we've run page rank we want the more influential nodes to be bigger or with community detection we want to color them according to the community but let's see what we have here we have we have score so score that's the voting and commenting algorithm that's how things float up to the top so because we're we're not like ordering things in a table but instead we can do is make the those with a higher score bigger so if we click here to configure the perspective for the article category and we go to rule-based styling we want to add a rule-based style for score that is going to be a range and this is going to determine the size and what's nice here is we have a minimum value and a maximum value and then we say okay for the minimum value we want to make smaller than 1x we'll make these 0.25 x and in the maximum 4x we get some scaling along that range and that's figured out by by bloom for us we can refresh the range according to what's in the scene which is quite nice we don't have to go figure out what the the min and max values are okay so let's apply that we'll close this window here and now i can see okay well here's this article here this is the databases article that has the highest score in the scene uh which is really cool um so this is talking about uh against sql um so i think looking at what are some things that are difficult to to model in sql and that had a lot of uh upvotes and a lot of comments cool so that's a look at conditional styling in blue we can do something similar with user and karma as well and and of course we can we can also add icons here so for users we can give them a user icon for article what would be a good one here i don't know like a book i don't know let's see do we have any article no no article icons yeah maybe like a book do we have a book yeah it looks like a book uh and tag what should tag have maybe like a bookmark yeah it looks like a tag so we can add icons notice that different zoom levels we have more information that comes in so the icons are nice because at uh at a higher zoom level where we don't have enough room to show the caption we get the icon so we can see what it is at least so cory says can you export graphs for public viewing from bloom so for example cory's created a note explorer with d3 force layout um and what if you want to keep working on it yeah so um so corey's question i i guess is can you can you kind of share these interactive visualizations you create in bloom can you like embed them in a web application or or like share them on the web and the answer to that is oops um something like that the answer to that is not really that that's not really something that bloom is designed for it's not really a use case that uh bloom is designed for uh bloom is good for when you want to give a non-developer think of like like an analyst type persona someone who's wants to interact with the graph wants to explore it but doesn't necessarily want to be writing ciphers that's where the the natural language search functionality comes in we can also configure they're called search phrases where it's basically a parameterized cipher query but the end user doesn't have to think about that in terms of cipher they're just kind of adding in parameters to what is otherwise a natural language search but bloom is not really designed for something you can like embed a specific visualization in uh in an application you can you can do that to some degree so you can host bloom on a server and then use an iframe to kind of embed the bloom application that way there's also query parameters that you can use for the bloom url so like you can see here this one is past the connect url you can also have a url that passes um a it's not called a search phrase but like the initial query that could be a search phrase so it could be configured to bring up a specific visualization um when it loads but you can't really uh create a visualization this way uh and then say okay i want to embed this exact visualization in my application um and i still have it be interactive yeah that's not really something that bloom is uh targeted for and so yeah and there's um in this video series on the bloom landing page let's see yeah here we go so there's a video series that that honorog did uh he's the product manager for bloom um that he did a while ago i say he's the uh used to be the product manager for bloom he's now now oversees a larger set of tools [Music] this video specifically number six this one talks about inner integrations in bloom and specifically using it um in an iframe that i mentioned you can kind of see here where we have other types of visualizations so some geospatial some charts uh and then bloom is integrated in that so we have a link to bloom um inside some of these like map markers and stuff so i'll share the link to this page again that gives you more of an idea of kind of how you can embed bloom link to it um and that kind of thing but yeah that's a really good question because that's the kind of thing that we we want to build with this lobsters application we want to we want to include a few more things like i think we want to be able to maybe bring up an iframe with the article content maybe we want to have some charts in there that show like the most popular tags according to something i want to be able to have a much more custom built application for what we want to build with the lobsters graph and so bloom is not really geared for that and so that's why we're going to be building our own full stack application so i'm going to close out of bloom here let's close this page and let's talk a little bit about what the stack for our full stack app is going to look like so we have the data in the database and um i said we're going to use next.js which is a react framework and it's next.js is really a full stack react framework so drop a link to next js uh here so next js it basically takes react and then adds a bunch of things uh on top of it so it gives us things like a file based router so instead of having to figure out how to handle routing we just create a new javascript file and we are and we have a route so if we create um uh like blog js we have now we now have slash blog route in our application it has support for api routes which is what we're going to look at today which then when we deploy them to versel vercell is the company that sponsors and maintains an xjs but has a hosting platform so when we deploy our next.js application to vercell those are automatically deployed as serverless functions so we don't have to think about how to deploy our in this case what's going to be a graphql api so that's the first step is we want to build our graphql api we know that there's a really neat graphql integration for neo4j called the neo4j graphql library so we're going to use that to build our api layer and then once we have that we can then take a look at the front end for our application and figure out what sort of visualization tooling we want to use to get started there but that that front end piece that's a topic for a further stream today where i just want to get the graphql api up and running and deployed out there uh two for cell so cool that's the goal uh so this is a really nice starter starter command line tool i guess you'd call it if you've ever used um create react app or there's even one for it for grand stack create grand stack app we can do that with next as well so i'm going to run npx create next app and this is going to create a new directory in our github repo where our next application will live i guess i'll just call it next so this is going to go fetch the latest version of next and install that and we'll install our dependencies cool so now you can see we have this next directory and let's cd into next and do a yarn dev to start a local server hello from brazil hello welcome thanks for joining today where is everyone else joining from here so on localhost 3000 is our development server with this basic landing page that's kind of the simple landing page that we get with the skeleton app that we created so let's see what we have we have this next directory so that's where our next application lives it had a readme with some instructions it has package.json that installs its dependencies which is just react and the next framework we have some config that we shouldn't need to think about today brought in a git ignore which is great we have some default css we have a public directory and so corey earlier was asking about if i want to host some static images things like that can i do that in versailles and they would go here in your public directory and then they would get a route to these files and here we have pages so pages this is where we're going to spend most of our time today so i said earlier that next js has a file based router built into it so if we create a file in this pages directory we then get a route in our application to it and by default index.js is up to our aura instance so let's first set up kind of just a simple graphql in point in next.js and then we'll add in the near j graph with aura corey says 100 gigs for the free tier oh yeah so is that that's 100 gig of was that like download uh per month on versailles i guess that's pretty good or maybe that's storage either way that's that's pretty good for the free tier um okay so if we look in the api routes there's some examples here in the next.js docs and one of those is looking at graphql so i looked at that earlier and figured out what we need to add a graphql endpoint so let's add a graphql js file uh we're going to need to add a few things here so let's add a few dependencies so i'm going to install apollo server micro in micro and the graphql javascript implementation so micro is a http framework that works really well with next i think it was also built and maintained by the folks at versailles and there's an apollo server implementation of micro and so that's what we're going to use for the http layer apollo server is really nice because we can basically just create type definitions resolvers put those together give those to apollo server and apollo server handles everything for serving that graphql schema so let's bring in the gql template tag so the gql tag that allows us to tag our in this case our type defs so they get parsed as a graphql those graphql typed offs so we want apollo server micro and let's start off with some type defs we'll just create kind of a a simple example just proof of concept here so maybe just like a user that has i don't know an id or a name or something and then a single query field it's gonna allow us to get a single user so pretty simple type defs there let me make this a little bigger oh that's too big there we go uh and then creates uh resolvers so a graphql schema is a graphql schema is type definitions so that defines the data available in the api and resolvers which are functions that specify how to fetch that data or how to in the case of mutations how to update that data somewhere how to resolve that graphql request so for our resolvers we're just going to create one query resolver which is going to be pretty simple here and it's just going to return this really simple user object um okay so that's typedas resolvers the next thing we need [Music] is our apollo server instance so let's create that we need to pass typedefs and resolvers and then the next thing we need to do this is for that the server starts before we return the handler to handle the request so what we're going to do is say apollo server start and that's going to return a promise which we're then going to await in this handler function they're actually exporting so we're going to await starting of the server and then create the handler once we know that the server is started and that's going to be there's a few extra things in here that i'm going to skip that are specific to setting up apollo studio which is kind of like graphql playgrounds but i think we'll still use graphql playground um okay so we create the handler and then we also need to export a config object that is in this case uh turning off body parsing for the api and that's just saying that uh we know how to parse the body of the request coming in so apollo servers can handle that so we don't need to worry about it uh okay so there's one other things i was looking at this earlier uh let me i think i saved a link to to this so apollo server 3 um now by default not include graphql playground so graphql playground is like a um like a query workbench for graphql so it allows us to look at the schema to write graphql queries gives us autocomplete so it's it's really handy for testing and development when we're working with graphql um graphql playground has been deprecated so apollo server does not include that and they instead link out to apollo studio which is like a hosted version of a graphql query playgrounds but i like to use playground i'm familiar with it so we can add a couple of things to in a ground it's now available as a plug-in so i'm going to do that so let's say apollo server plug-in landing page graphql playground from apollo server core and then uh when we create our apollo server instance we say playground true and pass our plugins the apollo server plug-in landing page graphql playground hopefully i spelled that right okay let's start this up and see if that works so uh with a poly server micro like what we're using and basically what it does is we give it type definitions that define the data model in the database so we can basically look at our database and see what labels and property types we have create type definitions that match that and we then get a fully functional graphql api backed by neo4j they interact with our database so it generates all of the query fields all of our mutation operations there's uh authorization built into it so really really powerful uh also includes the ability to define custom logic with cipher which is super neat so it's a tool in the toolbox that i am uh usually very excited about so that's what we're going to use today and to get started with that we are going to add a couple of dependencies so let's add uh neo4j graphql and neo4j driver so neo4j driver this is the neo4j javascript driver that allows us to send queries to the database and interact with neo4j using cipher in this case we're not going to be writing cipher the neo4j graphql library is going to be generating cipher but it uses the driver the neo4j driver behind the scenes to talk to neo4j so we just kind of have to set up the driver hand it off to the library and then we just kind of forget about it okay so we installed that so let's take out well i guess first let's import the neo4j driver and let's import the new graphql class i guess we should set up prettier or something for formatting that's okay though uh okay so i'm going to tear out our resolvers here we do not need the resolvers that is always very fun we can just delete those our resolvers are going to be generated for us from these type definitions so to node labels um so where we say type article in graphql that is defining a node with the label article and then fields in graphql become properties in the neo4j database so in this case for article articles have an id they have a url that'll be a string a score that's an integer a title which is a string comments so this is the url to the comments so that's a string and then a created property uh which is a date time and with the new geographical library we can use date time and point those get added and mapped to the native database date and spatial types okay what else do we have we have user so user uh has a user name that's a string user has a also a created date time field karma karma is can be an integer about that's a string and the avatar that's the url for the user's avatar [Music] um okay and then a user is gonna grab by maybe we'll just do that to keep it simple so a user was invited by um another user and with the new graphql library we use schema directives and in this case a directive called relationship to model the relationship type and direction in neo4j so in this case we're going to say the type is invited by invited buy and the direction uh is going to be out so i was invited by a different user okay and actually is that right so i have i have a user who is invited by another user and i have this invited by relationship that's going out so if this is me the direction is invited by out yeah that's right i don't know why that was uh didn't seem right in my mind but okay users also are submitting articles so let's call this field articles and this is going to be a object array field because i can submit multiple articles this is going to have a relationship directive the type is submitted and the direction is out so these are articles that this user submitted and then an article an article let's call this user so a single user submits an article one thing that's nice about the relationship directive we could just map the type and call that the field name for the relationship but having this relationship directive allows us to keep the conventions of the two different languages so with graphql we typically use lowercase for fields in propertygraph model and neo4j we typically for relationships we are using upper case so this allows us to keep those two conventions and the direction for that is going to be in user submitted an article and then the other thing we have here are tags so a tag just has a name i think yeah and then a tag is going to be connected to articles that also is going to be an object array field and what did we call that has tag so an article has a tag so that's going to be direction in and then for the article [Music] let's say article has tags and the relationship type is has tag and direction is out okay so those are our type definitions we removed the resolvers we don't need those but what we do need to do a couple of things first we need a neo4j driver instance so driver neo4j dot driver and then this is going to be the the uri so something like this but we need this for our neo4j aura instance and then we need our username and password which is something like this now i don't want to just hard code these values in so let's let's um set these up as environment variables with next.js i can just create a um dot env call it dot local and here i can set environment variables uh we don't need the extension for that so let's create a neo4j user environment variable um a neo4j process dot env dot uri this is going to be neo4j user and this is going to be neo4j password cool oh and then let me actually set the password so i'm going to do that off screen just so that i'm not sharing my password with everyone and someone doesn't go in and i don't know delete all my articles or or something like that so give me just a sec to do that okay on that cool and then i don't think we need to change anything else um do we no i think that i think everything else should work so let's do a yarn dev and fire this up but we'll see also we might need to add some custom logic when it comes time to build out uh the front end so that's probably a good point for the graphql api um we could add add some other things using say like the cipher directive to add some for the cipher direct what kind of custom logic we might want to add to this api using cypher we really have the ability to define any logic here really using cipher and add that to our graphql api which is which is super powerful uh okay so what do we need to do next the uh the next thing we need to do is deploy this to versailles so versel let's go to purcell.com this is my dashboard i just want to look at the website um can we do that we can look at the docs so vercell is a hosting platform that allows us to deploy web applications static content serverless functions there's lots of things we can do with for sale vercell again they built and maintain and sponsor an xjs so there's lots of really good next.js integrations with versailles suction running every hour and so i didn't i didn't pull down immediately so let's pull down the latest and we'll do a merge and then we can push up okay so we've pushed that up to github so if we go to the repo now we should have yep here's our next directory with our next app and so now what i want to do is inversel create a new project from a git repository so i've i've already connected versel to my github account so it knows uh it knows all about my github repos okay and it says do we want to create a team no i don't think we need to create a team i think it'll just be me working on this so we'll skip that so configure the project um it is a next js app and we need to change the root directory because we have our next app here in this next directory so we're going to have some other things like we have our our give actions workflow which we don't want vercell to have to think about so our root directory is the next directory and then build output settings don't need to do anything there and then environment variables so we created some environment variables uh in the env.local file and so those were not checked in to github so those could be like our development environments and now we need to set those for our our production for the one we want to deploy so we need to add some of those here so we had neo4j user is neo4j we had a neo4j uri which i have over here preview build so if we have a pull request we can build and deploy pull requests and then send someone a link to that and they can then play around with it before then switching that over to production and then that is just hosted on the production url so that's a really nice feature of vercell it looks like it deployed our application let's go to the dashboard and here's the url for it so let's open that so yep it's we for the front end piece of it we didn't change anything so we just have this super simple welcome to next js but we're what we're interested in is slash api slash graphql and oh we got a 500 error let's take a look at the logs so we want the function logs cannot find module ts tiny invariant oh yeah so um i saw i saw this air and um i think what this is i saw this this uh previously on another project i think what this is uh is that there's a bug somewhere in what is it called the tree shaking issue um that vercell tries to do so it thinks if you're not using some code then it doesn't deploy that and i think there's some issue here with that so where it didn't actually deploy this ts tiny invariant module to our serverless function but then something in apollo servers actually trying to use it um you know i saw a github issue or something that had the fix for this but i think we can do a workaround basically by just importing the package here even if we don't use it i think that we'll get around our bug here so let's add i think this is just a temporary bug i think this is this is something that has been seen and addressed uh fix serverless function error and we'll push this up and hopefully our give action didn't run again and we have a merge conflict nope we don't cool in cpi slash graphql and we should see graphql playgrounds nope another 500 error let's take a look at the logs uh functions there we go unknown scheme neo4j oh so that looks like a typo when i set the environment variable that's not good let's edit that so my environment variables the neo4j uri yeah i left off the in okay let's fix that and then i think i think i'll need to redeploy this so that it picks up the change in environment variable so this is going to build again oh cory cory says he's back after some bandwidth issues cool no worries thanks glad you made it back yeah i've been having um internet issues as well it seems like so not sure what's going on these days okay so i think that redeployed let's try this again slash api graphql still got an error let's look at our logs again unknown scheme oh did i not maybe i didn't wait maybe i didn't actually redeploy it oh it's still building i was impatient uh okay i think it's done now api oops not neo4j graphql there we go so now we've got graphql playgrounds and [Music] oh i think i think i know what the error is here i think that we did not enable introspection so [Music] apollo server looks at the node env environment variable and um when we're running locally and we're not in production when we're in development apollo server will enable introspection but once we've deployed something and we're in production then by default it does not allow introspection and so graphql playground needs introspection to be able to render the docs so i think we just need to um in our case like i don't have anything secret here in api so playground is always going to be enabled um i just also need to enable by created in descending order this should give us the 10 most recent articles oh let's actually also get the created date so we can make sure so these should have all been submitted in the last hour um yeah that looks right so great so here's the url for that i'll drop this to the chat so this api should be public now so anyone should be able to access that and write some graphql queries um cool so the code is on github i'll link that as well we'll do a write-up of what we built today but just to recap a bit we looked at the lobster's graph project where we're scraping data from the lobster's social news aggregator and we built a graphql api using next.js api routes we deployed that to versailles and now we have a public graphql endpoint for querying lobsters data hosted on neo4j aura and the next step is to i guess take a look at the front end piece of our application so i said i want to build this application that's based around interactive graph visualization that can help us explore this data set and find some insights in that so that's the plan uh we will pick up from where we left off uh next time uh and thanks for joining today and uh we hope to see ya