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.
- 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 toarticles
andedges.
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. - 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.
- This is just a personal thing, but I wanted case consistency for
templates/article.tsx
andtemplates/category.tsx
All other components have an uppercase letter. I capitalized both so it’stemplates/Article.tsx
and changedgatsby-node.js
to match the path. Forcing git to recognize the change in the filename required agit rm --cached frontend/src/templates/article.tsx
then re-adding both files to git. That part is probably Window’s fault. - 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 modifygatsby.node.js
to have Webpack resolvereact-dom
to the hot-patch (only needed in dev mode of course). - Error in Strapi:
Node 12 error: (node:43092) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
. Fixed by updatinggatsby-source-filesystem
to2.3.14
ingatsby-source-strapi
package.json. Uninstalled the old versionnpm 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. - 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.
- 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 tocreateRemoteFileNode
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 achildImageSharp
as a child ofimage
instead of a as a child ofimageFile
. I’m sure this will cause me headaches in the future, but for now I just want to actually start making my photo blog.
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.
*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.