DEV Community: Alex Nielsen

My Gatsby site stopped working, and how I fixed it

Alex Nielsen — Fri, 01 Jan 2021 07:18:21 +0000

TL:DR
Enable Public Introspection should be checked in WordPress plugin administration

My blog is running on Gatsby with Wordpress as a headless CMS for my old blog posts. I recently went to update a few things, just fixing typos in blogs, no code changes, and the darn thing would suddenly not compile!

I kept getting

ERROR #11321  PLUGIN
"gatsby-source-graphql" threw an error while running the sourceNodes lifecycle:
warn The gatsby-source-graphql plugin has generated no Gatsby nodes. Do you need it?

and

ERROR #85923 GRAPHQL
There was an error in your GraphQL query:
Cannot query field "wpgraphql" on type "Query".

I figured this meant that Gatsby was not getting any response from my Wordpress site. I went back to the egghead.io training I used to help me learn how to build the site and realized the WPGraphQL plugin used in the video was on version 0.7.0 and I apparently updated at some point to version 1.0.5. In the GraphQL settings on the left side of the Wordpress administration page, down at the bottom there is a field called 'Enable Public Introspection' which was not clicked. It basically says by default, queries need to be authenticated unless this box is checked. So I checked it, meaning you don't need authentication to hit the wordpress API anymore. Well, it worked. Presumably, you can send some auth info in your query if you need to keep it private but for me just posting blogs I'm not worried about it.

A Super quick guide to arrow functions

Alex Nielsen — Wed, 26 Feb 2020 21:30:33 +0000

This is NOT a definitive guide to arrow functions. I’m writing a few other tutorials and blogs and want to have something to point people to so they can have a quick explanation and example of arrow functions since they are in so many of the modern frameworks. Just enough to be dangerous! To be clear, there are reasons where you should not use arrow functions, but they are not going to be discussed in this blog post. I just want you to be able to know how they work when you see them “in the wild”.

Let’s get started. I’m going to take you step by step converting a regular function into an arrow function.

Here’s a regular function using the function keyword

Let’s change that to an anonymous function expression

Should be nothing new here so far. No Arrows or ES6 yet, but here it comes…

First remove the function keyword and add the arrow

The only thing going on there is removing the function keyword and adding the arrow. And that’s it! You’ve gone and made an arrow function! Hurray! But wait, there’s more!

If there is only one argument, you can get rid of the parentheses around it.

Getting pretty lean but we can take it even further. If the body of the code is only one line, we can get rid of the curly braces.

Frequently, you’ll see these used as a callback in another function so there is no const and no function name. This is the case that we see quite a bit and the real reason I wrote this all up in the first place

This doesn’t do anything on its own, but as a callback it’s useful. Here we’re using as a callback for looping over an array with the forEach array method.

As a comparison, here’s a regular old for loop. Sure, we understand this as programmers, but the arrow function just reads like a sentence in normal language. So much easier to understand!

I think that covers the basics. Again this is not meant to be the definitive guide, just an intro to figure out what they mean because we see them ‘in the wild’ in all the modern frameworks.

I added a video version of this blog. If you prefer video, check it out:
YouTube:

I have two accounts by accident

Alex Nielsen — Tue, 21 Jan 2020 14:53:14 +0000

Somehow I have two accounts. One with my twitter login and one with my github. Is there any easy way to combine them and get rid of one or should I just leave one hanging and choose the other and focus on it? Thanks for any input.

Event delegation in JavaScript

Alex Nielsen — Sun, 30 Dec 2018 14:08:44 +0000

I have been making web development videos to help me solidify what I've been learning. This one is about event delegation in JavaScript. How to add one listener to multiple elements. https://youtu.be/buVEB6TI3VU

How Array.map works in JavaScript with and example in React

Alex Nielsen — Thu, 20 Dec 2018 02:49:04 +0000

I'm new to Dev.to but I wanted to get something up here. I'm currently a stay-at-home-dad but I am wokring on making a return to tech full-time. A sizeable gap in my employment in the tech industry has made it difficult to show relevant work experience, so I decided to start my blog to share what I'm re-learning. I'm still a bit hit or miss on whether or not I really keep it updated but I do have a few recent videos I've put on youtube. I recently made a video explaining how Array.map works so I thought I would share it here.

How Array.map works in JavaScript