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.

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.

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.

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.