Hands-On With SwiftUI, GraphQL, & Neo4j AuraDB

Rate this content
Bookmark
Github

Bring the power of graphs to iOS mobile app development in this hands-on workshop. We will explore how to use the Neo4j GraphQL Library to build GraphQL APIs backed by Neo4j AuraDB and how to integrate GraphQL into an iOS app using SwiftUI and the Apollo iOS GraphQL library as we build a news reader mobile app.


Table of contents:

- Intro to Neo4j AuraDB

- Building GraphQL APIs with the Neo4j GraphQL Library

- Intro to SwiftUI

- SwiftUI + GraphQL


Prerequisites

To follow along during the workshop attendees will need a Mac laptop with a recent version of Xcode installed. Some familiarity with Swift and iOS app development will be helpful, although not required.

This workshop has been presented at GraphQL Galaxy 2022, check out the latest edition of this Tech Conference.

FAQ

Cypher is a query language for Neo4j, similar to SQL for relational databases. It allows users to efficiently retrieve data by using a pattern-matching approach that fits naturally with the graph data model of Neo4j.

GraphQL is used as an API query language in the Neo4j architecture, sitting between the client and the database. It allows for building and querying APIs, providing a flexible and efficient way to interact with data.

The Neo4j GraphQL Library is a tool that enables developers to build GraphQL APIs backed by Neo4j, simplifying the process by auto-generating APIs from GraphQL type definitions and translating GraphQL queries into Cypher queries for Neo4j.

SwiftUI is a UI toolkit for building graphical user interfaces on Apple platforms. It integrates with GraphQL through Apollo iOS, a Swift-based GraphQL client that manages data fetching and caching for iOS applications.

The Neo4j GraphQL Toolbox is a low-code, in-browser tool that helps developers quickly build and test GraphQL APIs backed by Neo4j. It offers features like auto-generating GraphQL type definitions from existing databases and simplifying API configuration.

Apollo iOS is a GraphQL client for Swift-developed applications, providing features like automatic code generation, caching, and integration with SwiftUI for seamless data handling and UI updates in iOS apps.

Neo4j is a graph database, which means it uses a graph structure with nodes, relationships, and properties to represent and store data, unlike relational databases that use tables or document databases that use documents.

Personalization in a GraphQL application using Neo4j can be achieved by implementing custom logic with Cypher queries in GraphQL schema directives. This allows for complex data queries like recommendations based on user behavior or preferences.

William Lyon
William Lyon
156 min
07 Dec, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Today's Workshop focused on building native iOS applications using SwiftUI and GraphQL, with a database powered by Neo4j. The Neo4j GraphQL library reduces boilerplate code and offers performance advantages. SwiftUI allows for building declarative UIs and includes a preview functionality. Cypher and GraphQL are both used to query and interact with graph data, with Cypher being more focused on graph databases and GraphQL being more versatile. The workshop also covered topics like building a GraphQL API, configuring the Neo4j GraphQL library, and using Apollo iOS for GraphQL data fetching in iOS apps.

1. Introduction to Neo4j, GraphQL, and SwiftUI

Short description:

I work for Neo4j, an open source database company. Today, we'll focus on GraphQL and building native iOS applications using SwiftUI. We'll use Neo4j GraphQL library and Apollo iOS library. Xcode on a Mac is the only local development environment required.

So, a little bit about me. I work for an open source database company called Neo4j. Neo4j is a graph database, we'll talk about what that means in a minute. I work on the developer relations team. So largely my job is helping developers build applications with Neo4j and other technologies. It's really important to understand how database fits in with different technologies, different pieces of your architecture. So that's a big piece of my job is I think sort of contextualizing the database piece for different technology communities. So GraphQL is one of those, which is the focus of our workshop today. I also wrote a book recently published by Manning's called full stack graphical applications. This book is available for free or the ebook version is available for free, sponsored by Neo4j so I'll drop a link to that. Now we'll take you to a form if you're interested in downloading the book. The book focuses on using graph QL in a full stack architecture with react for the front end. So today we're going to look at native iOS with Swift UI as sort of the client front end for our application. If you're interested in similar architecture but using react and we look at different cloud services like how do I deploy to Netlify? How do I use op zero? So here's a rough outline for what we're going to do today. So we will have I guess roughly four sections here. One is we're going to look at near for jay and aura DB, which is near for J is hosted cloud service. If you're in the workshop on Tuesday, we use aura as well. So we're going to use the free tier for aura which is nice because we can spin up a database that's private to us that we don't have to put in a credit card or incur any costs. So that's really good for hobby projects. We have something like that where we don't want the database to go away, but we just have sort of lower use of it. That's what we're going to do for the database layer. Then we're going to talk about building graphical APIs. So building graphical servers, and specifically, we're going to use a GraphQL database integration called the Neo4j GraphQL library that's going to help us provision our GraphQL API without writing a lot of boilerplate code, generating database queries, that sort of thing. Then we're going to take a look at SwiftUI. So building native iOS applications using Swift. And we'll see how to integrate GraphQL and SwiftUI. So we're going to use the Apollo iOS library for SwiftUI, which allows, or for Swift, rather, not specific to SwiftUI. SwiftUI is the user interface component that is available with Swift. There's a few different ways of building UIs for iOS. SwiftUI is similar, conceptually similar, I think, to a lot of web frameworks like React. So if you're familiar with things like React, there's some concepts that transfer nicely in SwiftUI. And then the only local development environments that you need to have set up is Xcode on a Mac. If you don't have that setup, that's fine. You can sort of just watch as we go through the exercise at the end. The SwiftUI part is the last piece we're going to do. For the other pieces for using Neo4j, we're going to use the AURA cloud service and nothing to download or install for that. And then for building the GraphQL API piece, we're going to use CodeSandbox, which is a sort of hosted development environment, so we don't need to set up anything locally for that. But then there is a GitHub repository for the Xcode SwiftUI piece of the project that has just sort of a getting started component.

2. Newsreader App with Neo4j, GraphQL, and SwiftUI

Short description:

Here's what we're going to build today: a newsreader iOS application using Neo4j as our database and GraphQL as the layer between our client iOS app and the database. Neo4j is a graph database, which means the data model is a graph composed of nodes and relationships. We'll use the Cypher query language to work with the data. GraphQL is an API query language with a strict type system, and we'll use it to build our GraphQL API. The Neo4j GraphQL library is a JavaScript library focused on building node.js GraphQL APIs backed by Neo4j. It reduces boilerplate code and offers performance advantages. And finally, we'll be using SwiftUI for building the iOS app.

Cool! Here's some links to various resources that will be helpful as we're going through things today. The slides, of course, and a link to the GitHub repository for the Xcode project, documentation for the Neo4j GraphQL library, as well as an overview page for that. We'll talk a lot more about what that is.

And then the Apollo GraphQL iOS tutorial is a helpful resource that shows how you can install and set up the Apollo GraphQL iOS package in an Xcode project. And then the developer docs for SwiftUI is a good resource as well.

So here's what we're going to build today. It's pretty fairly simple app. So we're not going to focus too much on a lot of the nitty gritty pieces of SwiftUI to make everything look super nice. Really I think the focus of what we want to do today is talk more about how the pieces fit together in this sort of architecture.

What we're going to build is a newsreader iOS application. So we're going to fetch news articles and show them to the user and then think a bit about how we can add personalization features to our iOS app. How can we show news that's relevant for users either by factoring location or finding similar articles that a user might be interested in. And we're going to do this using Neo4j as our database. So we're going to be modeling and working with this data as a graph. So when we're talking about a graph, we're talking about a data structure that's composed of nodes. These are the entities and relationships that connect nodes. And we're going to do this with GraphQL.

So GraphQL is going to be the layer that sits between our client iOS app and our database. We're going to build a GraphQL API. One thing that you'll notice, when we're talking about using a graph data model in the database, that's very close to the same graph model that we use in GraphQL. We'll talk a bit more about that.

Cool. So let's take a look at what exactly is Neo4j. So I said earlier that Neo4j is a graph database. That means unlike relational databases that use tables or document databases that use a document like a JSON document, the data model in graph databases like Neo4j is a graph. So nodes are the entities, relationships connect nodes. We use a query language called cypher, which is kind of like SQL but for graphs is a good way to think of it. There's an example, cypher example here in the upper right. Can see we're sort of on the first line drawing this ASCII art representation of the graph pattern that we are looking for in this data set.

The first part here, match, which is go find some pattern that exists in the database. These open and closed parentheses are drawing sort of a node circle around an address. We're saying find where this pattern exists. We want address nodes that have a registered address relationship. A promise node here, we're putting square brackets with the arrow. That's connecting to nodes, in this case, connecting an address node to an officer node. And then we're traversing out from that officer node to find entity nodes. So this query says find addresses in New York, find the officers who are connected to those addresses, and then find the entities connected to those officers with an address in New York. And this is a question from the Panama Papers dataset, which was a investigative journalism project a few years ago, that was using Neo4j to make sense of offshore corporate records to try to find interesting things around mostly folks hiding assets in offshore companies, which is a fun data set to look at. That's a public data set. On the Neo4j sandbox, cool.

So let's talk through the different technologies we're going to use today. So we're at least on the same page about at least what they are, some of the benefits, and so on. So we talked about Neo4j. GraphQL is the next piece. I think a lot of folks here at the conference this week have learned a lot about GraphQL if you weren't familiar with GraphQL already. But basically, GraphQL is an API query language and a way of building API applications, so API servers. With GraphQL, we have a very strict type system, so we describe the data that's available in the API. We have types, types have fields, and we know the data type of each of those fields.

So the example here is, we have a project type, we have fields like name, tagline and contributors. Name and tagline are strings, contributors is what's called an object field. Specifically, this is an object array field. So this project has one or more users connected to it. And this is where the Graph piece of GraphQL comes in. So types can refer to other types. We think of this as a relationship field that connects the project and one or more users. So that's the Graph piece of GraphQL. Then at query time, the client requests basically a traversal through this data graph in the form of what's called a selection set. So here we're searching just for a project and bringing back the tagline, but we could traverse to the contributors as well and bring back information about the contributors. This is nice for the client because the data that comes back exactly matches the selection set of the query or the mutation operation. So we have very predictable data that we are working with when we use GraphQL.

To make building GraphQL APIs easier when working with databases, there's really a whole crop, I guess, of database GraphQL integrations out there, and we see this in the SQL world. We see this in the graph database world as well. And so one of those is the Neo4j GraphQL library. So this is a JavaScript library focused on building node.js GraphQL APIs backed by Neo4j. And so the idea here is that we can use GraphQL type definitions to define the data model for the API, the GraphQL API, but also to drive our database. And this is really nice because this reduces a lot of the boilerplate data-fetching code that we end up writing when we're building GraphQL servers. It also has a lot of performance advantages because we're able to generate a single database query for any arbitrary GraphQL request. But then we also have some really neat features as well for things like adding custom logic using the Cypher query language that we talked about a minute ago, features for adding authorization rules in our GraphQL schema. So really powerful library for building GraphQL APIs. And then SwiftUI.

Watch more workshops on topic

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Build Modern Applications Using GraphQL and Javascript
Node Congress 2024Node Congress 2024
152 min
Build Modern Applications Using GraphQL and Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Come and learn how you can supercharge your modern and secure applications using GraphQL and Javascript. In this workshop we will build a GraphQL API and we will demonstrate the benefits of the query language for APIs and what use cases that are fit for it. Basic Javascript knowledge required.
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced 2022React Advanced 2022
95 min
End-To-End Type Safety with React, GraphQL & Prisma
Featured WorkshopFree
Sabin Adams
Sabin Adams
In this workshop, you will get a first-hand look at what end-to-end type safety is and why it is important. To accomplish this, you’ll be building a GraphQL API using modern, relevant tools which will be consumed by a React client.
Prerequisites: - Node.js installed on your machine (12.2.X / 14.X)- It is recommended (but not required) to use VS Code for the practical tasks- An IDE installed (VSCode recommended)- (Good to have)*A basic understanding of Node.js, React, and TypeScript
GraphQL for React Developers
GraphQL Galaxy 2022GraphQL Galaxy 2022
112 min
GraphQL for React Developers
Featured Workshop
Roy Derks
Roy Derks
There are many advantages to using GraphQL as a datasource for frontend development, compared to REST APIs. We developers in example need to write a lot of imperative code to retrieve data to display in our applications and handle state. With GraphQL you cannot only decrease the amount of code needed around data fetching and state-management you'll also get increased flexibility, better performance and most of all an improved developer experience. In this workshop you'll learn how GraphQL can improve your work as a frontend developer and how to handle GraphQL in your frontend React application.
Build a Headless WordPress App with Next.js and WPGraphQL
React Summit 2022React Summit 2022
173 min
Build a Headless WordPress App with Next.js and WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
In this workshop, you’ll learn how to build a Next.js app that uses Apollo Client to fetch data from a headless WordPress backend and use it to render the pages of your app. You’ll learn when you should consider a headless WordPress architecture, how to turn a WordPress backend into a GraphQL server, how to compose queries using the GraphiQL IDE, how to colocate GraphQL fragments with your components, and more.
Relational Database Modeling for GraphQL
GraphQL Galaxy 2020GraphQL Galaxy 2020
106 min
Relational Database Modeling for GraphQL
Top Content
WorkshopFree
Adron Hall
Adron Hall
In this workshop we'll dig deeper into data modeling. We'll start with a discussion about various database types and how they map to GraphQL. Once that groundwork is laid out, the focus will shift to specific types of databases and how to build data models that work best for GraphQL within various scenarios.
Table of contentsPart 1 - Hour 1      a. Relational Database Data Modeling      b. Comparing Relational and NoSQL Databases      c. GraphQL with the Database in mindPart 2 - Hour 2      a. Designing Relational Data Models      b. Relationship, Building MultijoinsTables      c. GraphQL & Relational Data Modeling Query Complexities
Prerequisites      a. Data modeling tool. The trainer will be using dbdiagram      b. Postgres, albeit no need to install this locally, as I'll be using a Postgres Dicker image, from Docker Hub for all examples      c. Hasura

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

From GraphQL Zero to GraphQL Hero with RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
From GraphQL Zero to GraphQL Hero with RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Local State and Server Cache: Finding a Balance
Vue.js London Live 2021Vue.js London Live 2021
24 min
Local State and Server Cache: Finding a Balance
Top Content
This Talk discusses handling local state in software development, particularly when dealing with asynchronous behavior and API requests. It explores the challenges of managing global state and the need for actions when handling server data. The Talk also highlights the issue of fetching data not in Vuex and the challenges of keeping data up-to-date in Vuex. It mentions alternative tools like Apollo Client and React Query for handling local state. The Talk concludes with a discussion on GitLab going public and the celebration that followed.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
Envelope is a powerful GraphQL plugin system that simplifies server development and allows for powerful plugin integration. It provides conformity for large corporations with multiple GraphQL servers and can be used with various frameworks. Envelope acts as the Babel of GraphQL, allowing the use of non-spec features. The Guild offers GraphQL Hive, a service similar to Apollo Studio, and encourages collaboration with other frameworks and languages.
Rock Solid React and GraphQL Apps for People in a Hurry
GraphQL Galaxy 2022GraphQL Galaxy 2022
29 min
Rock Solid React and GraphQL Apps for People in a Hurry
The Talk discusses the challenges and advancements in using GraphQL and React together. It introduces RedwoodJS, a framework that simplifies frontend-backend integration and provides features like code generation, scaffolding, and authentication. The Talk demonstrates how to set up a Redwood project, generate layouts and models, and perform CRUD operations. Redwood automates many GraphQL parts and provides an easy way for developers to get started with GraphQL. It also highlights the benefits of Redwood and suggests checking out RedwoodJS.com for more information.
Adopting GraphQL in an Enterprise
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
Adopting GraphQL in an Enterprise
Today's Talk is about adopting GraphQL in an enterprise. It discusses the challenges of using REST APIs and the benefits of GraphQL. The Talk explores different approaches to adopting GraphQL, including coexistence with REST APIs. It emphasizes the power of GraphQL and provides tips for successful adoption. Overall, the Talk highlights the advantages of GraphQL in terms of efficiency, collaboration, and control over APIs.
Step aside resolvers: a new approach to GraphQL execution
GraphQL Galaxy 2022GraphQL Galaxy 2022
16 min
Step aside resolvers: a new approach to GraphQL execution
GraphQL has made a huge impact in the way we build client applications, websites, and mobile apps. Despite the dominance of resolvers, the GraphQL specification does not mandate their use. Introducing Graphast, a new project that compiles GraphQL operations into execution and output plans, providing advanced optimizations. In GraphFast, instead of resolvers, we have plan resolvers that deal with future data. Graphfast plan resolvers are short and efficient, supporting all features of modern GraphQL.