SPK Network - Using GraphQL for 3Speak Mobile App

Hey everyone!

With this 3Speak Video & Hive post, @sagarkothari88 illustrates how to use GraphQL Queries based on Union Indexer.

SPK Network is always Open-source:

• Mobile app source code
  • https://github.com/spknetwork/Android-app
• Legacy / Current website
  • https://github.com/spknetwork/3speak-legacy-frontend
• Legacy / Current creator studio
  • https://github.com/spknetwork/3speak-legacy-studio
• Union Indexer
  • https://github.com/spknetwork/union-indexer-node

What is GraphQL?

• GraphQL is a query language for APIs and a runtime for fulfilling those queries with existing data
• GraphQL provides an interactive way of building the queries & play around them.
• You can select the attributes/fields/properties of your choice for the response.

Why is GraphQL now on Mobile App?

• The mobile app shows different feeds but is not sorted as per the curation amount.
• For each video, payout info, votes, etc., values are fetched, over & over, when displayed on the screen.
• This consumes internet bandwidth & you may want to avoid it if you are on mobile data.
• There are other issues with the existing feed.
• Feed needs to be updated.
• With GraphQL, we can fix these issues & have needed data in a single request.
• @sagarkothari88 is now implementing GraphQL-based feeds on 3Speak-Mobile application.

How to use GraphQL?

• Please view the video to understand in detail with a live demo.
• Open this link - https://union.us-02.infra.3speak.tv/api/v2/graphql
• Select the feed of your choice.
  • Social Feed
  • Trending Feed

• Select attributes that you need for your User Interface

• Do not forget to apply this filter if you only want the data for Videos.

• Hit the run button.

Ready-made GraphQL Queries for you

Trending feed

query MyQuery {
  trendingFeed(spkvideo: {only: true}) {
      items {
        ... on HivePost {
          spkvideo
          stats {
            num_comments
            num_votes
            total_hive_reward
          }
          lang
          title
          tags
          permlink
          created_at
          body
        }
    }
  }
}

New Videos Feed

query MyQuery {
  socialFeed(spkvideo: {only: true}) {
          items {
        ... on HivePost {
          spkvideo
          stats {
            num_comments
            num_votes
            total_hive_reward
          }
          lang
          title
          tags
          permlink
          created_at
          body
        }
  }
}

First Uploads Feed

query MyQuery {
  socialFeed(spkvideo: {only: true, firstUpload: true}) {
    items {
        ... on HivePost {
          spkvideo
          stats {
            num_comments
            num_votes
            total_hive_reward
          }
          lang
          title
          tags
          permlink
          created_at
          body
    }
  }
}

Related Videos

query MyQuery {
  relatedFeed(permlink: "sdltslwo", author: "leofinance") {
        items {
        ... on HivePost {
          spkvideo
          stats {
            num_comments
            num_votes
            total_hive_reward
          }
          lang
          title
          tags
          permlink
          created_at
          body
        }
    }
  }
}

My Published Videos

query MyQuery {
  socialFeed(
    spkvideo: {only: true}
    feedOptions: {byCreator: {_eq: "sagarkothari88"}}
  ) {
    items {
      ... on HivePost {
        body
        title
        tags
        stats {
          num_comments
          num_votes
          total_hive_reward
        }
        spkvideo
        permlink
        lang
        community
        created_at
      }
    }
  }
}

3Shorts

query MyQuery {
  socialFeed(
    spkvideo: {only: true, isShort: true}
  ) {
    items {
      ... on HivePost {
        body
        title
        tags
        stats {
          num_comments
          num_votes
          total_hive_reward
        }
        spkvideo
        permlink
        lang
        community
        created_at
      }
    }
  }
}

Leaderboard

Coming soon.

Community Details

query MyQuery {
  community(id: "hive-181335") {
    title
    about
    created_at
    images {
      avatar
      cover
    }
    roles {
      role
      title
      username
    }
    subscribers
  }
}

Videos from a community

query MyQuery {
  community(id: "hive-181335") {
    title
    about
    created_at
    images {
      avatar
      cover
    }
    roles {
      role
      title
      username
    }
    subscribers
    trendingFeed {
      items {
        ... on HivePost {
          spkvideo
          stats {
            num_comments
            num_votes
            total_hive_reward
          }
          lang
          title
          tags
          permlink
          created_at
          body
        }
      }
    }
  }
}

---

---

▶️ 3Speak