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.

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.

Available in Español

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
End-To-End Type Safety with React, GraphQL & Prisma
React Advanced Conference 2022React Advanced Conference 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
Building GraphQL APIs on top of Ethereum with The Graph
GraphQL Galaxy 2021GraphQL Galaxy 2021
48 min
Building GraphQL APIs on top of Ethereum with The Graph
WorkshopFree
Nader Dabit
Nader Dabit
The Graph is an indexing protocol for querying networks like Ethereum, IPFS, and other blockchains. Anyone can build and publish open APIs, called subgraphs, making data easily accessible.

In this workshop you’ll learn how to build a subgraph that indexes NFT blockchain data from the Foundation smart contract. We’ll deploy the API, and learn how to perform queries to retrieve data using various types of data access patterns, implementing filters and sorting.

By the end of the workshop, you should understand how to build and deploy performant APIs to The Graph to index data from any smart contract deployed to Ethereum.

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
We all love GraphQL, but it can be daunting to get a server up and running and keep your code organized, maintainable, and testable over the long term. No more! Come watch as I go from an empty directory to a fully fledged GraphQL API in minutes flat. Plus, see how easy it is to use and create directives to clean up your code even more. You're gonna love GraphQL even more once you make things Redwood Easy!
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
How many times did you implement the same flow in your application: check, if data is already fetched from the server, if yes - render the data, if not - fetch this data and then render it? I think I've done it more than ten times myself and I've seen the question about this flow more than fifty times. Unfortunately, our go-to state management library, Vuex, doesn't provide any solution for this.For GraphQL-based application, there was an alternative to use Apollo client that provided tools for working with the cache. But what if you use REST? Luckily, now we have a Vue alternative to a react-query library that provides a nice solution for working with server cache. In this talk, I will explain the distinction between local application state and local server cache and do some live coding to show how to work with the latter.
Batteries Included Reimagined - The Revival of GraphQL Yoga
GraphQL Galaxy 2021GraphQL Galaxy 2021
33 min
Batteries Included Reimagined - The Revival of GraphQL Yoga
The Guild has recently released Envelop - a new, modern GraphQL Server Framework and plugin system. In this talk I’ll share a brief overview of Envelop and why you should probably upgrade your existing GraphQL server to it.
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
In this talk, we'll look at some of the modern options for building a full-stack React and GraphQL app with strong conventions and how this can be of enormous benefit to you and your team. We'll focus specifically on RedwoodJS, a full stack React framework that is often called 'Ruby on Rails for React'.
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
Though GraphQL is declarative, resolvers operate field-by-field, layer-by-layer, often resulting in unnecessary work for your business logic even when using techniques such as DataLoader. In this talk, Benjie will introduce his vision for a new general-purpose GraphQL execution strategy whose holistic approach could lead to significant efficiency and scalability gains for all GraphQL APIs.