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.
In this document
Powered by AI
William Lyon introduces the concept of Full Stack Graph IN THE CLOUD utilizing Neo4j AuraDB, along with his background as a Developer Relations Engineer at Neo4j.
Explains the components of the Neo4j Graph Data Platform, highlighting analytics, data science, drivers & APIs, and the target audience including business users and developers.
Introduces the Lobsters Graph project and discusses its architecture, addressing methods for data ingestion, API layer building, frontend graph interaction, and deployment.
Presents the use of Cypher for data ingestion in Neo4j and provides reference links for developers looking to get started.
Describes the iterative process for graph data modeling, including identifying entities (nodes), connections (relationships), and attributes required for business analysis.
Focuses on working with JSON data in Cypher and references the Neo4j labs for importing and loading JSON effectively.
Discusses using GitHub Actions for flat data and graphs. Provides resources for projects related to flat data and graphs in the Neo4j ecosystem.
Explains how to build the API layer with the Neo4j GraphQL Library, featuring auto-generated GraphQL CRUD APIs and Cypher extensions. Introduces the foundational aspects of GraphQL, automatic CRUD API generation, Cypher integration, and extending GraphQL capabilities.
Discusses utilizing GraphQL for frontend graph interactions, introduces Next.js framework, and mentions Apollo Client for data management.
Focuses on graph data visualization techniques using libraries like react-force-graph to enhance graph representations.
Guides on how to deploy the full stack graph application using Vercel, emphasizing key steps like repo import and environment variable settings.
Provides resources including links to free Neo4j AuraDB, training, and job opportunities at Neo4j, along with repeat of presenter’s background.
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