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

  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 example graphQL calls for a photo, one with a imageFile node, one without.
Two moods for Gatsby’s image graph creation
  • 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
Two kangaroos, one eating grass on top of the other
Thanks for reading!

--

--

--

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Easily optimise your React (Native) Components rendering

How to Import SVG file in React Native [Typescript]

Effective Javascript debugging: Memory leaks

UX focused React and React Native Development

The peculiarities of JSON

How to migrate from Dark Sky API to OpenWeather One Call API

WEB COMPONENTS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Taylor Nodell

Taylor Nodell

Developer. Musician. Naturalist. Traveler. In any order. @tayloredtotaylor

More from Medium

React Task App (Part 1)

SSR React page from Google Cloud Function endpoint

Build Blog Site using Gatsby JS — Part 4 (SEO)

How to implement authentication in NextJS using Amazon Cognito