DIV and Backend again. A TypeScript Tale: Part 5

Tying it all together

The End is Neigh!

We have almost done it, we are right at the end. Frodo is in Mount Doom. Darth Vader is throwing the emperor down the tube. The battle of Hogwarts has begun. The Game of Thrones writing has gone to shit.


In this 5 part series, we explored all the tooling you needed in order to pull off a completely type safe To Do List. We Have all the tools, All the allies, and all the life lessons we need in order to complete our journey:

  1. Nx.dev- In Part 1, we setup an Nx workspace, with a NextJS front end.

  2. Type-GraphQL - In Part 2, we setup a graphql server that generates our graphql schema based on our types.

  3. TypeORM- In Part 3, we connected our Type-GraphQL server up to our database using TypeORM.

  4. GraphQL Code Generator- In Part 4, we introduced a code generator to create a type safe sdk we could access on the frontend.

  5. YOU ARE HERE
    Tying it all together - Lets put all our hard work to good use with some examples.

Prerequisites

You should have the following installed:

  1. node: version 14 or greater. I recommend NVM if you need to switch versions between projects

  2. yarn: You could use npm if you like, but this guide will be using yarns in it’s examples.

  3. Docker: We use docker to setup a development database. You can always install postgers directly on your machine if you don’t want to use Docker. Just make sure postgres is running on port 5432.

Part 5: Tying it all together

Want to skip ahead? Check out the the Part 5 source on GitHub

We finally get to reap the benefits of all our setup. To wrap this all up, lets finish off our app.

Adding Todo Items

  1. First, lets add a way to actually add a todo. We can add a method to the list-resolver. In a bigger app, you may consider giving TodoItems their own resolver.
    libs/graphql/src/lib/list/list-resolver.ts

  2. Add the addTodoItem to the end of libs/graphql-sdk/src/lib/myLists.gql

  3. Regenerate SDK using yarn gen-sdk

  4. import useAddTodoItemMutation

  5. Add useAddTodoItemMutation to our component

  6. Add a button for adding a todo. Which is the same technique used for adding a list:

We did it! We can add todo lists. Only one thing left. Marking our items as done.

Marking todo items as done.

We will follow the same basic flow.

  1. Add a mutation for toggling a review item. We will again abuse libs/graphql/src/lib/list/list-resolver.ts out of sheer laziness.

  2. Add another mutation to libs/graphql-sdk/src/lib/myLists.gql

  3. Regenerate SDK using yarn gen-sdk

  4. Update the front end to use our toggle.

Voila! …………………………… Damn it! What is this nonsense?!

TypeORM is sorting our todoItems by last modified, so items are jumping around as we click them. that is not a great user experience. Lets go ahead and sort them on the front end by id. In a real application, you would want to sort them in part of your query, but in the spirit of maximum laziness, we are just going to sort by ID on the front end.

Last but not least, lets just add some styling, animations, and The Wooley Way logo.

If you want to see everything that was changed, and how terribly lazy I was while making it look good, I squashed it all into one commit for you. If you are curious, but not that curios:

  1. Ran The Wooley Way logo SVG through svgr and put it in a component. I modified the SVG to be position absolute, and removed the text. The original looks like this:

  1. Created a div with the same color background, and left border, as the SVG. I added padding to the top and left of the div to make the text line up.

  2. Added a bunch of framer motion animations.

  3. Styled the buttons to match our hackerman logo.


A fully stylized branch is available here


It’s been quite a journey, friends!

Thanks for sticking it out to the end. This was a long series, but hopefully it was worth the read. I hope you learned some new neato things for your next project. If you use this setup in any projects, make sure to tweet it to me: @ericwooley. I’d love to follow your progress!

If you would like to see more content like this, make sure to sign up for the news letter.

If you spot an error, or have any recommendations, please:

Leave a comment

If you really liked this content, please consider sharing it.

Share

Share The Wooley Way Newsletter