Growing Pains
2025-05-14
I have recently had to do some housekeeping on this website, fixing broken assumptions and adapting to newer technology. There are a lot of changes I would like to implement on here including adding my degree to the certifications page, updating my about info and adding some more links to my GitHub projects.
I will start with the catalyst to the emergency repair, my misunderstanding of WPGraphQL. So, in my previous guide about building a headless blog with WPGraphQL, set up the query itself to return posts with no arguments, and as it turns out that default paginates to 10 node results. The correct way to work with GraphQL based on the docs is to query a cursor after the edges and it should return a string that can be passed into the “after” argument of posts for example to get the next chunk of data. The simple and hacky patch way to do it is shoot for a number higher than your current ammount of posts and pass that to the “last” argument.
While I implemented this fix, I thought why not recklessly upgrade my Astro version to the latest. I had a backup and I figured that it could be a fun learning experience to migrate a project “in production.” The update was uneventful, and it didn’t throw any errors, and my pages seemed to load no issue. But, I never checked my API functionality that is built with the Astro middleware. So when I went to search for a post, it did nothing. Popped open the console to see a 404 error. Astro V5 handles endpoints a little differently, and I just needed to read up on it and make a few minor changes. Basically the only thing you need to add to your existing endpoint files is an additional variable export…
export const prerender = false;This is makes sure the dynamic endpoints are set up in the /server path inside your /dist. Otherwise a prerendered response is returned, which could be a really interesting mechanic, but for our headless WordPress setup, not very helpful. The other change I made across all endpoints was the exported function was named “post”, but all examples in this version use “POST” or other all caps versions of HTTP requests. Another optional but recomended change is to start embracing TypeScript for Astro, and use the provided type for an API route, something like this…
import type { APIRoute } from "astro";
export const POST: APIRoute = async ( {request}) =>{
//logic parsing request.json() body
return new Response(JSON.stringify({
message: responseJSON
}), {
status: 200
});
};This kind of leads me to my next tasks, upgrading the experience and organization of this blog. Two areas that I could use some practice in is TypeScript and React. I think the next post is probably going to be about how I made my Capstone projects in Astro, but those were using vanilla web components and regular astro components. So, rewriting this blog to use TSX and React for search, comments, and the front page. I will be interested in how the performance will be effected, but I want to make som aesthetic changes as well, switch to a sans serrif font, . I have been pretty enamored with Tailwind and Daisy UI in the last few Astro projects I made, but I would like to try out Tamagui, especially because it has great support for React Native. These changes seem radical, but that’s what I love about Astro, you can just change a few pieces at a time and it doesn’t have to be a huge rewrite. The small changes include adding some credentials, project links, and view transitions. View transitions are incredibly easy to implement with Astro by making a component that you put in every <head> element of any page you want to use the view transitions. Then in that component you only need two lines, one to import the Astro transitions module, and one to call it as an element. Also, if you didn’t know view transitions are an almost free animation effect where the transitions from page to page instead of loading a new screen from blank white to fully rendered, anything that would be in the same place on the new page load stays in place, while the new UI fades in. There are several ways to control these animations, but they give that SPA user experience of using app, with the SEO optimization and semantic sense of traditional page navigation.
I am looking forward to growing all the time, but it would be amazing to get a mentor and a position making software full time. Be on the lookout for that React Native project by the way, I think it will end up being impressive, native maps, auth, local data storage, and a complex public API.
Comments