Get and display Tweets in GatsbyJS
Social media are the most powerful tools in the modern world. Internet reaches areas which it didn’t in the past, the mobile applications market grows and more and more people use social media. As you can see in the chart below, Twitter shares drop in the social media market.
On the other hand, where Facebook and Instagram are mostly applications for marketing purposes, Twitter is, in my opinion, the best information tool. That’s why I would like to show how to get recent tweets and display them in a GatsbyJS application.
What you should already know and prepare:
- basics of React,
- basics of GraphQL,
- basics of GatsbyJS,
- get a Gatsby project set up (here you can find how to do it: https://www.gatsbyjs.org/docs/quick-start ).
If it’s not your first time on this page and you would just like to remember the whole process you can take a look below at the table of contents:
- Create Twitter Application https://developer.twitter.com/en/apps
- Generate bearer token https://developer.twitter.com/en/docs/basics/authentication/oauth-2-0/bearer-tokens
- Install plugin https://www.gatsbyjs.org/packages/gatsby-source-twitter/?=twitter
- Configure gatsby-config.file
- Display Tweets using StaticQuery component
First, of all, you need to have basic knowledge about React, GatsbyJS and GraphQL. If you haven’t set up a Gatsby project yet, you can do it using GatsbyJS documentation (https://www.gatsbyjs.org/docs/quick-start). To connect with Twitter API, we will use gatsby-twitter-source plugin (https://www.gatsbyjs.org/packages/gatsby-source-twitter/?=twitter).
If you are ready, let’s start! 🙂
Create Twitter Application
If you have already visited twitter for gatsby plugin, you probably noticed, that the first thing you have to do is to create a new application on Twitter Developer Account (https://developer.twitter.com/en/apps). You can see here a list of all your applications; to create a new one, please click the button in the top-right corner.
On the next screen, you have to fill all the form fields, information about the application and URLs.
After clicking the ‘Create’ button, you will see information about the app that you’ve made. On the top, you can see tabs – click the ‘Keys and tokens”.
That is probably the most important step – you have now access to the API key and API secret key. We are going to use it to create a bearer token (our next step) and use it in Gatsby file configuration. You don’t have to remember these keys- anytime you can come back here and check your keys.
Then, we need to generate a bearer token. You can see here: https://developer.twitter.com/en/docs/basics/authentication/oauth-2-0/bearer-tokens , that “a bearer token allows developers to have a more secure point of entry for using the Twitter APIs, and are one of the core features of OAuth 2.0. “
We need to make this step to allow our application to connect with Twitter API. To do it, we have to type in the console command line :
curl -u ‘<API key>:<API secret key>’ \
–data ‘grant_type=client_credentials’ \
‘https://api.twitter.com/oauth2/token‘
and replace <API key> and <API secret key> with values that we can find in our Twitter Developer account (which we created in previous step). In my case, it would look like this:
curl -u ‘vfhzhNXXXXXXXXXXXXXX:EDY8Qcm1RZ2PXXXXXXXXXXXXXXXX’ \
–data ‘grant_type=client_credentials’ \
‘https://api.twitter.com/oauth2/token’
In response, we should get something like this:
{“token_type”:”bearer”,”access_token”:”AAAAAAAAAAAAAAAAAAAAAKiUDwEAAAA
A0ohp4Cckaj1ssr8dHZZWAXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX“}
An access_token is the value that we need! We are going to use it in the next step:)
Install dependencies and configuration
Unfortunately, it is not the end of our configurations. Now we need to install dependencies in Gatsby. Firstly, we have to install a plugin. In your command line type:
npm install gatsby-source-twitter
Then, open gatsby-config.js file and register a new plugin. Inside plugins[] we have to paste a code from plugin documentation:
Then, we have to use all the keys that we made in previous steps. “Consumer_key” and “consumer_secret” are the keys from Twitter Developer account, “bearer token” we got from the command line console. “Nameofthequery” you can change it for whatever you want -it’s just a name of the query. “Screen_name” is a name of the account that we want to get tweets from. In my case, the code will look like this:
Yeah, we are almost done. Almost. Try to build your Gatsby app – it should run without any errors.
In the command line we can find information:
⠀View GraphiQL, an in-browser IDE, to explore your site’s data and schema
http://localhost:8000/___graphql
Let’s take a look at these URL and see what Gatsby tools show us.
Now we can see a GraphQL console with the structure of data that we can get. In the list on the left, you should now see a new position: allTwitterStatusesUserTimeline[name_of_your_query]. Let’s press “ADD NEW QUERY”. If you add some fields like on the screen above and press play button, you should see data properly fetched from the Twitter on the right.
Why did we do it? Just to make sure that we use proper structure and paste it to our Gatsby component.
Fetch posts
Finally, we can open our component Gatsby file and work on displaying tweets. I will do it in index.js, a file from Gatsby Starter package.
First of all, we have to use grapql and StaticQuery elements which we first need to import from ‘gatsby’.
import { graphql, StaticQuery} from ‘gatsby‘;
As you can see here (https://www.gatsbyjs.org/docs/static-query/), StaticQuery is a component that has two props: query and render. Query is a prop that helps us to fetch data. Render obviously renders and shows captured data. Inside query props, we need to create a new query with custom name and paste what we got in our Gatsby GraphQL console in previous steps. In our render prop, we need to pass a const which keeps data, then we have to map an array (because we fetched an array of tweets).
Our final step is to render mapped data inside html structure. Below, you can see our code:
And that’s the result:
Obviously, we can style html elements in every way we want, we can fetch more attributes and display them. You can do whatever you want with your data 😉
Below, you can see my final code with styling.
And that’s the final result:
Summary
Getting tweets in our Gatsby project might look a little bit complicated at first. But quickly, we can notice that the most complicated and time- consuming is configuring app in Twitter Developer Account. After getting all the required keys and tokens we can quickly fetch tweets and display them on our webpage.
I hope that above post is helpful 🙂
Important alert: You should check if the Twitter account where you want to get data from is not a private account – otherwise, you would get an error in console while building a project.
Important links:
Gatsby-source-twitter:
https://www.gatsbyjs.org/packages/gatsby-source-twitter/?=twitter
Twitter Developer Account:
https://developer.twitter.com/en/apps
Bearer token:
https://developer.twitter.com/en/docs/basics/authentication/oauth-2-0/bearer-tokens
GraphQL:
Repository of my project:
https://github.com/wojciechnowaczyk/GatsbyTweets