Continuing My Side Project & Learning React
Lately, I’ve been making steady progress on my side project, which I’m currently calling Digital Family Cookbook. I’m making it as a content management system for cooking recipes. As I’ve mentioned previously, I’m writing it using Node.js, React, & GraphQL. It’s been quite a learning curve, but I’m definitely glad I’ve been working on it. The tools are pretty cool and easy-ish to use once you get used to the syntax and some of the idiosyncrasies of React and JSX.
It’s different from what I’m used to
The “Gotcha” Moment
The perfect example of having to remember this difference was with what I’m currently working on. The feature I’m currently working on is the form to create recipes. I managed to get the form working, I got the data sent to the server, the recipe was created, but none of the directions or ingredients were attached to the recipe. I looked in the database and the directions were there, as were the ingredients, but the recipe had no idea they existed. I thought maybe the server wasn’t getting the data, but a console.log quickly showed me it was. What I failed to take into account was that the forEach function on the directions and ingredients array was not being awaited like I thought it was.
I wrote the code to go through each ingredient and direction, add it to the database, and add its ID to an array. Then in the create recipe mutation, add the connections. Because it wasn’t being awaited, the arrays didn’t get populated by the time it was running the create recipe mutation so no link was ever created…oops!
A quick change corrected that problem and all of a sudden, the form worked as expected.
In the end, it was a pretty easy mistake to make, but it’s one I’m going to remember and learn from.