Uploaded byNeo4j
Full Stack Graph in the Cloud
This document discusses building a full stack graph application with Neo4j AuraDB, GitHub Actions, GraphQL, Next.js, and Vercel. It covers how to get data into Neo4j, build a GraphQL API with Neo4j and the GraphQL library, work with graphs on the frontend using GraphQL and React, and deploy the full application to Vercel. Code examples and resources are provided for each part of the process.
More Related Content
Similar to Full Stack Graph in the Cloud
Full Stack Graph in the Cloud
- 1. Full Stack GraphIn The Cloud With Neo4j AuraDB, GitHub Actions, GraphQL, Next.js, & Vercel William Lyon, Neo4j @lyonwj lyonwj.com Neo4j Connections Dec 2021 dev.neo4j.com/connections-fullstack
- 2. About Me William Lyon DeveloperRelations Engineer, Neo4j @lyonwj lyonwj.com Co-host GraphStuff.FM podcast
- 3. 3 The Neo4j GraphData Platform Analytics & Data Science Tooling Graph Transactions Data Orchestration Development & Administration Drivers & APIs Discovery & Visualization Graph Analytics AI BUSINESS USERS DEVELOPERS ADMINS DATA ANALYSTS DATA SCIENTISTS APPLICATIONS Cloud
- 4.
- 5. Lobsters Graph Architecture Howdo I get data into Neo4j? How do I build the API layer & expose data from Neo4j to my application? How do I work with graphs on the frontend? How do I deploy my application?
- 6. 6 How do Iget data into Neo4j? Spoiler alert: Cypher!
- 7.
- 8.
- 9. Graph Data Modeling Iterativeprocess: 1. What are the entities? → Nodes 2. How are they connected? → Relationships 3. What are the attributes? → Node/rel properties 4. Can I traverse the graph to answer my business requirements? → If no, iterate arrows.app
- 10. Working With JSONData In Cypher neo4j.com/labs/apoc/4.3/import/load-json
- 11. Working With JSONData In Cypher neo4j.com/labs/apoc/4.3/import/load-json
- 12. Working With JSONData In Cypher
- 13.
- 14. GitHub Actions -Flat Data next.github.com/projects/flat-data
- 15. GitHub Actions -Flat Data next.github.com/projects/flat-data
- 16. GitHub Actions -Flat Graph github.com/marketplace/actions/flat-graph
- 17.
- 19. 19 How do Ibuild the API layer? Spoiler alert: The Neo4j GraphQL Library!
- 20. The Neo4j GraphQLLibrary For building Node.js GraphQL APIs with Neo4j. The fundamental goal of the Neo4j GraphQL Library is to make it easier to build GraphQL APIs backed by Neo4j.
- 21. What is GraphQL? GraphQL.org AnAPI query language and runtime for building APIs
- 22. The Neo4j GraphQLLibrary ● JavaScript library for building Node.js GraphQL APIs backed by Neo4j ● Generate GraphQL CRUD API from type definitions ○ Auto-generate resolvers ● Generate single Cypher query from GraphQL request ● Extending GraphQL with Cypher ● Built-In Authorization dev.neo4j.com/graphql
- 23.
- 24. Auto-generate GraphQL CRUDAPI Query/mutation fields, ordering, pagination, complex filtering, geo/date types,...
- 25. Generate Cypher FromGraphQL
- 26. Extend GraphQL WithCypher @cypher GraphQL Schema Directive https://neo4j.com/docs/graphql-manual/current/type-definitions/cypher/
- 27.
- 28. 28 How do Iwork with graphs on the frontend? Spoiler alert: GraphQL!
- 29. What is Next.js? Next.jsis a web framework built on top of React that adds many features and conventions that aren't available by default with React. ● server side rendering ● file based routing ● image optimization ● code splitting and bundling ● server-side API routes https://nextjs.org/
- 30.
- 31.
- 33.
- 34. What Is Vercel? ●Deployment platform for developers https://vercel.com/
- 35. Deploy Our FullStack Graph Application With Vercel ● Sign Up/In to Vercel ● Import your GitHub repo ● Be sure to set environment variables!
- 39.
- 40.
- 41. Full Stack GraphVisualization With GraphQL & Neo4j AuraDB dev.to/lyonwj/series/13842
- 42.
- 43.
- 44.
- 45.
- 46. The Neo4j GraphQLTeam Is Hiring! neo4j.com/careers or email graphql@neo4j.com
- 47. About Me William Lyon DeveloperRelations Engineer, Neo4j @lyonwj lyonwj.com Co-host GraphStuff.FM podcast