00:00:12.610
Thank you very much! I'm Jamon Holmgren, and with me is Morgan Laco.
00:00:19.220
Morgan is going to be doing live coding while I narrate. This is a little bit of an analogy for our day jobs.
00:00:25.640
Morgan is a mobile software engineer at Infinite Red, and I am the CTO, which means I talk a lot.
00:00:33.140
So, Morgan, if you don't mind pulling up the slides that we created, I will go through those really quickly.
00:00:41.180
Fun fact: We practiced for a 30-minute talk and could never get it below 45 minutes. Then I realized it is actually a 45-minute talk, so that's perfect!
00:00:48.170
Okay, so our talk is about seamless GraphQL in Rails and React Native. Like I said, I'm Jamon Holmgren, and I live in the Pacific Northwest. It's really nice to be here right now and not there, where it's cold and wet.
00:01:00.409
I co-founded Infinite Red and work on the React Native open source community core. You can find me on Twitter at @JamonHolmgren.
00:01:07.070
Morgan?
00:01:12.110
I am Morgan Laco. I work at Infinite Red. I actually started with Rails at Code School, then went to Infinite Red and worked with Elixir at the beginning.
00:01:17.540
Then they switched me into mobile development with React Native. By the way, Morgan lives in Orlando.
00:01:23.180
A little bit about Infinite Red: we are a consultancy focused on mobile and web design. React is what we are most known for.
00:01:29.079
We are also starting to do some AI and machine learning projects as of January this year.
00:01:35.210
Alright Morgan, do you have the latest? I'm seeing a little problem here.
00:01:41.180
Thank you. Chain React is our conference focused on React Native. If you're attending React Native, please come and visit Portland in the summer, specifically in July.
00:01:48.170
I hear it gets a little warm here, so that's a good time to get out of the heat. The next one will be in July 2020.
00:01:56.080
You can find more about that at infinite.red/chainreactcomp.
00:02:01.540
Cool, so we're going to be talking about a lot of different tools during our live coding exercise.
00:02:07.990
We're not going to touch any of them too deeply, but there is a lot more depth.
00:02:14.200
Let's go through these tools very quickly. First up is Rails. Who here has heard of Rails?
00:02:19.650
Okay, a few of you! I won't talk about that too much because I know there are a lot of Rails developers here.
00:02:28.180
Now, GraphQL Ruby: has anybody used GraphQL Ruby?
00:02:33.790
Okay, actually a fair number. GraphQL Ruby is a gem that will provide our Rails generators and the GraphQL endpoint we're going to use.
00:02:40.690
We are going to generate a GraphQL schema. That's one of the main points of this talk.
00:02:45.760
We want to show how you can have one schema between your backend and your mobile app.
00:02:51.280
You can also translate this to the web as well. I'm doing a mobile app to illustrate this.
00:02:56.709
We'll also show how to implement this on a web frontend.
00:03:04.030
We will be using a tool called MST GQL to generate our MobX state tree models from the GraphQL schema.
00:03:10.209
Think of MobX state tree as being Redux-like state management but with some better features.
00:03:16.170
We've used Redux for several years at Infinite Red, but we got tired of the boilerplate.
00:03:21.519
MobX state tree is probably the most popular alternative to Redux you will find.
00:03:27.370
We'll also be using React Native with our starter kit called Ignite Bowser.
00:03:32.710
This is a boilerplate for React Native that will save you about two weeks of initial setup.
00:03:39.400
We'll be starting off with a fresh Ignite Bowser setup. We haven't modified it much, just ensured all of our dependencies are installed.
00:03:45.460
Go ahead and proceed to the next step.
00:03:52.150
This is what we'll be building. Morgan, could you confirm?
00:03:57.640
Yes, we're building a simple demo to demonstrate how to consume an API using GraphQL on a React Native client.
00:04:01.990
We're keeping it simple here because we only have 45 minutes.
00:04:08.210
We'll be doing live coding. Head to the next screen quickly.
00:04:18.289
Since we're introducing multiple tools, I want you to take your mobile phone or laptop and go to get.io/JAECR or scan the QR code.
00:04:29.990
This will redirect you to a README we're following today. Morgan and I wrote it, and you can follow along too.
00:04:36.520
Everything is open source, and we will do our best to explain the code as we go.
00:04:43.130
But just in case you want to spend a little more time on something, feel free to.
00:04:49.570
So get.io/JAECR or scan the QR code to access the GitHub repo.
00:04:56.370
Alright, let's do the demo.
00:05:01.130
On our left, we have our Rails app—a brand new Rails 6.0 project. It's completely fresh.
00:05:09.270
On the right, there's a fresh Ignite Bowser React Native app. The first thing we’ll do is add the GraphQL Ruby gem.
00:05:16.990
Let's open up VS Code here to ensure we have the GraphQL gem installed.
00:05:23.680
We actually already have it installed to avoid using hotel Wi-Fi.
00:05:28.740
Now, let’s open up the terminal and run the generator that comes with the GraphQL Ruby gem.
00:05:35.130
Rails G GraphQL: install will bring in all the necessary files for working with the GraphQL endpoint and schema.
00:05:41.610
Next, we will create a scaffold. A lot of Rails developers don't really use scaffolds, but they are good for demo purposes.
00:05:50.190
So, let's run Rails G scaffold to create a Post model with attributes of title and body, both as strings.
00:05:56.100
Then, we can run Rails DB:migrate to apply our new model.
00:06:04.650
This creates the Post model along with basic views for creating, editing, and deleting posts.
00:06:10.740
Next, we are going to create the corresponding GraphQL object. This will help us leverage GraphQL for our Rails app.
00:06:19.920
Let's run Rails G GraphQL:Object Post and define its fields.
00:06:27.900
The fields will include an ID, title, and body. All fields need to match the attributes we defined earlier.
00:06:35.120
Alright, let’s quickly check that we have the PostType.rb file.
00:06:40.000
You will see it under the GraphQL folder that was created, featuring the three fields we defined.
00:06:48.570
Next, we’ll move to our QueryType.rb file. Here is where we define the types of queries that can be run against our GraphQL endpoint.
00:06:56.000
We will also hook it up to the Post object we created earlier.
00:07:02.040
Morgan, let's copy and paste that in. I’ll walk you through what’s happening.
00:07:08.100
To save time, we’re copying and pasting, but I’ll explain everything to avoid any errors.
00:07:15.530
The posts field defines what we’re returning back - an array of posts of the Post type.
00:07:23.589
We implement it using a method that performs a regular active record request to return all the posts.
00:07:30.309
We could sort or filter them based on arguments, but we'll keep it basic and stick to fetching all the posts.
00:07:40.399
To see this in action, let’s run Rails server and navigate to localhost:3000/posts.
00:07:50.469
Given that the server is running, we should be able to create a new post.
00:07:58.489
We can add some content to it; Morgan, go ahead and create another post.
00:08:06.469
Great! Now that we have some content, let's jump to GraphiQL.
00:08:15.090
GraphiQL is a UI that comes with the GraphQL Ruby gem, allowing you to run queries and see responses.
00:08:21.790
It's incredibly helpful during development. One cool thing is that GraphQL allows you to shape data as you need it.
00:08:29.589
Let's run an example query. The field name we defined earlier was 'posts', so type that in.
00:08:36.449
When we run it, we’ll see a data property that has posts, which is an array.
00:08:43.930
Currently, we’re only getting IDs back, which isn't very useful, so let's add some fields.
00:08:49.990
GraphiQL features autocomplete, making this a very efficient tool for developers.
00:08:56.129
After adding more fields, run the query again, and this time we will see expanded data returned.
00:09:03.890
This is one of the best aspects about GraphQL: you can request only the fields you need.
00:09:10.820
This leads to better experiences for front-end developers because they have control over what data they receive.
00:09:17.540
At Infinite Red, most of our work involves collaborating with backend teams.
00:09:24.750
With traditional REST APIs, we’re often limited by what backend teams can implement.
00:09:31.180
But with GraphQL, we can request exactly what we need, significantly improving our workflow.
00:09:38.227
Morgan particularly likes that GraphQL is composable. If we add authors, we can easily fetch their details without altering the API.
00:09:45.080
That’s right! If we had an authors field, we could simply query for it.
00:09:51.530
With correct setup, GraphQL efficiently manages related data without causing N+1 query issues.
00:09:58.170
Alright, now that our backend is pretty much done for this initial version, let's move to the frontend.
00:10:05.720
We need to implement the React Native Ignite Bowser app to query this schema.
00:10:12.650
Let's create a rake task for easier schema management in our Rails app.
00:10:19.780
We can use rails G task GraphQL dump to generate a task that outputs our current schema.
00:10:27.000
Let’s navigate to that file in the 'lib/tasks' directory.
00:10:35.280
The command we ran earlier generates a new object in our Rails schema.
00:10:42.490
This command will return the definition of our GraphQL schema, which we will write to a file.
00:10:50.709
Next, let's run the rake task we created by using rake GraphQL: dump.
00:10:58.020
This step is crucial because as our backend evolves, we need to synchronize changes with the frontend.
00:11:04.380
We want to keep a single source of truth for our schema to avoid inconsistencies.
00:11:11.330
Let’s open the GraphQL file we just generated, located at the root of our project.
00:11:17.600
Here, we see the types we defined, including post with its fields ID, body, and title.
00:11:25.530
Next, we need to update the GraphQL controller that was generated during the install process.
00:11:33.129
This controller sets up the endpoint we will be using for the mobile app.
00:11:39.620
Because we’re working with a mobile app, we need to adjust our cross-site scripting settings.
00:11:47.500
We need to add a line at the top to protect from forgery with nil session.
00:11:54.010
This essentially disables the default protection, but remember to implement your own safety measures.
00:12:01.860
Alright, we've finalized the Rails app. Now we need to display the posts in our React Native app.
00:12:07.700
Let's open the React Native simulator; this is how an Ignite Bowser app looks out of the box.
00:12:15.320
If you've installed Ignite and created a new app, this is the initial setup you can expect.
00:12:22.480
React Native is cross-platform, running on both iOS and Android.
00:12:28.709
Let me explain more about Ignite: we began working with React Native in 2015.
00:12:34.320
Initially, we recognized a lack of best practices in setting up a React Native app.
00:12:40.610
After searching for boilerplates, we decided to create our own, which led to Ignite.
00:12:48.090
We've since refined Ignite and released a second version called Bowser.
00:12:54.270
We will regularly update Ignite with new features and best practices.
00:13:02.250
If you continue through Ignite, you can explore various demo features.
00:13:07.450
Rich Evans is here and is the primary maintainer of Reactotron, a desktop app to inspect React Native apps.
00:13:13.300
Reactotron can also be used with standard React apps, providing logging and debugging capabilities.
00:13:21.019
However, for now, we will focus on editing the welcome screen to display posts.
00:13:26.950
The first step is to add MSTGQL to our project.
00:13:33.630
We can run yarn add MST GQL GraphQL request to do this.
00:13:41.290
MSTGQL provides functionality to request data from the Rails server.
00:13:46.920
On the right side, we see our React Native app with the necessary dependencies.
00:13:53.200
MSTGQL also comes with a runtime component for making requests.
00:14:01.090
We will create a custom hook after Jake discussed hooks, which will help us manage queries.
00:14:07.750
Let's proceed and run the command yarn MST GQL to generate necessary files.
00:14:14.700
We're using Typescript with this demo, similar to Flow, to maintain type safety.
00:14:23.340
MST GQL will utilize the GraphQL schema to generate Typescript types.
00:14:30.130
We will indicate where the schema lives, which will produce corresponding files.
00:14:36.950
An important aspect to note is that the script can be executed multiple times.
00:14:43.790
It's crucial not to edit the generated files directly; instead, we will inherit from them.
00:14:50.540
Now, we need to import the generated model into our app.
00:14:56.150
We want to utilize the root store base that we’ll be implementing for the application.
00:15:02.220
We can keep route stores organized as children for ease of access across the app.
00:15:10.550
Revamping the root store model will help us manage properties seamlessly.
00:15:19.050
We can get back to the root store base and ensure we have correct typings in place.
00:15:28.470
The environment file will handle setup for our GraphQL requests.
00:15:38.290
To initialize our context, we'll use createStoreContext to achieve this.
00:15:45.570
Our custom hooks will assist in managing queries to fetch data effortlessly.
00:15:54.000
Now, let’s return to the welcome screen and inject the GraphQL capabilities.
00:16:05.450
The welcome screen contains JSX that will build the UI.
00:16:12.890
We’ll add the necessary hooks there to manage the queries for the posts.
00:16:20.360
The useStore hook will allow us to access the stores defined in the application.
00:16:27.610
This allows us to map through the posts and render their titles.
00:16:35.820
To show these changes, let’s incorporate a stylized button for deleting posts.
00:16:40.570
When the user clicks this button, it will trigger the delete action.
00:16:47.940
Now, let's ensure that we properly update the UI with this information.
00:16:60.800
The action will handle the state and re-render the component to reflect the deletion.
00:17:07.050
So let's implement the changes and refresh to see the results.
00:17:14.400
By running the app in the simulator, we will see how posts are displayed.
00:17:22.860
We should also add the touchable button that will execute the delete query.
00:17:29.610
The delete operation will require an ID to specify which post to remove.
00:17:37.080
During refresh, the user will see updated posts reflecting the deleted ones.
00:17:43.900
After hitting delete, verify signatures are not visible in the inventory.
00:17:51.470
Now that we have implemented the mutation, everything should work as planned.
00:17:58.370
Replacing text in components when refreshed will show the new state.
00:18:05.200
Our goal was to set up a seamless experience fetching data and managing states.
00:18:13.020
Despite facing some technical glitches, we managed to cover everything.
00:18:20.830
You can access the README markdown, which contains additional insights.
00:18:28.000
We’ll share the presentation with more resources and links to Infinite Red.
00:18:35.390
Thank you for participating, and I look forward to your questions!
00:18:41.870
Thank you!
