Awesome Open Source
Awesome Open Source

gatsby-source-twitter

Check code

Source plugin for pulling data into Gatsby from Twitter Search API.

Supported API

Actually the plugin support a bunch of API endopoints

Check Twitter documentation for more details

How to use

To start using this plugin you have to create an App on developer and then create a bearer token to use application authentication

Note: Only api that use application authentication will works. User authentication api are not supported

Here an example of the configuration

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-twitter`,
      options: {
        credentials: {
          consumer_key: "INSERT_HERE_YOUR_CONSUMER_KEY",
          consumer_secret: "INSERT_HERE_YOUR_CONSUMER_SECRET",
          bearer_token: "INSERT_HERE_YOUR_BEARER_TOKEN",
        },
        queries: {
          nameofthequery: {
            endpoint: "statuses/user_timeline",
            params: {
              screen_name: "gatsbyjs",
              include_rts: false,
              exclude_replies: true,
              tweet_mode: "extended",
            },
          },
          nameofanotherthequery: {
            endpoint: "search/tweets",
            params: {
              q: "#gatsbyjs",
              tweet_mode: "extended",
            },
          },
        },
      },
    },
  ],
}

Check this repository for more example.

Plugin options

credentials

You have to create an App on Twitter and creating a bearer token following this instructions using your consumer key and consumer secret

queries

You have to specify a object where each key is a query to Twitter API.

Choose a name for the query (you will use later to retrieve data), for example gatsbyHashtag, but you can use whatever you want.

queries: {
  gatsbyHashtag: {
    endpoint: "search/tweets",
    params: {
      q: "#gatsbyjs",
      tweet_mode: "extended",
    },
  },
},
  • endpoint: The endpoint of one of the supported API.
  • params: The allowed params of the API specified with endpoint option.
  • fetchAllResults: Fetch all result cycling through pages. (Only for search/tweets)

How to query your Tweets data using GraphQL

Now that you fetch some data from Twitter, you can access it with a GraphQL query.

The below gatsbyHashtag query will became allTwitterGatsbyHashtag

Below is a sample query for fetching all Tweets nodes.

query {
  allTwitterGatsbyHashtag {
    edges {
      node {
        full_text # or text depending by endpoint params
        user {
          name
        }
      }
    }
  }
}

Warning: id field is not the tweet id, but Gatbsy internal node id. Use id_str if you need to use the tweet id

Breaking changes

3.x.x version contains some breaking changes. Here an example of how to migrate from 2.x version

Old options

options: {
  q: `@wesbos`,
  credentials: {
      consumer_key: "INSERT_HERE_YOUR_CONSUMER_KEY",
      consumer_secret: "INSERT_HERE_YOUR_CONSUMER_SECRET",
      bearer_token: "INSERT_HERE_YOUR_BEARER_TOKEN"
  },
  tweet_mode: 'extended'
}

New options

options: {
  credentials: {
    consumer_key: "INSERT_HERE_YOUR_CONSUMER_KEY",
    consumer_secret: "INSERT_HERE_YOUR_CONSUMER_SECRET",
    bearer_token: "INSERT_HERE_YOUR_BEARER_TOKEN",
  },
  queries: {
    wesbos: {
      endpoint: "search/tweets",
      params: {
        q: "@wesbos",
        tweet_mode: "extended",
      },
    },
  },
},

Updated GraphQL query

query {
    allTwitterWesbos {
        edges {
            node {
                created_at
                full_text
                user {
                    name
                }
            }
        }
    }
}


Alternative Project Comparisons
Related Awesome Lists
Top Programming Languages

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,158,774
Twitter (21,515
Fetch (8,946
Gatsby (8,560
Tweets (8,330
Timeline (4,028
Oembed (409
Graphql Query (217