Getting started with Neo4j, Gatsby, and GraphQL

- Hey Folks, 00:06 welcome to the Neo4j stream, 00:09 My name is Will. 00:11 Sorry, we missed last week, 00:14 I was on vacation. 00:17 But 00:18 back this week 00:20 to our regular schedule, 00:22 every Thursday 00:25 at three-- 00:26 2:00 PM specific, 00:28 which is about now, 00:29 we dig into 00:31 GraphQL and GRANDstack 00:34 on the Neo4j stream. 00:38 So previously we've been 00:40 working on this real estate search application, 00:45 which I think we've made pretty good progress on. 00:48 Last time we did 00:51 protecting mutations 00:55 with otzero 00:56 and 00:57 forums 00:59 in react so we can add listings now. 01:01 So I think we'll take a break from 01:04 the real estate search app, 01:06 since we have pretty functional application there 01:09 and 01:10 dig into something new. 01:13 And what I wanna do with this new project 01:16 is build a travel guide. 01:21 So a website that's gonna show me some points of interest 01:26 and how I can get between these points of interest 01:30 or some routing. 01:33 And to do that, 01:34 I'm going to use Neo4j, 01:37 Gatsby JS 01:39 and GraphQL. 01:42 And so today, 01:43 we'll be just sort of digging into the different pieces 01:47 and taking a look at how to get started 01:52 with 01:53 Neo4j and Gatsby. 01:55 And 01:57 I'll heavily focus on GraphQL. 02:00 Since GraphQL is how we'll be getting data 02:03 out of Neo4j and into Gatsby. 02:08 So let's just 02:11 jump in 02:12 and take a look at 02:14 Gatsby. 02:16 So if you're not familiar with Gatsby, 02:19 it is a 02:21 framework for building websites. 02:26 Some people refer to it as a static site generator. 02:30 And basically what Gatsby does is it uses GraphQL 02:35 as a data source. 02:37 So if you have content, 02:40 say in, 02:42 in a CMS and markdown files 02:46 and in a database, 02:48 it uses GraphQL to bring that content together 02:51 and then uses 02:53 react 02:54 to build the web application 02:58 and generates static site content 03:02 using GraphQL as sort of the content source. 03:08 Full disclaimer, I know, 03:10 that's about all I know about Gatsby at this point. 03:13 So this will be a bit of a learning experience for me, 03:19 for sure. 03:19 But 03:21 that's my basic understanding of it, 03:23 I know you can also bring in 03:27 third party GraphQL API. 03:29 So Gatsby itself has a GraphQL API 03:32 that it uses 03:35 as part of the build process 03:38 to build the web apps. 03:43 And we can hook in our own third party GraphQL APIs 03:48 into that GraphQL API into the Gatsby GraphQL API. 03:54 And so that's what we want to do today 03:56 is take a look at how we can use 04:00 some of the GraphQL tooling for Neo4j, 04:03 to build a GraphQL API on top of Neo4j 04:07 and then feed that into a Gatsby build process. 04:15 Cool. 04:16 So, 04:19 let's go ahead and get started with Gatsby. 04:24 So, 04:26 we go to the quick start, 04:32 we can see there's a Gatsby CLI, 04:35 so I have already installed that. 04:37 So I have the Gatsby CLI ready and then creating a new site 04:42 is as simple as a Gatsby new command. 04:46 And then we can use these Gatsby starter projects. 04:51 So let's take a look at the starter library. 05:01 So there's lots of different starter projects 05:04 that we can start with for Gatsby, 05:10 441 of them. 05:12 I think, 05:14 let's just pick a fairly simple one. 05:17 So, Gatsby starter blog. 05:19 Let's take a look at this one. 05:26 So a blog landing page showing some blog posts 05:31 and then 05:33 yeah, 05:34 some static content. 05:35 So this looks like an okay place to start. 05:40 So if we imagine for our travel guide, 05:46 we can have sort of a, 05:47 like a post entry, 05:50 for each point of interest that's gonna show 05:52 some information about the point of interest, 05:55 what it is, 05:57 bring in some photos, 06:00 routers to other points of interest, that kind of thing. 06:02 So this looks like a good template to start with. 06:07 So 06:09 let's see, 06:10 let's copy 06:14 URL for the starter backtrack quick start. 06:19 Okay, let's create a new project here. 06:24 I'm gonna call it central perk. 06:28 That will make sense in a minute, 06:30 when we look at, 06:35 the Neo4j data that we're actually gonna use for this. 06:40 So let's see, let's get this out of the way here. 06:44 Okay, and then we do, 06:48 Gatsby new, 06:51 let's just call this 06:55 Gatsby 06:56 since it's inside our central park directory. 07:01 Well, we'll call it Gatsby site (indistinct) 07:04 Okay, and then the URL for the starter. 07:08 So this is pulling down 07:13 the Gatsby blog starter and creating a new project for us. 07:20 If you have any, 07:21 any questions or thoughts, 07:24 feel free to ask in the chat. 07:35 Okay, so we've created 07:38 a Gatsby sites. 07:41 Go to Gatsby site. 07:43 We can do Gatsby develop. 07:49 And this, I think should 07:53 do a couple of things. 07:56 One is it should 07:59 spin up a GraphQL API, 08:03 and that is GraphQL API that has sort of all of the content. 08:08 And then also it builds our Gatsby site, 08:13 local host 8,000, 08:17 let's take a look, 08:18 local host 08:22 8,000. 08:26 Here's our 08:29 Gatsby site, 08:30 and then if we go to local host 8,000 08:36 slash underscore, underscore, underscore GraphQL, 08:41 then we get the 08:45 GraphQL API 08:47 for our site. 08:51 Cool, so this is the API 08:55 where during the build process for Gatsby, 08:57 it's pulling in all of the actual content, 09:05 Roseanne says, "Hi," in the chat. 09:07 Hello, thanks for joining today. 09:13 So for example, 09:18 if we take a look here 09:23 at 09:26 some of the entry. 09:28 Let's say all site, 09:36 page info. 09:46 A lot of info there. 09:47 How about page info, 09:50 all site, 09:52 nodes. 09:56 We can pull in build time, host, parent. 10:01 What we want for the actual content, 10:04 let's take a look here 10:05 at 10:06 the 10:07 source 10:09 and we'll see what GraphQL query 10:11 we're actually running to populate this. 10:15 So, 10:17 let's open up, 10:18 yes, code 10:24 and let's see, 10:25 let's do a little 10:29 manual split screen here. 10:40 There we go, okay. 10:41 So Gatsby site, 10:44 we take a look at the Gatsby config, 10:49 we have some plugins here. 10:53 So Gatsby source file system, 10:57 in a few different directories. 10:59 So 11:00 making this is pulling in 11:03 some assets from the file system into the GraphQL API 11:08 it's using remark, 11:10 which is, I think, a markdown 11:14 parser. 11:15 So I think most of the actual content for this comes from 11:20 these markdown files to the actual blog posts. 11:23 What we're gonna want to do is kind of replace these 11:25 with content from Neo4j. 11:31 And, 11:33 let's see if we look at 11:37 Gatsby node. 11:39 So this I think is 11:42 what runs GraphQL query 11:44 to see all of the pages that need to get built. 11:46 So let's copy this query. 12:03 Oh, it failed to fetch because we stopped the Gatsby server. 12:08 So let's start that again. 12:13 Gatsby develop. 12:24 And this will spin up our GraphQL API 12:26 and it'll be side again, okay. 12:28 So now we should be able to run this query and yep, cool. 12:30 Now we can see, 12:32 so all markdown remark. 12:34 So this is getting, 12:35 I guess, all of the pages that are being processed by 12:39 the remark markdown parser, 12:43 and then showing us that the slug for each page 12:47 and the title for each page. 12:51 So I'm guessing, 12:53 this is all of the pages that need to get built. 12:55 And then if we look at 13:00 not in content, 13:02 but in source, 13:06 pages, 13:07 index, 13:09 we can see, so this is 13:14 the react code for the index page. 13:18 We can see the GraphQL query 13:21 that we're running for that as well. 13:23 So let's just 13:27 run that query as well. 13:31 And here we're getting so some site metadata, 13:35 then all of the pages, 13:37 and then we're bringing in a few more fields. 13:39 So now the front matter, 13:41 so the front matter, 13:43 we'll look at these markdown files, 13:47 content blog, 13:48 hello world, 13:51 the front matter is 13:55 are these three fields here. 13:56 So we have title, date and description, 13:58 title, date, and description in GraphQL. 14:00 Okay, cool. 14:01 So this is sort of mapping things in markdown to GraphQL 14:07 as part of that process, that's neat. 14:11 And if we look at the templates, blog posts, 14:14 so for each post, 14:17 here's the react components that are rendering 14:22 based on the data coming back from the GraphQL API, 14:26 which is 14:29 this query. 14:33 So blog posts by slug. 14:35 So, 14:37 I know I already pasted in the slug for one of the pages 14:41 we're supposed to explore in there. 14:45 And here's where we're bringing in the actual HTML contents, 14:49 the actual contents that gets rendered for each blog post. 14:55 and in this case, 14:56 for the blog post with the slug new beginnings. 15:04 Okay, cool. 15:04 So we can kind of see what's going on here 15:08 with how that GraphQL API gets built using these plug-ins. 15:13 So like parsing markdown 15:17 to GraphQL, 15:18 and then the build process 15:21 runs this GraphQL query renders these, 15:25 these react components to build the static site. 15:29 Okay, 15:30 cool. 15:33 That is, I think, good enough for a basic understanding 15:36 of what's going on here. 15:39 Now, the next thing we want to tackle is 15:43 pulling in third party GraphQL content. 15:47 So I know what I want to do is build a GraphQL API 15:51 on top of Neo4j with some data that I want to pull in 15:54 to my travel guide sites. 15:58 Assuming I have that GraphQL API, 16:00 how do I hook that into the Gatsby GraphQL API 16:05 for this build? 16:08 Well, if we take a look, 16:11 Gatsby, 16:15 GraphQL, 16:16 using third party GraphQL APIs, that's what we want. 16:22 So for this, it says we need to use 16:25 the Gatsby source GraphQL plugin. 16:29 And then in our Gatsby config, 16:34 we basically point it at the GraphQL API, 16:39 and we give it a namespace. 16:41 And then, 16:43 it looks like that GraphQL API is then kind of stitched into 16:48 the Gatsby GraphQL API, and we can then 16:52 query it using that namespace that we gave it in the config. 16:59 Cool. 17:00 So that, that sounds straightforward enough, 17:04 but we need a GraphQL API. 17:08 So first, let's spin up a Neo4j sandbox instance, 17:16 and I'm going to use 17:21 a specific 17:23 Neo4j sandbox. 17:25 So this, this one is hidden, 17:27 that has a specific URL to unlock it. 17:30 So let me drop that in the chat. 17:36 So it's Neo4j.com/sandbox use case equals open street map.* 17:43 And we'll take a look at this in a second. 17:46 So question in the chats, 17:49 Clearly using Neo4j for knowledge, graph creation, 17:51 but my requirement is to create multiple databases 17:54 in one Neo4j instance. 17:56 Is it possible to have multiple databases? 17:59 Yes it is, 18:02 Oh, and then, 18:02 and then he says using Neo4j version 3.5. 18:06 So you can create 18:09 multiple databases 18:12 in Neo4j, 18:20 managing multiple databases in Neo4j. 18:23 This is probably the best resource developer guide 18:27 on working with multi database. 18:29 Yeah, so multi database 18:33 is not available in Neo4j 3.5 18:36 This is introduced in Neo4j 4.0, 18:41 So let me drop this link in the chat. So we have that. 18:46 So if you want to take advantage of this feature, 18:49 then take a look at upgrading to 4.0 18:55 because it is not available in 3.5. 18:57 And basically this guide goes through sort of creating 19:02 two different databases. 19:05 Switching between them, 19:06 loading 19:09 looks like loading the Northwind data set into one 19:12 and loading the movie database into the other. 19:19 But cool, yeah, good question. 19:27 Okay, so if you haven't used Neo4j sandbox before, 19:31 this just allows us to spin up Neo4j instances 19:35 that are loaded with specific data that are private to us. 19:40 So if you haven't used it before, 19:41 you'll just need to sign in with, 19:46 with like Twitter, GitHub or create an account. 19:52 And I'm going to launch this open streetmap data sets. 19:56 If you, if you participated in the some of the nodes, 19:59 then you've probably seen this 20:02 open streetmap data set before. 20:05 So what this is, 20:07 it's a data set 20:09 of open streetmap data 20:12 from Central Park in New York, 20:17 that includes point of interests 20:19 and ways that's open streetmap terminology 20:24 for things like 20:28 the pathways 20:30 that are in central park 20:31 that are connecting points of interest 20:33 or the outline of buildings, 20:36 the outline of fountains and things like that. 20:43 So let's open this up. 20:51 So what we're gonna do is take a look at 20:54 this open streetmap data set, 20:57 and specifically we'll take a look at 21:00 the points of interest. 21:03 So the points of interest here 21:06 are going to be kind of the things in the travel guide 21:11 that we're going to show detailed information about 21:13 and show how to route from one point of interest 21:15 to the other and, and that sort of thing. 21:23 Okay, so here's the Neo4j sandbox. 21:28 Let's take, do a call 21:32 DBschema visualization 21:37 to give us an idea of the schema. 21:41 And this, this looks a bit like a rat's nest here, but 21:48 a lot of this we won't need to think about. 21:54 So what's going on here. 21:55 So the-- 21:57 the tool that we used to create this dataset by the way 22:00 is available on GitHub. 22:01 It is Neo4j contrib, just OSM. 22:07 Yes, this is the what streetmap importer for Neo4j, 22:11 I'll drop that link in the chat. 22:14 And basically, the way this works is you give it 22:17 a open street map dump. 22:20 So you can download, 22:23 open streetmap.dot org. 22:27 You can download, 22:29 data from open streetmap, 22:33 either in this tool 22:36 (mumbles) we zoomed in into central park. 22:39 So what we have is, 22:43 this area here. 22:45 So all of central park and the, 22:53 the crowdsource data. 22:55 So open streetmap is crowdsource. 22:57 So it's people sort of going around and saying, 22:59 Hey, there's a sidewalk here. 23:01 Hey, there's a building here. 23:02 There's a road here, 23:03 adding in some attributes and whatnot. 23:06 So all of the data that is populating this map 23:10 comes from crowdsource data that has been uploaded 23:13 to open streetmap. 23:14 And open street map is super interesting. 23:16 It's a very rich dataset. 23:17 There's all kinds of attributes and tags about, 23:23 the different ways that are included in open streetmap. 23:28 And it's great for routing, finding points of interest, 23:34 And actually I think it's data 23:36 powers most of the major mapping applications. 23:46 Thanks for answering. 23:49 Look at updating to Neo4j reason using 3.5 23:52 was graphaware elastic search plugin, 23:55 hopefully that works with 4.0. 23:57 Yeah, I'm not sure. 23:58 I would imagine that there is a 4.0 version 24:03 of the graphaware elastic search plugin, 24:06 but I'm not sure, 24:11 but yeah, I would imagine that, that there is, 24:14 if you can't find what you're looking for, 24:18 run into any issues with that, 24:19 you can always ask on the community sites for Neo4j. 24:24 So the great, 24:26 quick resource, community.Neo4j.com where you, 24:29 which is a forum where you can sort of ask questions 24:32 and folks will help you 24:35 with all your Neo4j questions as needed. 24:42 Okay, 24:44 so what I did is, 24:48 an export of open street map, 24:50 just the central park, 24:51 ran it through 24:54 this open street map importer for Neo4j. 24:56 And then that's what we use to create this sandbox datasets. 25:03 but you don't need to do that. 25:06 That's just kind of an idea of how you can create 25:09 this data set for sort of your own area of open street map 25:15 that you're interested in, 25:17 but, okay. 25:18 So here's the data set, 25:19 so we have points of interests. 25:22 They are connected to 25:26 OSM nodes, 25:28 which are connected to OSM way nodes 25:34 that are connected to an OSM way. 25:37 We have some metadata in OSM tag nodes. 25:43 So that's kind of the base open streetmap 25:50 dataset, 25:50 where we have ways and ways in open street map. 25:55 That can be anything from a streets, a sidewalk, 26:00 a building, a way, just kind of a, 26:02 like a generic term for like a feature, 26:06 might be another word. 26:09 And then 26:11 all of the actual 26:14 sort of observations. 26:17 So as someone is going around crowdsourcing data to upload, 26:23 they say, okay, here is 26:26 a way, this is a sidewalk. 26:28 And then they go along and sort of walk different paths 26:31 of the sidewalk and upload what become OSM nodes 26:35 that have a latitude and longitude associated with them. 26:37 So a way, is really in this model is really a linked list 26:43 of OSM nodes each with its own latitude and longitude. 26:46 And we'll take a look at that one in a minute. 26:49 And then what we've done is built sort of a routing graph 26:54 on top of that. 26:55 So, if we're interested in how to get from one 26:58 point of interest to another, 27:01 well, what we want to do is, 27:05 really just sort of find the intersections that connect 27:09 the different ways. 27:10 So there's this routing graph that is basically made up 27:13 of these intersection and routable nodes 27:16 that sort of sits on top of the collection of these ways. 27:19 So to find a route from one point of interest to another, 27:23 we basically just follow these route relationships, 27:28 connecting, connecting intersections. 27:31 And then of course, those intersections 27:32 are then connected to the ways which have the actual 27:36 data for the route that we're taking. 27:39 Let's take a look at an example here. 27:41 So, 27:43 let's find 27:47 a way. 27:49 Here is 27:52 West 90th street. 27:55 And so this node 28:00 represents a single way. 28:03 In this case, West 90th street, 28:07 we find that on our map, 28:14 maybe 6th, 28:17 96th 28:21 East, this is the East side. 28:23 Here's what, so here's the West 90th street. 28:29 So it's representing this way, 28:30 it doesn't cut into central park. 28:32 So I think we probably won't have 28:34 too many observations here, 28:35 but just kind of around the edge, but okay. 28:38 So we have this tags relationship. 28:41 So this has some metadata. 28:45 Maybe I can make this a bit bigger, 28:47 So it's easier to see, 28:50 zoom in a bit 28:53 So this, OSM tags node has some metadata about 28:57 West 90th street. 28:58 So can you ride bicycles on it? 29:01 Yes, 29:02 highway, 29:05 this is a service road, 29:06 it has a name, 29:08 Yes, it's one way. 29:10 We have some metadata, 29:11 then we have this first node relationship 29:16 to the OSM way node, and then that's connected 29:21 to the OSM nodes. 29:22 So this OSM node kind of represents 29:25 the acting that has been actually 29:32 sort of crowdsource. 29:33 Someone says, Hey, 29:34 here's the latitude and longitude for this point. 29:37 And then we have this kind of linked list 29:40 of more OSM way nodes that are connected to more OSM nodes. 29:46 So if we were to just continue on this link list, 29:51 each one of these represents a point on West 90th street, 29:57 and you can see that this routing graph is sort of built 30:00 on top of that. 30:04 Okay, so those are the ways, 30:06 and then we've added these point of interest nodes. 30:10 Take a look at those. 30:14 How about the Dancing Crane cafe? 30:20 It seems like a good one. 30:22 So some of these 30:25 OSM nodes 30:26 based on the tags that they have 30:29 might have attributes like restaurants or cafe 30:33 or something like that, or a fountain or a museum. 30:38 And so in that case, we know that they have some amenities. 30:40 So we marked them as a point of interest. 30:43 And in this case, 30:46 this is the Dancing Crane cafe sort of type cafe, 30:51 it's connected to a tagged node 30:52 that has a bit more metadata 30:56 about it. 30:57 You can see some of the other things we have are 31:00 here's a statue, 31:02 the fit screen, HELOC statue, 31:09 here's the pond, which is a body of water. 31:12 So what I want to do is expose a GraphQL API 31:16 that basically just exposes the point of interest, 31:20 the points of interest. 31:21 I'm not necessarily interested in sort of the routing 31:27 the more detailed graph, 31:30 the open street map data. 31:32 Instead, I just sort of want a way to 31:36 find points of interest within our datasets. 31:39 So we can pull that into our travel guide. 31:43 One thing we do want to do though, 31:45 is to be able to handle 31:48 routing, 31:50 which we can do in Neo4J, 31:52 our graph database it's great for 31:56 routing, 31:57 finding efficient paths from one place to another. 32:02 So let's take a look at how we would do that. 32:05 So let's say, 32:07 how could we find a route from let's just pick these two 32:11 from the pond to the Dancing Crane cafe. 32:15 So I've been, 32:16 And you do in the pond. 32:18 This is where they rent the boats in central park maybe, 32:21 So I've been rowing my boat in the pond 32:24 and now I'm ready to go to lunch 32:27 at the Dancing Crane cafe. 32:31 Let's if we can write a query to find a route 32:33 from one to the other. 32:35 So starting off find 32:39 0.1 is going to be a 32:42 point of interest 32:43 where the name 32:46 is 32:48 the pond. 32:51 And P2 is going to be a 32:56 point of interest where the name is the Dancing Crane cafe 33:03 First off, let's just see if we can find those. 33:06 Yep, then we go. 33:07 So two points of interest. 33:10 Cool, so how do I find a route between them? 33:13 Well, 33:14 we just follow 33:17 these route 33:19 relationships 33:20 and we can see pretty quickly we have lots of choices. 33:25 So first off from the pond, 33:28 we can follow this route relationship, 33:30 but then we have to decide, 33:31 Oh, do we go this way? 33:34 This way, this way? 33:36 Do we go towards the Thomas Moore statue? 33:41 And you can see pretty quickly 33:43 that as we expand out this graph, 33:45 there's lots of route relationships to follow. 33:50 So we wanna take the shortest path 33:55 from the pond to the Dancing Crane cafe. 33:58 We can do this and cypher with the shortest path function. 34:03 So this is going to look something like this. 34:06 We're going to say match P 34:10 equals, 34:12 shortest path 34:15 from P1, 34:17 following routes relationships. 34:19 So I was going to put an upper bound here. 34:21 Let's start at 200 and see if we find a path 34:26 to P2, 34:31 and let's return the path. 34:36 Cool. And here's the shortest path that we found. 34:40 So it follows these OSM nodes. 34:45 And each one of these has a latitude and longitude, 34:48 so if we wanted to, 34:49 let's say we wanted to plot this on a map. 34:54 So we needed the latitude and longitude 34:56 for each one of these OSM nodes to draw the path. 35:00 We can do that by unwinding 35:03 over 35:05 the nodes in the path 35:07 and 35:09 returning, 35:14 let's see, 35:16 let's make an object to return for each one of these. 35:19 So the latitude is gonna be in that 35:22 unwind, 35:24 node P 35:25 as N, 35:27 in that location, 35:28 so location is a point 35:32 property on each one of these 35:36 dot location dot latitude 35:38 and 35:40 longitude 35:41 is going to be 35:42 N dot 35:45 location 35:46 dot longitude. 35:48 And that should return our path. Cool. 35:50 So here's all the points that make up the shortest path 35:55 from the pond to the Dancing Crane cafe, 35:59 using cypher's shortest path function. 36:04 This may not be the actual shortest path. 36:08 We'll take a look at that later on, 36:11 but what this means is the shortest number of relationships. 36:18 So the shortest number of hops that we make, 36:21 but if we look at these route relationships, 36:25 we can see that there's a link. 36:28 So it's sort of a, 36:30 or rather a distance. 36:32 So from this point to this point, 36:34 it is 10.39 meters. 36:37 This point to this point, it's five meters. 36:39 So these are not sort of evenly spaced observations. 36:42 Remember, this is, this is crowdsource data. 36:44 It's not sort of evenly spaced out with an observation, 36:49 every meter or something like that. 36:51 And so really what we want to do is use 36:54 like the Dijkstra or the A-star algorithm 36:58 to find the shortest weighted path. 37:02 So the shortest distance 37:06 is what we will extend, 37:08 but this is good enough for now. 37:11 So question, what does the topography stuff do in Gatsby? 37:15 Always wondered. 37:19 Yeah, 37:20 I don't know. 37:21 I'm assuming there's, 37:23 I mean, with Gatsby, 37:24 so it's my understanding. 37:25 You can import pretty much any react styling components. 37:31 So I'm assuming it has 37:34 a template that we chose some topography styling, 37:40 but I don't know. 37:42 We'll have to, 37:43 we'll have to explore that. 37:44 Like I said earlier, I know very little about Gatsby. 37:49 I've never actually used it for anything. 37:53 So 37:54 this will, 37:55 be a fun thing 37:56 to dig into. 38:01 Okay, 38:01 So we've got 38:03 our data 38:04 in Neo4J. 38:05 We kind of know that 38:09 what we want to make available out of Neo4j, Gatsby, 38:11 the points of interest and some of this routing stuff. 38:15 Okay, great. 38:17 Now we need to create 38:20 a GraphQL API 38:24 that is going to expose this data in Neo4j to Gatsby. 38:29 So let's switch over 38:32 to the S code 38:34 and 38:36 we create a new 38:41 directory alongside (indistinct). 38:47 Let's just do as some commandment 38:53 and mkdir, 38:56 what should we call this? 39:00 Let's just call it Neo4j GraphQL, I guess. 39:07 And in Neo4j GraphQL we'll do NPM init dash Y. 39:12 So we're gonna create a new 39:16 NPM project and 39:19 create index JS 39:24 from the chat (indistinct) Nathan says, 39:27 Gatsby be working with Apollo server and Neo4j. 39:30 Oh, cool, 39:31 great. 39:32 You'll have to tell me what I'm doing wrong. 39:34 Then when we run into some errors. 39:38 Cool. 39:39 What was the project that you built with Gatsby and Neo4j? 39:47 If you have a link to it, 39:48 definitely feel free to share that too, if you like. 39:56 Okay. 39:57 So we're going to start a new project here. 39:59 So what we wanna do is 40:02 create a GraphQL API using this data from 40:06 our Neo4j sandbox instance and, 40:09 and then hook that into the Gatsby GraphQL API. 40:13 So let's install a few packages. 40:19 We'll need the Neo4j GraphQL JS. 40:24 If you're not familiar with Neo4j GraphQL JS, 40:26 it's part of 40:29 the GRANDstack, 40:30 take a look at the docs here. 40:31 So the goal of Neo4j GraphQL JS is to make it easy to build 40:37 GraphQL APIs 40:39 backed by Neo4j. 40:40 So it includes basically the functionality for 40:46 defining some GraphQL type definitions, 40:48 pointing it at a Neo4j instance, 40:50 and takes care of all of the data fetching, 40:55 and generates a schema, 40:57 GraphQL schema on top of Neo4j for us, 41:00 so that we can just expose that data out of Neo4j 41:04 with a sort of threading a minimal code. 41:06 So we'll definitely want that, 41:07 We'll also need 41:12 the Neo4j JavaScript driver, 41:16 and we'll need Apollo server, which we'll use 41:22 to 41:24 run our GraphQL API. 41:26 So Neo4j GraphQL JS works with 41:28 any JavaScript GraphQL server, 41:31 but Apollo server is, 41:32 it's a nice one to use. 41:36 Cool, starting off. 41:40 We'll just, 41:41 let's not think about a babble for now. 41:44 So we will, 41:47 pull in. If we look at this example, 41:51 the quick start for a Neo4j GraphQL JS, 41:53 we're gonna come in, 41:53 kind of follow this basically or just importing, 41:57 make augmented schema, 41:58 define some type definitions, 42:01 create a driver instance to connect Neo4j, 42:05 create an Apollo server instance, 42:08 pass in our schema that we create with make augmented schema 42:13 inject the, Neo4j driver instance, 42:15 and then spin up apollo server. 42:21 So we want to 42:23 import make augmented 42:26 schema 42:29 from 42:31 Neo4j GraphQL JS. 42:35 We want Apollo server 42:47 and 42:48 we want 42:52 Neo4j driver instance, 42:55 and 42:58 we need to define some type definitions, 43:04 use our, 43:05 just with these as a string, 43:07 but we can put in this hint so that we get 43:10 some syntax highlighting for the S code. 43:15 Okay, well, 43:17 if we go back to our 43:20 database, 43:21 really what we're interested in is 43:25 exposing the point of interest node. 43:28 So I think we'll just start off with one type here, 43:31 in our GraphQL schema. 43:34 So with Neo4j GraphQL JS, 43:37 we map the node labels 43:40 to types in GraphQL. 43:42 So if we have that one to one mapping, 43:44 we just have to define 43:46 the types that map to 43:48 the property graph type. 43:51 So in this case, 43:52 the shape of our graph in Neo4j 43:55 and we don't have to write any data fetching code 43:57 that Neo4j GraphQL JS library will take care of generating 44:01 cypher queries to 44:03 fetch data for us. 44:07 So type point of interest, 44:08 this represents the point of interest nodes and 44:14 what properties do we want to expose? 44:17 Well, they have a name 44:21 and a location. 44:22 That's of points with, 44:24 one thing that's nice with the Neo4j GraphQL JS is 44:27 it adds the database types as well. 44:31 We can just say point here and it knows that's referring to 44:34 a points type in the database. 44:39 A type, 44:43 and what else we have this OSM 44:47 or node OSM ID, 44:50 which gives an integer 44:58 (indistinct) Nathan says happy to help out 45:00 it's so many issues, 45:03 (indistinct) 45:03 Okay, cool, yeah, well. 45:06 Definitely, 45:08 definitely let me know, 45:12 once we run into issues, how you solve them. 45:15 That would be helpful. 45:19 Okay. 45:19 That's probably, 45:20 good enough for now. 45:22 And it's gonna expose some point of interest nodes. 45:25 Let's create our schema, 45:27 make augmented 45:30 schema and 45:31 passing our type defs. 45:35 And 45:36 then we need to create a driver instance, 45:44 with the connection string for our sandbox instance, 45:47 which we can find 45:50 here. 45:51 So this is the bolt URL, 45:55 which is the connection string that the driver takes. 45:58 And then we need, was it Neo4j 46:01 auth, 46:02 basic, username, password as Neo4j. 46:05 There's user 46:06 and here is the password. 46:16 Okay. 46:17 So we got our driver instance. 46:18 We've got our schema. 46:20 Now, 46:21 we create our Apollo server instance. 46:25 Server equals 46:29 a new 46:31 Apollo server 46:34 schema, 46:36 and then the context object. 46:39 So this is a object that's passed to every 46:45 GraphQL resolver, 46:47 which we don't need to write, 46:48 but the resolvers are the functions that 46:51 contain the logic for actually fetching data 46:54 in this case from Neo4j. 46:57 And these are generated for us 46:59 by this make augmented schema process, 47:02 but we do need to inject this driver instance 47:05 that we created here that contains the connection 47:08 to our Neo4j sandbox instance. 47:11 That is gonna ensure that 47:13 our GraphQL API is able to connect to Neo4j. 47:18 And then let's spin up our server. 47:22 We'll do it on port 3003. 47:24 I don't have anything running there. 47:29 And, 47:35 gets the URL. 47:36 I think 47:37 that we can log. 47:41 I know something like GraphQL, 47:44 ready at 47:46 URL, 47:47 like that. 47:52 And let's start up our server, 47:55 it's running on. 47:56 Localhost 3003. 48:04 And if we take a look at, 48:08 the docs, 48:09 we have a single query entry point for, 48:13 point of interest, 48:15 and we can see we've added some things like pagination 48:18 and filtering, 48:20 that we get for free. 48:23 Zoom in a bit. 48:24 Cool. 48:25 So we wrote a query that says, 48:26 show me the first 10 points of interests, 48:29 their name, we can add type, we can add 48:33 latitude and longitude. 48:37 Cool. 48:38 So, 48:40 that's good. 48:44 What else do we need to do? 48:45 Well, we need to expose that routing. 48:48 So, 48:52 Oh, and we also have tags. 48:55 Let's jump back. 48:58 So if we take a look 49:01 at this tags relationships, 49:03 so there's an OSM tags node 49:06 that most of these points of interest are connected to, 49:09 that has metadata about the point of interest. 49:12 So this has like, 49:15 if we look at the point of interest node, 49:16 all we know is this is a statue 49:19 that has a name of Walter Scott's. 49:22 But if we look at the OSM tags node, 49:25 well then we can see here that 49:30 the artist's name was John Steel. 49:32 It's a statue that was built in 1872, 49:37 and it has the Wikidata and Wikipedia entry 49:41 that we can pull in. 49:42 So this will be a good thing for our 49:49 travel guide. 49:50 Is that if we have any of these sort of 49:53 Wikipedia 49:54 or Wikidata entries, 49:57 is we definitely want to pull that information in. 50:00 And as well, since, you know, 50:02 the idea is it's a travel guide 50:04 to give you information about, 50:06 the points of interest that we're looking at. 50:08 So definitely want to include these tags 50:14 and 50:16 think about how to include the routing as well. 50:18 So, 50:20 this is going to be interesting because these tags, 50:24 these are kind of arbitrary key value pairs here. 50:29 Here we have 50:32 information about a statue, 50:34 but if you look at the tags for the Dancing Crane cafe, 50:40 we have different values. 50:41 So this is an amenity that is cafe. 50:45 If we look at the ponds, we have for the ponds, 50:48 so that's natural water. 50:50 So you can see, we have kind of different, 50:53 different key value pairs kind of depending on 50:58 what it is that we're looking at. 51:00 And so, 51:03 because GraphQL is strictly typed, 51:06 we'll need to think about how we want to handle that. 51:10 For now, what I'm going to do, 51:13 is add a 51:15 tags 51:17 field 51:18 that will be a 51:21 list of strings, 51:23 and I'm gonna use the cypher directive field 51:28 to 51:31 populate this. 51:32 So the cypher directive let's take a look and then docs. 51:37 Cypher directive. 51:38 So the cypher directive allows us to 51:42 basically bind cypher statements to fields in GraphQL. 51:46 So it allows us to add some custom logic 51:49 to our GraphQL schema that we define with cypher 51:51 without having to write resolvers or having to write, 51:56 to write much codes. 51:57 So in this case, 51:59 what I want to do is just to take 52:02 a single statement 52:05 augment, 52:08 which is a cypher statement, 52:10 so we're gonna say match this. 52:12 So this is a keyword that refers to 52:15 the point of interest node. 52:17 If it's helpful to look at the graph here. 52:19 Refers to the point of interest node, 52:21 that's currently being resolved. 52:24 And what I want to do is traverse from that 52:27 fillings tags relationship 52:30 to this 52:32 OSM tags node. 52:37 And I think what we'll do is just return 52:42 maybe just to start off just the keys. 52:45 So for all of these arbitrary key value pairs, 52:49 give me 52:50 just the keys in, 52:56 in this tags field. 52:59 So when we request the tags field in our GraphQL API, 53:03 it'll run this little cypher statement, 53:05 to find that for each node. 53:09 To restart the server or let's install 53:13 a 53:14 nodemon 53:16 so that we can set up our watchers, 53:18 So we don't have to restart this every time 53:19 we've changed the schema. 53:23 And then in package json 53:28 or start script, 53:30 we'll say 53:32 nodemon index JS, 53:34 You've got to work. 53:35 So that we can say, npm run start. 53:39 Cool. 53:40 And now anytime we change 53:43 index JS, 53:44 or if we change our GraphQL schema 53:46 or restart our GraphQL API, 53:49 Cool. 53:50 Okay. So now can we add the tags field? 53:56 Yeah. So it's like, 53:58 so some of these appear not to have any tags, 54:04 but some of them do. 54:09 Cool. 54:14 The other thing we want to add 54:18 is 54:19 some routing. 54:23 So we saw earlier 54:27 how to, 54:30 for example, 54:32 here, how to use shortest path, 54:34 between two points of interest. 54:40 So let's add another cypher directive field 54:44 it's called as route to 54:47 POI, 54:48 and this 54:50 is going to 54:53 take a augment. 54:55 So one thing that's nice about these cypher directive fields 54:59 is that we can add augments of field augments 55:02 to these that then get passed as parameters 55:05 to the cypher query, 55:07 which is nice. 55:09 So question in the chats, 55:10 I've been using the Python driver, 55:13 I see latencies have gone up for requests, 55:15 which involve bolt connection, how to bring them down. 55:18 Yeah, 55:20 that's a good question. 55:22 I mean, 55:23 there can be a lot of things there to look at. 55:27 So, 55:29 I guess I would, 55:32 I would start, 55:34 you know, looking at profiling, 55:37 the cypher queries themselves. 55:41 So for any cypher query, 55:43 if you attach a profile or explain 55:48 to the beginning of your query, you can see the query plan. 55:54 And if you 55:56 use profile 56:00 you'll actually run the query 56:02 and give you this metric called 56:03 the DB hits. 56:06 And basically if we're trying to optimize queries, 56:09 All you wanna do is minimize 56:11 the number of DB hits for any query. 56:15 There's a good section in the manual 56:20 that talks about, 56:22 query tuning. 56:24 So this talks about looking at 56:30 looking at the 56:33 different query plans that you're getting 56:37 and sort of 56:39 operations that you might see in the query plan 56:41 that could be potentially expensive and ways you can adjust 56:44 your cypher query to 56:47 make that a bit faster and things like using index hints 56:50 and that kind of thing. 56:51 So that's one thing to think about 56:54 when you're trying to 56:56 reduce the latency of your query. 56:57 The other thing to look at are, you know, 57:01 making sure that 57:03 you're using the driver transaction functions 57:08 in Neo4j. 57:14 Transaction functions. 57:18 So by default there's 57:20 these auto commit transactions 57:23 where you say sort of session doc run, 57:25 and then passing the cypher query. 57:28 Those are good for like testing and development, 57:30 but really you wanna use 57:32 the transaction 57:36 function API, 57:41 which 57:45 leaves. 57:47 So that's one thing to look at 57:50 and always make sure that you are 57:55 closing the session when you're consuming the results 57:58 and so on. 58:00 So cool. Yeah. 58:01 So there's some, some things to look at. 58:05 So, 58:09 question I'm not seeing the other messages. 58:11 Yeah. 58:12 So we're streaming both to Twitch and to YouTube. 58:17 So you may not see some of the other 58:20 comments if you're on Twitch 58:23 and you won't see the YouTube comments, 58:28 if you're on YouTube, you don't see the Twitch, 58:29 but I see them both. 58:31 So if you're on either feel free to ask an either chats and 58:36 I can see both of those 58:39 cool. 58:40 Question about 58:42 looking for someone to help an house engineer 58:44 in building a GraphQL on top of Neo4j 58:46 for mobile real time application. 58:51 Any referrals? 58:52 Yeah. 58:53 Cool. 58:54 That's great. 58:56 I would suggest, 58:59 posting on the community sites. 59:04 There's 59:06 a section here, 59:07 for jobs and consulting opportunities. 59:10 And then also in the Neo4j Slack, 59:16 www.neo4j.com/slack, 59:18 I think we'll give you an invite 59:20 and there's a Neo4j GraphQL channel 59:26 in the Neo4j users slack group. 59:29 So you definitely post in there that you're looking for 59:33 someone experienced with Neo4j GraphQL, 59:39 to come on as a, 59:41 as maybe a contractor or something like that. 59:44 There's a lot of knowledgeable folks that are using, 59:47 Neo4j GraphQL in production that hang out 59:49 in that slack group. 59:51 So I would, I would start there. 59:57 Okay, 59:58 cool. 59:59 So we want to expose some of this routing functionality 60:05 in our GraphQL API. 60:06 So what we want 60:09 to do 60:13 is, right. 60:14 At this route to POI field in our schema, 60:18 which is going to take a augment, 60:24 call it 60:25 POI, 60:27 and this is going to be 60:30 an integer. 60:31 So this is going to be, 60:33 find me the route to some other point of interest 60:37 and we'll pass in the node OSM ID also do the name. 60:42 I don't know the, 60:43 the ID that I'm sure is we're only gonna find one. 60:47 Okay, and then this is going to give me 60:52 a 60:53 list of points. 60:55 I don't have, 60:58 it's not going to return like the 61:02 same thing as a Neo4j database point type, 61:06 rather it's going to be a pair of longitude and latitude. 61:10 So I'll call it step. 61:13 'Cause we may have started including some other things, 61:17 maybe like the direction that we're going 61:19 or something like that, 61:21 when we want to draw this on a map or something like that. 61:24 But, 61:25 anyway, 61:25 this is for now this will be a latitude and 61:32 longitude pair. 61:35 So I wrapped to POI it's going to return 61:40 the list of these step types. 61:43 And, 61:45 again, we're going to use the cypher schema directive. 61:49 Oh, I think someone previously had asked me 61:50 how you can have a syntax highlighting 61:55 in these cypher directive fields. 61:57 I've noticed here our cypher is just kind of treated 61:59 as a string. 62:01 There is a 62:04 cypher template tag that gets exported 62:08 from Neo4j GraphQL JS that we can use inside these. 62:12 So we can say, 62:15 like a cipher 62:18 and it's 62:19 template tag. 62:21 So like match 62:25 hope we need to evaluate, 62:27 there since we're inside 62:30 a string literal, so you evaluate that, cool. 62:34 And now we should have, 62:36 cypher syntax highlighting. 62:37 So, 62:38 okay. 62:39 So for our, our point of interest routing here, 62:43 it's going to be something kind of like this. 62:46 So we're gonna say, 62:48 first of all, we gonna match the other point of interest 62:55 by matching on the node, 63:00 OSM ID. 63:01 And we're just gonna 63:04 pass 63:06 because we defined a GraphQL field augment here 63:09 called POI, 63:11 that gets passed into this cypher query 63:15 as a cypher parameter 63:18 called POI. 63:20 So this is the other node that we're going to route to. 63:23 And then we want to do a 63:27 P equals shortest paths to find, 63:31 the shortest path from this, 63:33 remember this in these cypher directive, 63:38 queries refers to the node that's being resolved. 63:42 So whatever point of interest we're looking at is this. 63:47 And then we're going to follow these routes, 63:52 relationships 63:53 up to 63:54 200 63:56 hops, 63:59 always good to put an upper bound on there and to the other. 64:03 And then what we want to do just like over here, where we, 64:07 we then, 64:08 did an unwind over all the nodes in that path 64:11 returns a latitude longitude object. 64:15 We're gonna do that. 64:18 Unwind in the nodes, 64:21 in the path 64:24 as N 64:25 and, 64:26 this query, we're expecting it to return, 64:33 this step 64:36 object, 64:37 which is, 64:38 just has a latitude and longitude field. 64:41 So we'll make an object. 64:45 Latitude is going to be in that location. 64:48 So each of these nodes in our route has a location, 64:53 property and dot location dot latitude. 64:57 And longitude is N dot location dot longitude, 65:04 and we can alias this to something. 65:06 It doesn't really matter. 65:08 It's called the route. 65:11 So the question is this equals point of interest? 65:14 Yes, exactly. 65:16 So this right here is going to be a node 65:21 of point of interest. 65:22 And specifically, like if we take a look at our, 65:25 at our query here, 65:29 it's whatever point of interest we're currently resolving. 65:31 So when we're resolving here, 65:34 the Jacqueline Kennedy Onassis reservoir, 65:37 this takes on the value of that node. 65:42 So for routing from the pond, 65:45 then it's going to take on the value of the pond. 65:51 Okay, let's see if that works. 65:56 So we restarted 65:59 the server. 66:01 Let's 66:03 just pick the first, 66:05 well, yeah, sure. 66:06 We can look at the first 66:07 maybe a handful of these kind of bunch of routes. 66:11 Okay, so for the first handful, 66:14 let's 66:15 route to POI, 66:21 let's find a node 66:25 to route to. 66:27 How about to, 66:29 the Robert Burns statute. 66:33 So let's copy of that 66:37 node OSM ID. 66:41 And then that's gonna give us 66:43 a bunch of latitude longitude pairs hopefully, 66:46 let's see what we get. 66:47 Cool. 66:48 So here's, 66:49 so if we wanna get from Jacqueline Kennedy Onassis reservoir 66:53 to the, 66:55 what was this called again? 66:56 To the Robert Burns statue, 66:59 we're going to follow these points. 67:04 Quite a few turns to get there. 67:06 If you wanna go from the pond, 67:08 then this is the route that we're going to take, and so on. 67:12 Cool. 67:13 So that'll be useful so that we can draw routes on a map 67:17 in our GraphQL API. 67:19 Okay. 67:20 So I think that's good enough for now for our GraphQL API. 67:25 Now, what we want to do is 67:28 stitch in this GraphQL API that we've built, 67:32 exposing data from Neo4j, 67:34 we want to hook that in to Gatsby, 67:37 so that we can then use that data to populate 67:40 our Gatsby site. 67:44 So if we go back to, 67:48 this documentation using third party, GraphQL APIs, 67:52 it says we need to 67:55 install this Gatsby sourced GraphQL plugin, 67:59 and then set up some configurations. 68:02 So let's go ahead and do that. 68:03 So I'll open a new terminal tab. 68:06 Oh, and the reason, you can see now the reason that 68:09 we called this central perk it's 68:11 because we have, 68:13 central park in New York data. 68:18 It's a friend's TV show reference there, 68:23 if you didn't get that anyway. Okay. 68:25 So into Gatsby site, 68:29 I think we agree using yarn. 68:31 So yarn add 68:35 Gatsby source GraphQL, 68:43 and that's gonna install a whole bunch of stuff 68:46 it's real quick. 68:49 And then if we, 68:51 Gatsby site 68:56 Gatsby config. 68:58 Yeah. 68:59 So in the Gatsby config, 69:00 we have a whole bunch of plugins that we're registering. 69:04 So we'll add an entry here 69:10 and it says 69:14 resolve. 69:15 So which plugin are we using? 69:19 Gatsby 69:22 source GraphQL 69:27 and options. 69:31 Let's see where needs a 69:34 type name 69:36 this type will contain remote schema query type. 69:40 Okay, so the type name, 69:42 I think is what we want 69:47 point of interest 69:52 and field names. 69:53 I think the field name 69:55 So the field under which it's accessible. 69:57 So I think this is like the namespace sort of, 70:00 it's called point POI. 70:03 And then the URL 70:06 URL is, 70:08 right now, 70:09 it's just running on local host 3003. 70:16 So from the chat, you can use the Gatsby source GraphQL, 70:18 but only for crank data statically, 70:22 if you use apollo, It's not necessary. 70:24 Yeah. 70:25 So actually, 70:25 so what I wanna do actually is use this 70:30 to build static content. 70:34 So what I wanna do is kind of add build time, 70:37 pull in, 70:39 all of this data from Neo4j through this 70:41 Gatsby GraphQL API, 70:43 basically like build out one page 70:47 for each of these points of interest 70:49 and 70:50 build a static site. 70:52 So essentially we're 70:54 hitting this new Neo4j GraphQL API at build time. 70:58 So that'll be the first approach that we'll take. 71:00 So like build out our static Gatsby site. 71:04 And then, 71:06 we can also 71:09 then within, 71:11 as we started to build out 71:12 more of the front end piece of this, 71:14 we can then use right Apollo client 71:17 in the react application in Gatsby 71:20 to then 71:22 query live data from Neo4j. 71:25 And, 71:27 that might be 71:28 for our routes. 71:30 Maybe that's when we pull in the routes is, you know, 71:33 I'm at one of the points of interest and from a dropdown, 71:36 I want to select the next point of interest to go to. 71:39 And then at that point then we go 71:43 querying live 71:44 the 71:46 GraphQL API to find the route. 71:50 But yeah, so that's, 71:51 that's what we're gonna do initially is use this 71:54 at build time to pull in data, 71:56 to build kind of static content. 72:02 Cool. 72:05 Let's see anything on the Twitch chat. 72:08 Link what's the link for the YouTube session? 72:14 The 72:14 YouTube sessions 72:16 are 72:17 all, I think www.youtube.com 72:20 Neo4j live, I think. 72:22 So if you're looking for 72:24 the YouTube version, you should be running there. 72:33 Cool. 72:34 Okay. 72:35 So. 72:36 We installed the Gatsby sourced GraphQL plugin. 72:40 We configured it. 72:41 So now we should-- 72:44 Do we have this running? 72:45 I think we stopped it. 72:46 localhost 72:49 3000 72:50 Oh, no, still running. 72:51 Cool, so now if we go to 72:55 underscore, underscore, underscore, GraphQL, 73:01 and if we take a look at explore, 73:03 do we have a 73:06 POI? 73:07 We don't have a POI. 73:08 Maybe we need to restart. 73:14 Where did we run this? 73:16 Not here. 73:18 Here. 73:20 We need to restart this. 73:21 Is that why it didn't get picked up? 73:24 Let's see. 73:36 Okay, so I restarted. 73:39 Cool, now we have a POI. 73:44 Okay, so 73:45 point of interest, 73:49 name 73:50 type 73:52 location, 73:54 latitude, 73:55 and longitude. 73:57 So this should give us 73:59 all of our points of interest, 74:00 Their type, 74:02 oh, we also have tags. 74:05 Tags 74:08 Cool, so now we're pulling in data 74:10 from the 74:12 Gatsby, 74:14 GraphQL API 74:16 that has stitched in 74:18 the 74:19 GraphQL API that we built 74:20 using Neo4j GraphQL JS 74:23 fetching data from our Neo4j sandbox instance. 74:26 And this has all of the-- 74:28 all of the goodies, 74:29 like our 74:30 filtering 74:31 and 74:32 pagination, 74:33 and even 74:36 like the routing 74:38 fields 74:39 that we added 74:43 as well. 74:43 Cool. 74:45 So now 74:47 we're ready to 74:49 update the 74:51 react front end 74:53 for a Gatsby site 74:54 to start taking advantage of this data 74:58 coming from Neo4j 75:01 But I think that 75:02 might be a good place to stop for today, 75:06 since we've 75:08 accomplished a little bit. 75:09 So, 75:10 I will go ahead and 75:13 push this 75:15 up to 75:16 Github. 75:21 Create 75:23 the up repo now. 75:24 So we at least know where it is. 75:26 And we've slash new, does that work? 75:29 No, did not work. 75:31 New repo, 75:35 let's call this 75:38 a central park 75:41 and this will be building a 75:46 travel guide using 75:48 Neo4j, 75:49 Gatsby 75:50 and 75:52 GraphQL. 76:00 Cool, so here's the link 76:02 to the code 76:04 where I will 76:06 post it up now. 76:07 So definitely feel free to pull that down 76:10 and play around with it 76:13 next week. 76:14 So again, 76:15 every Thursday 76:16 at 76:17 2:00 PM Pacific, 76:20 we will pick up 76:21 with now starting to update the react front end in Gatsby 76:25 to actually make use of this 76:29 GraphQL data that we've stitched in 76:31 to our-- 76:34 into the Gatsby API. 76:36 Also, if you wanna play around with the 76:40 Neo4j sandbox instance that we used, 76:44 remember, 76:46 it's kind of hidden, 76:46 so you need to use this specific URL. 76:49 But I'll put that in the read me on Github. 76:52 It's kind of hidden for now, 76:53 just because we haven't 76:55 built the 76:57 guide for it. 76:58 So when you first load one of these, I'll refresh it. 77:01 When you first load one of these sandbox instances, 77:05 the data's there, 77:07 but there's also this browser guide that comes up, 77:09 which has kind of interactive queries to walk you through 77:14 exploring the dataset writing side queries. 77:17 And the guide we have in here, 77:19 we use this as a challenge 77:20 for the summer of nodes. 77:23 So this was 77:24 our fun community challenges to 77:27 use some interesting data sets 77:29 to solve some interesting problems. 77:31 So we don't have a guide that kind of 77:34 shows you how to actually explore the data. 77:35 So anyway, that's the only reason that it's hidden. 77:37 But if you use that URL that I just dropped in the chat, 77:40 you can unlock it 77:41 and play around with it. 77:45 Cool, well that's all I have for today. 77:48 Hope you can join again 77:50 next week 77:51 when we 77:53 dig more into using Gatsby with Neo4j. 77:58 So will 77:59 see you next week, 77:59 cheers.