- Hey folks, welcome to
the Neo4j twitch stream
brought to you today from
the middle of my living room.
If you don't know me, my name is Will.
I work at Neo4j on what we
call the Neo4j labs team,
which is a team that works on
tooling, extensions,
plugins, around the database.
And today I wanna share some of the things
that we've been working
on in the land of GraphQL.
So if you haven't heard of the
Neo4j GraphQL integrations.
They're part of what we call Grandstack,
which is this framework for building
full stack applications.
So that's GraphQL, React,
Apollo, and Neo4j database.
You find out a lot more
about this at Grandstack.io
where we hosted documentation.
There's also a blog that has
lots of examples as well.
But today, what I wanna talk about
is how we can use GraphQL really easily
basically one click in Neo4j sandbox.
And then also give a sneak
peek of some of the tooling
that we've been working on around GraphQL.
So let's go ahead and jump
over to Neo4j sandbox.
So neo4j.com/sandbox.
And I'm just gonna go ahead
and spin up a Neo4j sandbox instance.
So if you're not familiar
with Neo4j sandbox,
it lets me log in and
then choose from a bunch
of different data sets and use cases.
And it gives me a or anyone who signs in,
a private Neo4j instance
that's hosted by Neo4j
somewhere in the Cloud.
But what's really nice is
the scrape for development.
Just playing around.
These are temporary instances,
but they live by default for three days.
I can extend them for up to 10.
So really nice for development
and playing around with new apps.
So I spun up the recommendations data set.
This has data on movies and reviews.
And see here's the connection credentials.
And I have a bunch of
different code snippets
in different languages that I can use with
the Neo4j drivers.
So let's take a look in Neo4j browser
at what this data set
looks like first of all.
So Neo4j browser.
This is like a query workbench for Neo4J.
So it lets me run queries,
visualize the results.
The recommendations, sandbox instance
comes with these browser guides
that give me the sort
of guided experience.
So I have cipher queries
and images embedded in here
that I can use to, in this case,
generate personalized
recommendations based on movies
and reviews.
But instead of going through that,
let's just take a look at the data model.
So DB schema visualization.
So we can see we have movie nodes
that are connected to actors and directors
who acted in or directed the movie.
And then we have users
who have rated the movie
and movies are in a genre .
So that's the kind of data
that we're working with.
We can run cipher queries,
like I don't know, let's find
a movie.
And some actors who have acted in a movie.
Let's just look at the first 10.
And return those.
You notice sometimes
that we lose our captions
in the visualization.
So a really good trick is to
just do a colon style reset.
And oftentimes that
gives our captions back.
Anyway, here's a few movies.
Jumanji, Grumpy Old Man and
the actors connected to them.
So this is Neo4j browser.
We saw how we could use some of the
Neo4j drivers with sandbox,
these code snippets
to build an application.
And what I wanna focus
on today is GraphQL.
So oftentimes we don't wanna
just expose our database to the world.
Instead, we wanna build some API layer
that can sit between the
database and an application
where we control certain
logic on what's exposed
and things like that.
So the Neo4J GraphQL integrations
make it really easy to
build that GraphQL layer
that sits between your
application and the database.
There's a code snippet here
that shows how we can use
the GraphQL integration with sandbox.
But there's also this deploy
to code sandbox button.
So I'm gonna click that.
And this is really nice,
because it's gonna give me a GraphQL API,
running in the Cloud connected
to my Neo4j sandbox instance,
with just one click.
Which is really nice for
development and playing around.
So let this spin up.
If you're not familiar with code sandbox,
it's a really, really nice service
that lets us run JavaScript
hosted, again in the Cloud.
And we can run both client JavaScript.
So if we wanna build things
like React applications,
we can also run node
that runs in containers
again on the Cloud.
But we don't have to think about that.
So in this case, we're running
a node JavaScript container
with some JavaScript code.
Let's take a look at what's going on here.
So as this container
spins up, first of all,
it installed some dependencies.
So it's installed Apollo server.
This is GraphQL tooling for building
GraphQL server APIs dot ENV.
This is just for pulling
in environment variables,
which we'll see where
that's used in a second.
And then it's also pulled in
this dependency Neo4j GraphQL JS.
And we can see all of
these in package JSON
right here.
So Neo4j GraphQL JS, this is where
we're going to be
building this GraphQL API
on top of Neo4j talking to our sandbox.
So the first thing this container does,
let's make this full screen here.
So the first thing this
container does when it spins up
is runs this infer dot JS file.
And what this is doing is it's creating
a Neo4j driver instance,
that is going to be pointed
to our sandbox instance.
You can see where these environment
variables get picked up.
These are the credentials
for the sandbox instance.
And then it's running
this infer schema function
from Neo4j GraphQL JS.
So infer schema allows us to generate
a GraphQL type definition file
by inspecting a Neo4j database.
And in this case, it writes
that those type definitions
to this schema dot GraphQL file.
So here we can see the type definitions
for the Neo4j instance
that we're just looking
at in the Neo4J sandbox.
We have users who have rated movies,
we have movies connected to
actors and directors, and so on.
So that's really cool.
Once those type definitions are generated,
then we run index JS,
which is pulling in this mig
augmented schema function,
which we're passing our
type definitions to.
And then spinning up an
Apollo server instance,
which gives us a GraphQL API.
And this is we can make
changes to this code
and save it in code sandbox.
Again, it's private to
us, which is really nice.
But also, we have a GraphQL API.
Just gonna copy this.
Bring it up into full screen here.
So here's, this is GraphQL playground,
which you can think of as kind
of, again, a query workbench
for querying GraphQL APIs.
It has this really nice
exploratory feature
so we can see what types and
queries are available to us.
So let's just start off here.
Let's search for a movie.
It's a little bigger.
There we go.
Now one thing that's nice about
the Neo4j GraphQL integration
is we start off with just
those type definitions that describes the
let's take a look at that here,
describes the data
available in the database.
But when we go through this
make augmented schema process,
we add things like filtering, pagination,
and input types in GraphQl,
which is nice so we can
now filter in this case for
movies where the title contains
whatever we want.
And then when we match on
that, let's just bring back
title.
And oops!
And some actor names.
Oops, we have
it's a mistake here.
Filter.
Title contains about extra bracket, right.
Okay, there we go.
Fixed some formatting there.
Okay, there we go.
So filter for movies
where the title contains
River Runs Through It,
and then bring back the title and actors.
So this is really nice.
We have a GraphQL API running
on our Neo4j sandbox instance,
basically with just one click
that deploys it to code sandbox.
And that's nice.
So that's, you know, basic crud.
We can query for data.
But what if we have some
custom logic we wanna add
to our GraphQL API.
In this case, maybe we
want to generate some
personalized recommendations
or something like that.
If we jump back to our code sandbox,
and now to the GraphQl
schema on our movie type,
let's add a field.
Let's call this recommended.
This is going to return
movie objects.
And we're going to use the cipher
directive.
And this is going to allow us
to create some custom logic
in our schema.
In this case, it allows
us to bind a cipher query
to this recommended field.
So then in my GraphQL query, I can say,
"Show me the recommended field on movie."
And we wanna show...
Well, if we're looking at
A River Runs Through It,
we wanna show some similar
movies that a user might like.
So how can we do that?
Well, let's say
match this.
So in these cipher directive fields,
the this keyword there's
a parameter injected
in these cipher statements,
where this is the movie being resolved.
So in this case in our example,
this is River Runs Through It,
a node object in the graph.
So let's look for
users who have rated this movie.
So for users who have rated
A River Runs Through It,
what are
some other movies
that those users have rated?
Right, so this is kind of
the simple collaborative filtering.
Users who bought this product
also bought this other thing,
kind of recommendation.
So pretty simple, but just
gives place to start here.
Then we'll take the recommendations
and we'll do a count as a score.
In order by that score.
So the more people that have
reviewed this other movie
in common with the one I'm looking at,
that's gonna give me a higher score
and be rated, ranked first
in my recommendations.
Okay, so let's come back
here to our GraphQL API.
And if I refresh and now look
at the docs,
I should see a
recommended field now on our movie type.
Which I don't see.
Let's refresh again.
Let's take a look here.
Did we...
We restart.
Each time we update the schema,
our code sandbox needs to run again.
Okay, let's see.
Did our URL change?
Let's take a look here.
Let's go ahead and
restart our sandbox here.
Make sure this gets picked up.
Okay, now we have our recommended fields.
So we just needed to restart
code sandbox instance there.
So now we have our
recommended field to pick up,
let's say the title.
So for River Runs Through
It will bring back the title
and the recommended movies.
We can get the title for
our recommended movies.
So here's the most recommended movies
based on our really simple
recommendation query there.
Now of course we can also
traverse this data graph
a bit further.
So let's get all of the actors
for these recommended movies
and so on.
Cool.
We may also want to...
Ah, forgot my order by here.
Score order by score descending.
So the order by is important
here to make sure that we are
showing the movies with
the highest number of
overlapping users first.
Cool so we can also in these
cipher directive fields,
we can also add arguments.
So we may just wanna show
maybe the first 10, maybe the first three,
we wanna be able to at query time,
specify the number of recommendations
that we're going to bring back.
So let's add a first argument.
We'll set that to a default value of 10.
And then here in our cipher query,
this argument is going to be
passed as a cipher parameter,
which we can use this syntax
to return recommendations limit first.
And by default, this will be 10.
So let's refresh and simplify this a bit.
Let's take out our recommended actors.
So we don't need to specify this.
It's optional.
But we can specify, just
show me the first three.
And we can see now we're only getting back
the top three recommendations.
Cool, so there's a lot we can do here
with working with GraphQL and Neo4j.
If you want to see more
about how this works,
the docs are on Grandstack.io.
For example, here's the documentation
on the filtering argument
which we were looking at.
We have these nice graphical embeds
that sort of show us how this works.
There's also a page we were looking at,
adding custom logic with
the cipher directive field.
So there's a lot we can do here.
We can also add custom, top
level query and mutation fields
using the cipher directive.
Maybe you wanna take
advantage of a full text index
for searching that sort of thing.
So there's a lot we can do here.
But I just wanted to sort of
demonstrate this one click
GraphQL deploy on Neo4j sandbox,
which is really handy for development.
If you have any questions,
feel free to ask in the chat.
But I think I'll move on to the next thing
I wanna talk about,
which is some sneak peeks
at some of the GraphQL tooling
that we've been working on.
So the first one is...
Let's jump over to the Grandstack repo.
So the first thing I wanna talk about is
this Grandstack CLI.
So this is a command line tool
that allows us to do some operations
using the Neo4j GraphQL integrations.
So, this is sort of built
on top of Neo4j GraphQL JS,
but kind of abstracting away the idea
that you have to think about
writing JavaScript code
or think about running a node JS server.
Instead it gives us a CLI to,
for instance, start a GraphQL server,
we're working on some deployment targets,
being able to infer the schema from Neo4J
and things like that.
So this is very much a work in progress.
But it's available now with
some limited functionality.
You can install it, with npm install
dash g grant stack, to install it globally
and then that will be available
as a binary command in a terminal.
So let's take a look at how this works.
So let's
do grandstack, GraphQL, infer schema.
So this will allow us to,
connect to a Neo4j instance,
and generate those
GraphQL type definitions.
So here, for example,
we'll connect to this
to our sandbox instance.
If we go into the connection details,
we can put together the bolt
port, which is right here.
Let's copy that.
And then our Neo4j user is Neo4j.
And Neo4j password
for our sandbox instance, is right here.
And when I run this,
it's going to connect to
that sandbox instance.
In this case, just log
the generated GraphQL type
definitions which I could then
save to a file to edit and
add in my custom logic.
I can also pass the
run server flag
which will generate the
GraphQL type definitions
and then run my server locally.
So here now I have this
running on localhost
3003.
Right, so and I can now
query my sandbox instance
from a GraphQL API locally
without having to write any
new resolvers or typed
Fs which is pretty handy.
There's some other
functionality in the CLI.
Things like passing in type definitions.
Again, some deployment targets.
And again, this is very
early work in progress.
But we would love feedback
if you install this
and play around with it.
The other sneak peek piece of
tooling that I want to show
and talk about a little
bit, is sort of a UI
that runs on top of
this CLI that I just showed.
So it's nice to be able to have some
user interface that we can use to
almost like an IDE for
building these GraphQL APIs
that gen sits atop our CLIs.
We don't have to think about
writing these commands,
or maintaining our type
definitions and so on.
So one thing that we're working on,
which is a graph app,
that will be available
within Neo4j desktop.
It's not available yet,
but just a sneak peek
at what this looks like in development
is what we're calling GraphQL architect.
So GraphQL architect allows
us to do things like query,
our GraphQL API.
It embeds graphical,
which is this tool for
querying GraphQL APIs.
But the real functionality
is here in the editor.
So in this case, I have
a GraphQL schema editor.
I can do things like infer
the schema from an existing
Neo4j instance.
So this is connected to a Neo4j instance
that I have running in Neo4j desktop.
And I can do things like edit
the schema to add new fields.
Maybe I wanna do something similar to
what I was doing with
the movie recommendations
where I wanna add a
cipher directive field,
maybe for businesses.
So I can add that logic here.
Let's just leave this as
a blank statement for now.
But I can add my custom logic
and then start a GraphQL API locally,
and then query that in,
graphical embedded in GraphQL architect.
So let's search just for some businesses.
Let's just bring back the Name field,
just to prove this is working.
So this is querying my data set,
in this case in Neo4j desktop.
Cool.
So this is something we're working on.
Look to see a release
around this sometime soon.
We'll see how it goes.
We have some minimal functionality for it,
but there's still a little bit left to do
before we release that publicly.
Cool.
So that is pretty much what
I wanted to cover today.
Just a quick stream to
get us started here.
Again, if you wanna learn more about
the GraphQL integrations with Neo4j,
the docks are on Grandstack.io.
I think for for next time,
it might be interesting
to look at what's involved
in building an application
with Grandstack,
sort of starting from scratch.
So I did a little Twitter poll.
Let's find the tweet here.
Here it is.
So I did a Twitter poll last week,
kind of asking what kind of application
would people like to see.
And the result was social network.
But I think we can actually
combine all these features.
So I think what we'll do
is start a stream where
we're building a Zillo clone.
If you're not familiar with Zillo,
it's a site that has real
estate recommendations,
real estate listings.
And then we can sort of
see recommended listings
based on ones we've saved
and things like that
to bring in the recommendation component.
And then we'll think of
some social component
we can add to that.
So let's start that
maybe next week.
Well we'll add it on the twitch calendar,
and maybe sort of starting from scratch
see how we can use GraphQL, Neo4j
and Grandstack to build
out this application.
Cool, so be sure to check
out the twitch calendar
and subscribe to the Neo4J twitch stream
so you can get notifications
when we go online.
And that is it for today.
Thanks a lot everyone.
Cheers.
