A lowcode way to handle Twitter feed events with Zapier and Hypi

Low-code
, ,
#1

Let’s say a user posts a new tweet on a twitter account and your application wants to handle this event. The response to this event could be anything like sharing this tweet on the user interface of the application or an automated post on another social media platform.

You may POST the new tweet to Hypi’s webhook and Hypi processes this webhook request for you.

Let’s see how to implement use case of handling a new tweet event using Hypi’s webhook.

For demonstration purpose, we have sent a sample webhook request to Hypi using Zapier. You may use services of any of the webhook provider or send your own webhook request.

Our sample payload of the webhook consists of a JSON with the text of the tweet and url where the tweet was posted. Let’s go through the graphql function (newTweet) that processes the webhook request.

type Query {
  newTweet(payload: WebhookPayload!): 
    WebhookResponse @tan(type:Groovy, inline: """ 
    import com.fasterxml.jackson.databind.ObjectMapper
    def mapper = new ObjectMapper()
    def tweet_new = mapper.readTree(payload.body)
    gql(\"""
    mutation {
        upsert(
            values: { 
                WebhookData: [
                    { 
                        tweet: ${tweet_new.text}  
                        url: ${tweet_new.url}  
                    }
                ] 
            }
        ) {
            id
        }
    }\"""
    )    
    return [
      "status": 200,
      "headers": payload.headers,
      "body" : payload.body
      ]
  """)
}

Please make a note the signature of the function processing webhook request must be (payload: WebhookPayload): WebhookResponse. Do check out structures of WebhookPayload and WebhookResponse. newTweet function extracts the body of the payload using ObjectMapper. Payload body is a string having a data in the json format. Objectmapper parses the json and data becomes available in key-value pairs.

The payload data may be in json, xml or raw data. Objectmapper can be used on all forms of data. But this example shows how to use it with JSON.

Using gql function, we insert/save the values of the tweet and url keys into the fields of WebhookData type. This data can then further used to implement dependent functionality.

type WebhookData {
    tweet : String
    url: String
}

After processing the request we return the status as 200 and send back the body and header as it is. You may customise the WebhookResponse data as per the requirement.

Let’s create Webhook object with the name ‘Tweet’ with the query function newTweet.

mutation Upsert($values: HypiUpsertInputUnion!) {
  upsert(values: $values) {
    id
  }
}

{
  "values": {
    "Webhook": [
             {
                         
             "name": "Tweet",
            "query": {
            "type": "Query",
            "field": "newTweet"
            }
          }
       ]
    }
}
#result
{
  "data": {
    "upsert": [
      {
        "id": "01F9936P3D3DKDNQF9390YDK0Z"
      }
    ]
  }
}

We can frame the http url to send webhook request like this:

https://api.hypi.app/webhook/{domain}/{webhookname}

Let’s say our domain is governorship.apps.hypi.app. So, our webhook url to send request to is
https://api.hypi.app/webhook/governorship.apps.hypi.app/Tweet

Alright! Hypi webhook is ready to receive the request.

Now we will do customization on Zapier to POST new tweets to Tweet webhook of Hypi.

  1. Choose Twitter account and choose trigger event of my tweet. Here it is new tweet by a user.

  1. Choose the latest tweet on the twitter account. It displays the details of the tweet.

  1. Set up an action to POST this new tweet to hypi’s webhook. Enter the URL of the webhook that we framed earlier. Choose payload type json. Now choose the data to be sent over in the payload. Here we have chosen text and url from the tweet data. You may refer the tweet details from previous step.

  1. Let’s test the action by sending the customised POST request.You can see that the test was successful.

We will see the WebhookData to check whether the tweet details were stored.

{
  find(type: WebhookData, arcql: "*") {
    edges {
      node {
        ... on WebhookData {
          woksheet
          tweet
          url
        }
      }
      cursor
    }
  }
}
#Result
{
  "data": {
    "find": {
      "edges": [
         {
          "node": {
            "tweet": "hehehe",
            "url": "https://twitter.com/DemoHypi/status/1409466936170217475"
          },
          "cursor": "01F998T9E7APVZ0DT4P6RDB0K6"
        }
      ]
    }
  }
}

Here the new tweet and url got saved in webhookData!

Conclusion:

You may use the Hypi’s webhooks with ease!

Simply write a function to process the webhook request and process the payload data as per the requirement. Encode an after-trigger functionality which gets executed after webhook processing.
Hypi facilitates the use of webhook and it can handle any kind of webhook request.

Do give it a try! Also let us know if you have any queries/suggestions.

Guide to build Meal Delivery App using Hypi’s low code API