This Gatsby post was written for Gatsby 3 and is no longer maintained. If you would like to try out SvelteKit or Astro, check out the maintained posts which are based on those. Astro lets you continue to use React but also with partial hydration which can be used to provide an enhanced user experience. SvelteKit offers server side rendering as well as static site generation. See the post on how performance improved switching from Gatsby to Astro for more background.
Gatsby’s data API can seem tricky to get to terms with, so here we look at a practical example, using Webmentions. Webmentions is a free service which lets you track user interactions with your website pages on social platforms like Twitter. As an example, once set up, you can use the webmention.io API to query how many people have shared or retweeted a Tweet. If you are familiar with Gatsby, you will know it has a built-in GraphQL data layer, allowing you to access data in your page components. Typically, you will add a plugin to add new data. Here, though, we will add data into Gatsby GraphQL manually, using the Gatsby Node API . We use Webmentions as a practical example which you can add to your existing projects.
There are a couple of Webmentions plugins, though we roll our own here, essentially. That way, we can later leverage the code to add data into Gatsby GraphQL from any API.
There are a few steps to set up the service. Daily Dev Tips has a fantastic article which tells you how to set up Webmentions . Just follow the five steps in that piece. For step 3, as we are working in a React framework, to add the tag to our page head, we can use the React Helmet package , and add this code to a Layout component :
Once you have set up Webmentions, you will need your Webmentions API key. You can find this by logging into webmentions.io and heading to the settings page . The API Key is at the bottom of the page. Make a note of it, you will need it shortly.
All the work we need to do for Gatsby to query the Webmentions API and then add data into Gatsby
GraphQL is in the
gatsby-node.js file. Let's write a function to
query the API, getting the latest mentions:
domain variable will be the domain you set Webmentions up on
token your API token. These will be passed in when we call the
function in the next step.
reporter is a function in the Gatsby
API which we use here to output warnings to the console.
Let's look at the sourceNodes API call next, this is where we do the heavy lifting.
We use the sourceNodes API to pull in data and add it to Gatsby's GraphQL layer. It is called as
Gatsby sets up our site. We will use Angelo Ashmore's
gatsby-node-helpers to generate some data sourceNodes. Let's install that first:
We also install
query-string which we referenced in the
fetch call in the previous section, as well as
camelcase-keys converts the object keys in the
Webmentions object we create from the API call result.
With that out of the way, we'll code up our sourceNodes function:
You will see, in line
6, we pull in two environment variables:
WEBMENTION_TOKEN. Don't forget to add these to your
.envfiles. The first is the domain we registered with Webmentions. The second is the API key we got earlier from webmentions.io.
58we define all the Webmentions types which exist on the object we pull in. The types are needed for GraphQL. It is important to update these if you are using this code for a different API.
30we pull in the author image as a
Filetype. The actual variable is just a string containing the URL for the image. By defining the type this way, we can later access and process the image using the Gatsby Image API .
61we actually call the
getMentionsfunction which we defined in the previous section.
It's definitely worth setting up Webmentions on one of your projects at least, so you have a working example of how to add data into Gatsby GraphQL. You can then use that code as a starting point if you need to add data from any other API into your project's GraphQL.
In this post, we learned:
- how to use the Gatsby sourceNodes API;
- setting up Webmentions for your site; and
- how to add data into Gatsby GraphQL.
I hope you found this useful. Let me know if I can improve the content in any way. Also, I am keen to hear which APIs you will use this code on. You can leave a comment below, @ me on Twitter or try one of the other contact methods listed below.
If you have found this post useful, even though you can only afford even a tiny contribution, please consider supporting me through Buy me a Coffee.
Finally, feel free to share the post on your social media accounts for all your followers who will find it useful. As well as leaving a comment below, you can get in touch via @askRodney on Twitter and also askRodney on Telegram . Also, see further ways to get in touch with Rodney Lab. I post regularly on SvelteKit as well as Gatsby JS among other topics. Also, subscribe to the newsletter to keep up-to-date with our latest projects.