Tutorial

This tutorial serves as a deeper-dive into Graphiti development, building an Employee Directory application. We purposefully built this to illustrate common - but non-trivial - scenarios present in many applications.

You'll need Ruby 3.2+ and Rails 7.1+ installed. Step 0 starts from an empty directory, so nothing else is assumed.

A core concept of Graphiti is Test-First - the most pleasant way to develop Graphiti is by starting with an integration test. But that can add a lot of noise to a tutorial like this. Though we'll occasionally touch on testing - and the git diffs at the top of each section contain the necessary tests - we won't test first for the purposes of this tutorial.

Server Side: Rails

Rails Sample Application

• Step 0: Bootstrapping
• Step 1: Initial Resource
• Step 2: Has Many
• Step 3: Belongs To
• Step 4: Customizing Queries
• Step 5: Has One
• Step 6: Customizing Writes
• Step 7: Many-to-Many
• Step 8: Polymorphic Relationships
• Step 9: Polymorphic Resources

Client Side: VueJS (diff-only)

VueJS Sample Application

• Step 0: Setup
  • Run after vue create employee-directory-vue using Vue CLI.
• Step 1: Define Models
• Step 2: Data Grid
• Step 3: Relationships
• Step 4: Filtering
• Step 5: Sorting
• Step 6: Total Count
• Step 7: Pagination
• Step 8: Basic Form Setup
• Step 9: Dropdown
• Step 10: Nested Form Submission
• Step 11: Validation Errors
• Step 12: Nested Destroy
• Step 13: Vue-Specific Glue Code