Building A Photo Blog on Strapi Gatsby And Typescript: Part 1 Starting to Start

I’m building a photo blog for my wildlife photography and I want to integrate with iNaturalist to pull data from there (the location, date, species and taxonomy information). I’m not much of a backend dev (tables tend to already be on the ground so why would I drop one?) so it looks like Strapi is a solid choice. I’ve worked with TypeScript a bit now and really like it, and I’m not married to Gatsby, but it’s got some great tools to solve a lot of problems.

Oh look, a tutorial: Build a static blog using Gatsby (Typescript) and Strapi

Even though it’s a tutorial from July 2020, there are a number of errors from following along or cloning the repo. Hopefully the below will help anyone running into the same issues.

1. GraphQL Errors: Gatsby won’t recognize calls in src\layouts\index.tsx as they don’t match the GraphQL calls at http://localhost:8000/___graphql. There's additional inconsistency for calling GraphQL to articles and edges. Debugging meant using the GraphQL playground to get the GraphQL calls exactly right. Using this tool will be instrumental in keeping your sanity if you’re new to GraphQL.
2. Warning for “Multiple node fields resolve to the same GraphQL field”. Ignoring because somebody in a github thread says “they shouldn’t cause any troubles.” 🤞 hope you’re right dude.
3. This is just a personal thing, but I wanted case consistency for templates/article.tsx and templates/category.tsx All other components have an uppercase letter. I capitalized both so it’s templates/Article.tsx and changed gatsby-node.js to match the path. Forcing git to recognize the change in the filename required a git rm --cached frontend/src/templates/article.tsx then re-adding both files to git. That part is probably Window’s fault.
4. Warning in the DevTools: React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work. birksy89 ‘s solution worked for me. Install the patch, and modify gatsby.node.js to have Webpack resolve react-dom to the hot-patch (only needed in dev mode of course).
5. Error in Strapi: Node 12 error: (node:43092) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated. Fixed by updating gatsby-source-filesystem to 2.3.14 in gatsby-source-strapi package.json. Uninstalled the old version npm uninstall gatsby-source-filesystem then reinstall and let npm find the dependency I updated in gatsby-source-strapi’s package. I made a pull request to address this.
6. I still get a warning for using componentWillMount in the DevTools console. I’m not familiar with React-Helmet so I haven’t fixed this yet. There’s a good ol’ GitHub thread on this though, makes makes me think replacing this library with react-helmet-async will be the way to go.
7. Gatsby-source-strapi has lost the imageSharpChild nodes, this solution works, but I need to const { createRemoteFileNode } = require(“gatsby-source-filesystem”) and change the GraphQL calls again. Looks like you can create custom resolvers and tell Gatsby to createRemoteFileNode wherever you need one. Seems like a bit of hack and I’m still unsure why sometimes Gatsby creates the imageSharpNodes and sometimes it needs to be told to make them. My app still randomly* looks for a childImageSharp as a child of image instead of a as a child of imageFile. I’m sure this will cause me headaches in the future, but for now I just want to actually start making my photo blog.

Two moods for Gatsby’s image graph creation

With those errors mostly out of the way, I created new errors and Strapi was no longer connecting to my database. Similar to this fellow.

The solution then was to update out of Strapi 3.0.0-beta. This wasn’t too difficult by just following the migration guide. Updating also had the additional effect of making the numbers in my package.json go up which is always a good thing. Additional fixes I needed:

• Remove the published_at value for articles, it’s now a protected value
• Add a JWT secret with a .env file
• Add the .env file to the .gitignore at the root of the project

Finally having gotten a clean slate with Strapi, TypeScript and Gatsby playing together, I can finally start actually coding. The last thing I want to do that would still fall under “setup” would be to get my Strapi backend to be TypeScript as well. There’s another good ol’ Github thread to read on the topic, but I’m going to actually keep things in JavaScript on the backend for now, just to keep making forward progress. I don’t think there’s type support for iNaturalist anyway. But just for my future self, it looks like this would be a good place to start converting Strapi to TypeScript.

Github Repo

Thanks for reading!

*random is my perception. Computers do what you tell them to. Sometimes I start up my Gatsby server and it works as expected, other times it has placed the node for my sharp images as a child of image. It’s probably my fault, but I don’t know man I’m just trying to put pretty pictures on the internet. Look at these Western Gray Kangaroos.