We are live! After a couple of days of figuring out the code, the blog is finally up! *thunderous applause* Also… I am not really in New York.
So after lots of trouble, I finally managed to figure out a way to send my posts from my WordPress.com (This
.com part is important. I will explain in a minute.) page using GraphQL to marvin.dev.
In the last post I mentioned that I would be using the @gridsome/source-wordpress plugin that I found in the official Gridsome site. The team developed a package that could be easily installed through the terminal using
npm install @gridsome/source-wordpress. The instructions seemed fairly straight forward:
- Install package.
- Enter your WordPress url in the
gridsome.config.jslocated in the root folder.
- And copy or create some templates here and there to fetch the data.
So I did. The trouble starts right about here.
Every WordPress website has a JSON file which contains all the pages, posts, comments, authors, post categories, tags, and lots of other neat data. The way the plugin works, or is made to work, is using all that available data and pulling it from the WordPress REST API through the JSON file located at a certain location.
In the plugin, the path used to fetch the data is
https://www.yourwordpresssite.com/wp/v2/. When I tried using this path for my blog, it did not work. The reason for this is that this path is only used for self-hosted WordPress sites. In other words, WordPress.org sites, not WordPress.com. Uh oh…
At this point, GraphQL was showing me errors everytime I tried to make a query to the WordPress API. Luckily after a few minutes of Google-fu, I found the location of the JSON files for the WordPress.com sites, through a post in Stack Overflow. The location needed was:
https://public-api.wordpress.com/wp/v2/sites/yourwordpresssite.wordpress.com . However, now that the correct path url was found, the next step was to edit the
source-wordpress plugin (dependency). So, back to Google-fu.
It did take some work, but after thinkering with the JSON file and the plugin, I found out that by changing this
wp/v2 piece in 5 lines of code for this
/. I went back to GraphQL and voila!, stuff’s happening! Believing I was done, I pushed my code to my repository to deploy it to Netlify, but… Now Netlify was sending me errors.
The problem now was that the
@gridsome-source-wordpress dependency that Netlify was using, was not the one I had edited. That was only fixed in my local environment, but when Netlify tried to build the
dist, it would use the official one. So now… How do I fix this? Well, this took a day to figure out.
I’m still new to all this package, repository, dependency nonesense. I had some options to fix my problem. I could:
- Wait for Gridsome to release a plugin for WordPress.com sites.
- Suggest my fix and ask for a pull request, and hope someone sees it, finds it appropriate, and wait some time to have the matter resolved. or…
- Create a fork of the repository, make the changes myself and use this self-made patch to make my blog work right now!
Well… That did not work either… 😦
I have no experience creating packages or an account to upload them to NPM, but an alternative to hosting the package on NPM is having it right there in your own repository. At least that’s what I found after even more Google-fuing. However, for some reason, even though it was abundantly suggested to do so, it would not work for me when I tried to run it. It seemed like the
package.json could not be found. The reason for this is that Gridsome has multiple packages in one of the repositories. NPM would not let me install my patch in the forked repository I made if the
package.json was not in the root.
Time to get a bit creative! To fix this, I installed the dependency locally on a new project (folder). So
npm install @gridsome/source-wordpress. Now that that was done, change my 5 lines of code in the
index.js. I then changed the name of the dependency to
gridsome-source-wordpress-com and pushed that to a new repository called the same. Finally, I just uninstalled
@gridsome/source-wordpress and installed my new package through the terminal with
npm install git+https://github.com/iamthismarvin/gridsome-source-wordpress-com.git. Just configured my
gridsome.config.js with my settings and we are done!
Pushed my site again and waited for Netlify to build it. A few moments later, the website was up and running with a new blog!
So what did I learn? A lot.
Also, now I have a package in my repository which may help someone else in case they have a similar issue. Here is the link if needed: https://github.com/iamthismarvin/gridsome-source-wordpress-com
Alright then. I am writing this in WordPress. I will now publish this post and see it go live on my website for my personal amusement. This is it for today. Goodnight! 🙂