lemonbytes

husband, dad, steelers fan and software engineer

Jan 23, 2019


A working example of what I’m going to describe here can be found at https://github.com/stanlemon/example-relay-app.


For awhile GraphQL has looked interesting to me, like something I wanted to learn. I love the concept of strongly typing expressive queries that can be batched into a single request. That’s GraphQL, a technology that really seems to shine in UI work for single page apps (SPAs).

Relay is Facebook’s GraphQL framework for React, it’s really where GraphQL got its traction from. I love React and spend a good portion of my hobby time building stuff with it, so GraphQL was a natural progression for me. The problem is that documentation and examples on how to use Relay are all over the place and it’s even harder to get into if don’t already have a working GraphQL server. Some might point out that Apollo is a much easier place to start with React & GraphQL and that definitely seems true, but I specifically wanted to familiarize myself with Relay.

My first challenge was a working GraphQL server that I could issue queries against. Fortunately PostGraphile] makes this super easy. You need a Postgres instance to get going, but after that you have a working GraphQL server over top of a Postgres database. I won’t go into how to setup PostGraphile, it’s documentation is actually rather than good and there are some additional environment notes in the repository with my example code.

Querying from within Relay is pretty easy and straightforward and the documentation that Facebook offers is adequate. If you want to play around with querying check out this GraphQL playground with Star Wars data, it’s pretty fantastic! GraphQL is not just for fetching data though, it also allows you to create, update and delete it. Those operations are called mutations and their documentation is a lot less clear.

A mutation in and of itself is not complicated, there are really two parts to it: (1) the mutation definition and then (2) committing the mutation to the GraphQL server. That looks like this:

import { graphql, commitMutation } from 'react-relay'

const mutation = graphql`
    mutation AppCreatePersonMutation($input: CreatePersonInput!) {
        createPerson(input: $input) {
            person {
                id
                firstName
                lastName
            }
        }
    }
`

commitMutation(environment, {
    mutation,
    variables: {
        input: {
            person: {
                firstName: "Stan",
                lastName: "Lemon"
            }
        }
    }
})

In the app I built I had already loaded all of the person records from my database using a query like this:

query AppQuery {
    allPeople {
        nodes {
            id
            firstName
            lastName
        }
    }
}

When I first got this working I naively expected the properties in the react component that came from this query to update, such that my new person would appear in my list. But alas it did not! Updating the state store for relay is not straight forward. The mutation documentation on relay’s site has some clues, but I ended up struggling to implement what I thought was a pretty straight forward user case: updating the list of nodes from my initial query with a new record.

Make sure your createPerson() mutation is returning the same fields as your allPeople query, and also make sure that allPeople is returning id. Matching fields in the response is important for new records. If you’re only doing updates you can get away with returning just the fields you’ve changed, but the example below does not cover partial updates. The id field is not actually required for create mutations like this, but as soon as you start working with updates you’ll thank me as the the global graphql id is the easiest way to yank an existing record out of the store.

What we need to do now is define an updater function on that the second parameter to commitMutation(). This updater receives a single parameter, the store and this is where we will do our handy work.

Inside the updater function the first thing we want to do is get the portion of the store where allPeople is at, because this is what we need to modify. We need to put our new person into the list of person records in that part of the store, which will in turn trigger the update to our UI. This is actually pretty easy to do as long as you know the key to pass the get() method. I found this out using the replay-devtools, which I highly recommend installing.

const allPeople = store.get('client:root');

Now we have the container of the query. Because we’re using PostGraphile everything is nested under nodes so we actually need to yank that out from under our allPeople variable. That looks like this:

const nodes = allPeople.getLinkedRecord('allPeople').getLinkedRecords('nodes');

We also need to get the person record that our GraphQL server returned to us and then yank the payload from it. The payload in this case is that new person we created.

const payload = store.getRootField('createPerson');
const newPerson = payload.getLinkedRecord('person');

We have the original list of persons and the new person we added, now we need to combine them, this is really easy using the spread operation:

const newNodes = [...nodes, newPerson];

Now we have the full list of person objects as they exist in our database. Keep in mind if you were sorting these somehow with graphql you will need to insert the newPerson into the proper place, not just blindly at the end like we are doing. Lastly we take that new nodes list and replace it in our allPeople portion of the store like so:

allPeople.getLinkedRecord('allPeople').setLinkedRecords(newNodes, 'nodes');

Once this is done the local store in your react component will re-render with the new data.

Keep in mind, this is a root level scenario for the component in question. It seems pretty simple, but good luck finding an example that works like this one. If you’re using data nested under another object (like comments on a post) than there are plenty of examples on the web more suited to that scenario, examples that involve things like the ConnectionHandler.

You can find all the code for my working example over at https://github.com/stanlemon/example-relay-app


Jan 19, 2019


I do my best to avoid social media, and even when I do participate I consume a pretty narrow set of content. For example, my twitter is highly curated to focus on Indianapolis municipal happenings, Apple product rumors and javascript news. On the rare occasion I login to Facebook it’s mostly to respond to messages on my podcast page or to look at old pictures of Chicago North Western trains. I rely on my lovely wife and podcast cohort Jon to keep me in the know on the latest and greatest internet fads, at least the ones that stir up enough trouble to warrant a text. It really is a top notch curation system.

This week the Gillette “The Best Men Can Be” commercial somehow bubbled its way up into my view and I read reactions from both the political left and the political right on how wonderful and how terrible this commercial is. If you’re not familiar with the video you can find it on YouTube. Like so many things today it yielded truly polar reactions. Those that loved it applauded it for calling out what some refer to as “bro culture”. Those that hated it claimed it vilified all men universally.

Here’s what annoys me about this whole thing: Gillette won and everyone else lost. Anyone who thinks Gillette was somehow in pursuit of altruism forgets the age old axion that “any press is good press”. Gillette is owned by Proctor & Gamble, a behemoth of consumer goods based out of Cincinnati. It is a publicly owned and traded company whose sole purpose is to generate profits for its shareholders. Let that set in a minute. Gillette exists to make money, plain and simple.

In 2015 Gillette was the #1 shaving company in the United States, holding onto 64% of the market with runner up Schick. By all accounts both Gillette and Schick make crappy shave products. Both companies sell dull cartridge blade systems that generate an absurd amount of waste, but I digress. In recent years, Dollar Shave Club encroached onto Gillette’s market share by more than a razor’s edge, resulting in a 1 Billion dollar purchase by Unilever. Even beyond sub par subscription services like Dollar Shave Club, you have stores like The Art of Shaving popping up everywhere and a general interest in the more classical safety razor genre of equipment. All this is to say, Gillette is hurting. Its relevance is shriveling up and it needs some life kicked back into its blood. Don’t believe me though, take a look at Procter & Gamble’s stock prices. In a hugely volatile year on the stock market $PG is basically untouched. That’s not what share holders want to see, they want growth!

Gillette has to be loving all the PR it’s getting. Again, any press is good press. People who weren’t talking about Gillette are now, and a product that was not memorable is now gliding its way onto everyone’s social media feeds. So if you loved the video, maybe you’ll go out and buy some Gillette razors in support of the company and its bold position in this video. That’ll help Procter & Gamble’s quarterly sales, and that’s exactly what they want. Or maybe you hated the video, feeling like it unilaterally vilified half the population with stereotypes. If Gillette is lucky, you took to social media to complain about it, or shared some article or other post and further perpetuated their ad campaign. The best advertising is free, and you played right into Gillette’s hand. Either way, Gillette is on everyone’s mind, and that imprint will linger for a bit.

It really doesn’t matter where you stand on the issue, because in the end Gillette won. Nothing has changed, we’re just as angry and polarized as we were before the campaign, if not more so.

Gillette is in good company though. We hate to admit it, but this sort of appeal to our heart strings style advertising - which has absolutely nothing to do with the product being sold - is increasingly common. Tune in on a Sunday and the NFL is talking up fighting cancer and other diseases as well as supporting the military. Don’t be confused that these are somehow honest appeals. At the end of the day it’s just another ploy to get you to tune in and watch the real product, a football game. If you support our military and it appears like the NFL does, you tune in to support them, thus increasing their viewership and further increasing the cost of advertisement on one of the sacred NFL commercial slots. That’s the end goal of these heart string campaigns.

Don’t get me wrong, there are honest folks who mean well by participating in these campaigns their companies put on. I really don’t mean to discount the intent of both NFL players and Gillette employees, I just think we need to be honest about what drives campaigns like this. As much as I would love for it to be, it’s not altruism. We shouldn’t somehow project that onto the marketing departments of these big economic machines who ultimately have dividends to pay every quarter.


On an unrelated note, if you are either thinking of buying Gillette products because you loved the video or if you are thinking of no longer buying Gillette products because you hated the video let me take this opportunity to appeal to you. There’s a better way! Get yourself a good ol’ Merkur safety razor and some Astra blades and enjoy a better shave. Chances are you’ll support a smaller business in the process too, winning all around.


Sep 15, 2018


A drawing of the Lemon home representing our mortgage and showing our progress paying it off.

In Episode 8 of Life with a Twist of Lemon my friend Jon asked me about buying a house and for part of that discussion we talked about mortgages. One of the things that I mentioned our family does is visualize our mortgage on a piece of paper hanging on the side of our refrigerator. On the paper is a drawing of a house, which my lovely wife made to look like our actual house. It’s on graph paper and each square represents part of the mortgage we owe. As we pay down the mortgage we fill in boxes, with the ultimate goal of having the whole house filled in. This idea didn’t originate with me; I don’t actually even recall where I first saw this. I think it’s neat though, and I like that it’s there every day for us to see. A few listeners (it still amazes me that we have those, thank you mom and the other 3 folks that tuned in) asked me what that mortgage visualization looks like, so I thought I would share it here. The colors don’t mean anything, they were chosen based on the closest colored pencil at the time. The shaded parts (roof and windows) also don’t count in our drawing. Anyone can do this too, and you don’t need to be as fancy with the drawing as Mrs. Lemon was. That said, I think ours is pretty cool and I’m just tickled with what she made for our family. Now to fill it up!

The purpose of the drawing and really a good portion of Jon’s and my discussion is understanding your debt and having a strategy to get rid of it. I don’t think debt is in and of itself a bad thing. In many instances it’s simply a necessity, like buying a house. I do think society is perhaps too comfortable with debt though and it’s good to go into something like a mortgage with a desire not to have it. That desire is strong in me, and things like this visualization help keep it top of mind so that I am constantly being reminded to get rid of it.



Life with a Twist of Lemon

For more than a couple of years now my friend Jon Kohlmeier has been trying to persuade me to start a podcast with him. We’ve routinely joked about it, but I’ve resisted getting it started because of time and other trivial things. Jon and I have been friends for well over a decade now and our roots to podcasting go way back. Jon was the cohost and producer of the Higher Things Radio podcast with another friend of mine, Rev. George Borghardt. I appeared a number of times on that podcast, and there are more than a couple of episodes where it is just Borghardt and I just shooting the breeze. I think that’s where the idea for Jon’s and my podcast came from, because really Life with a Twist of Lemon is just the two of us shooting the breeze. Jon likes to say we’re just recording the conversations we were going to have anyway, and if it wasn’t for the fact that we schedule the recording that’d probably be spot on.

So this is my latest project, a podcast where I just talk with my friend Jon. There’s nothing prescriptive about what we’re going to discuss fro one episode to the next. We’re going to try to keep it to thirty minutes or so, because we don’t particularly care for long podcasts ourselves. We plan to keep it fully rated G because I’ve got kids and I want them to be able to be safely in ear shot. Right now I’m having a lot of fun doing the podcast; more fun than I thought I would. If I’m lucky, we’ll get a listener other than my mom and dad, and if not then my kids can look back on this project in a few years and laugh about it.

Oh and about the name… as vain as I am, would you believe it wasn’t my idea? No, really! Jon came up with the name and, because I have no modesty in my blood, I happily obliged to using it.

You can find our podcast on iTunes and most likely whatever podcast app you’re using. I use Overcast, a fantastic and free podcast for iOS, and recommend trying it out if you’re not already using a podcast app. The topic is constantly changing so pick an episode that interests you and give it a try, worst case scenario we’ve wasted thirty minutes of your time!

And apparently we’ve got a Facebook and Twitter page too, if you’re into that sort of thing. (Thanks Jon!)


May 7, 2017


Recently a friend of mine, Rev. George Borghardt asked the internet to rank Star Wars movies, best to last. Presumably this was inspired by a discussion he and I had over some of Kentucky’s finest just the week before.

Some folks try to skimp on this and throw out Phantom Menace, Attack of the Clones and Revenge of the Sith as if they’re not “Star Wars”, but here’s the deal: They are. I don’t think anyone in their right mind would dispute that they are of lesser quality than the original trilogy, Force Awakens and Rogue One. Nonetheless, they are canon! I generally take the stance that the acting is horrible, but the underlying story is a valuable contribution to the galaxy. I’ll go even further by saying that I’m a huge fan of The Clone Wars TV Show, and you don’t get that without the prequels, which thus makes their cinematic presence worth it.

I’m going to cut to the chase, give you my list, and then explain why below. Here they are from best to worst:

  1. Empire Strikes Back
  2. Rogue One
  3. A New Hope
  4. Return of the Jedi
  5. Force Awakens
  6. Revenge of the Sith
  7. Attack of the Clones
  8. Phantom Menace

Spoiler Alert: If you haven’t seen ALL of the Star Wars movies then this is not the blog article you’re looking for.


I’ve never seen a respectable ordering of Star Wars movies where Empire wasn’t first. If you put Return of the Jedi ahead of it, say because you like Ewoks, then I would contend, you’re not serious about Star Wars. There, I’ve said it! But seriously, this is the movie that gave us AT-ATs, Bespin and Han Solo in carbonite! It’s the movie that’s awesome, even without a trench run and a moon-like killing machine. The characters are developed; they’re building chemistry, and the story unfolds with you on the edge of your seat through every scene. Seriously, I just love this movie!

Some people are going to be shocked that I’ve put Rogue One so high, so let me defend myself a little here. First off it’s worth noting I might still be high on Stardust, but I really loved this movie! I felt the story itself was bold and well-developed. The movie as a whole stands on its own laurels. The soundtrack is exquisite, especially considering that John Williams didn’t score it! Chirrut has become my favorite Star Wars character (supplanting Chewie after years in first place). There isn’t a character in this movie I felt was poorly cast, and each was an excellent contribution to not only the film, but the franchise as a whole. K2SO was a hoot and a half. Alan Tudyk did a fantastic job, and my only regret is that this is his only chapter in the universe. Speaking of which, they killed them all! This controversial way to end the movie was bold, and the clean bookends only enhanced the awesomeness of this tale. The battle scene at Scarif is amazing; easily the most thrilling CGI in the franchise. The little easter eggs from Rebels were delightful. The closing scene with Vader was truly ruthless, and the conclusion of this movie is a beautiful tie in to A New Hope - far more wonderful than I would have ever expected. I’ll say this in conclusion, I wasn’t born by the time Return of the Jedi first appeared in theaters. I caught the theatrical re-release and while I loved them, only Force Awakens and Rogue One have been the Star Wars of my generation. Of the two, Rogue One is the movie that I walked away with goosebumps, excited about what this far away galaxy had in store for both me and my kids.

Again, I might be high on stardust, so I reserve the right to revisit this when I come down from cloud city.

I put A New Hope next, which might surprise some people but my reasoning is simple - this movie created the galaxy we know and love! The cinematography is amazing in this film, just stop and admire the camera art - it’s stunning. This movie opens and we’re immediately immersed in the story. Stuff has happened, there’s a history to the tale that’s being told, a move unlike anything I can think of from its time. We get introduced to this evil machine man, our villain in the early moments, along with our heroine Princess Leia and the two comedic droids that transcend all of the Star Wars universe (seriously, they’re the only characters in ALL of the films and show!). Most importantly there is nothing hokey about this movie (which is why it displaces the next film in my ordering); it’s a true original and that’s why I’ve ranked it here.

Return of the Jedi is great, but it’s admittedly a little hokey at times. The ewoks, enough said. But I do love this movie, and it’s an excellent conclusion to the original trilogy. This movie opens with Luke “a Jedi knight” (no longer a padawan still discovering the ways of the force) taking on the vile gangster Jaba the Hutt. If you were watching this for the first time when it came out this was your first introduction to Jaba! Unlike Empire, Return leans on a Death Star, which is not in and of itself bad, but is also why Return falls behind A New Hope for me. If Return had been the first in the franchise I would have ranked it above A New Hope, but alas it’s not and thus why it falls in this spot.

Force Awakens was an awesome reboot to this franchise. I love Rey’s character, and Finn is an awesome wing man in this film. While the movie starts a bit slow, it’s an honest homage to the art which is A New Hope, all the way down to blowing up Star Killer Base with an X-Wing. Kylo Ren, by all measures, appears to be a formidable villain. I won’t belabor all the excellent aspects of this movie, I’ll just say this: Force Awakens is my generation’s A New Hope, and in that vein it served it’s purpose, but it’s hardly an original story to the Star Wars Trilogy. While it bests the prequels (easily) it doesn’t break above any of the original movies for me.

Revenge of the Sith is dark, so much so that George Lucas supposedly insisted it be rated PG-13, when all other Star Wars films had just been PG. Anakin is as creepy as ever, but the supporting cast is top notch. This movie opens with a battle over Coruscant with some amazing camera angles, and then we get a glimpse into Anakin’s struggle with the dark side as he slays Count Dooku. Order 66 is a shocking scene that answers a long time question of the Star Wars universe: What happened to the Jedi? Lastly, Anakin’s fall to the Dark Side, followed by his mutilation and finally his mechanical restoration concludes the prequels in the spirit of the original trilogy. We see the twins finding their homes in the galaxy, answering one of those burning questions from Return of the Jedi. Then to top it off, we get a glimpse of Lord Vader and the Emperor watching the construction of the ultimate weapon - a proper way to transition to A New Hope. This is a great capstone to the original trilogy. For most of my life I believed that this is where Star Wars ended and I was pretty happy with that. If Force Awakens were never to have come out this would have been an excellent ending to an epic franchise.

The thing I remember the most about Attack of the Clones was that stupid scene on Naboo with Anakin and Padme frolicking through the field. This was Hayden Christensen’s entrance into the Star Wars universe and his creepiness alone ruins the prequels for many people. But the truth is this movie tells us a lot about the Clones themselves, and sets up The Clone Wars TV show, which was truly fantastic. We also get our first glimpse into how Anakin struggles with the dark side as he slaughters the sand people on Tatooine. This glimpse helps the viewer transition from the cute little kid of the Phantom Menace into the evil tyrant of A New Hope. The battle scene on Geonosis is pretty much awesome, with Yoda commanding the Clones, “A perimeter around the survivors create!” Anakin gets his butt kicked in this one, but the scene is tensely awkward, with the only redeeming point being Yoda coming in and one upping Dooku in a way that only Yoda could. There’s a glimpse of the Death Star in this one, a nugget into the backstory of the amazing killing machine that sets the scene for the original trilogy. If it wasn’t for the Naboo scene it would be a close race with Revenge, but in the end it’s hard not to call this movie cheesy.

Phantom Menace is the one unnecessary film in the franchise, and thus it should be no surprise it’s in last place. Its limited value is in Qui Gon and Maul, let me explain. Qui Gon becomes critical in The Clone Wars to understanding how it is that Obi Wan comes back to Luke in the original trilogy. If you don’t care how or why that is, then this point is moot. Ultimately the Qui Gon / Obi Wan communing through the living force is not super critical to the story line, it’s just another facet told. Onto Maul, he was the face of this movie’s release in many respects. It seemed like every movie poster featured him when Phantom came out. He was scary and the face of the Dark Side and yet in reality his on screen presence was pretty pathetic. But Maul got a second life (almost literally) in The Clone Wars that continued on into Rebels. Some of the best stories in those two shows involve Maul and so, while Phantom Menace is unequivocally last on my list, it’s worth noting the significance it had on the animated series (which kick butt by the way). Now again, you can get by without this film and often when I’m telling folks what order to watch these I leave this one out, in hopes that it won’t soil their perception of this awesome set of movies. I would mention the ridiculousness of Jar Jar at this point, but the internet is filled with far better Jar Jar Hate than I could accomplish here.


Ordering these movies is difficult. It’s like asking, which is better: Godfather or Godfather II? In the end you’re forced to say they’re both great and you can’t bare to choose. That’s how I feel about the original trilogy. It’s almost painful to order them, and I even find myself second guessing whether I did it wrong. With great movies like Force Awakens and Rogue One coming out, it gets even harder! That said, I’ve done it and I even feel pretty good about it, too! But whatever you do, please don’t ask me to rank the Marvel movies!