GraphQL Dashboards

GraphQL Dashboards

NOTE: The Primodium GraphQL endpoint is currently not available for the latest deployment. Data from version 0.10.0 is provided by default.

Primodium supports a wide range of data that can be queried and displayed in dashboards. This guide will show you how to query decoded and encoded data from the Primodium blockchain using our GraphQL endpoint.

GraphQL Endpoint

This section assumes knowledge of GraphQL (opens in a new tab) and its related technologies.

Primodium provides a GraphQL endpoint for querying decoded on-chain data, which can be used to create dashboards. The endpoint is a Hasura (opens in a new tab) instance that provides a GraphQL API over our internal Primodium indexer database.

https://graphql.primodium.ai/v1/graphql

We recommend using a GraphQL playground to introspect our schema, such as the following:

Refer to the Hasura docs (opens in a new tab) for more information on advanced querying.

Quickstart

NOTE: Currently, tables and its fields are exposed; however, full data type support and relations are missing due to the nature of how are decoded data is stored.

For this guide, we will use Apollo Studio to read Primodium data from our GraphQL endpoint.

  1. Visit Apollo Studio (opens in a new tab).
  2. Set the sandbox url to our endpoint on the top-left field: https://graphql.primodium.ai/v1/graphql

Apollo Studio

  1. Query away with the following examples:

Query Decoded Data

This example queries the top 10 scores of the current round:

query Top10Score {
  viewScore(limit: 10, orderBy: { value: DESC }) {
    entity
    value
  }
}

Query Encoded Data

This example queries MUD records between a block range:

query MudRecords(
  $where: MudRecordsBoolExp = { blockNumber: { _lte: 4824475, _gte: 4823475 } }
  $limit: Int = 1000
) {
  mudRecords(where: $where, limit: $limit) {
    address
    blockNumber
    dynamicData
    encodedLengths
    isDeleted
    key0
    key1
    keyBytes
    logIndex
    staticData
    tableId
  }
}

React GraphQL Client Template

The Primodium React Client Lite Template (opens in a new tab) provides a minimal setup to start working on a read-only client for Primodium via our GraphQL Endpoint. Visit the demo site here (opens in a new tab).

Template

Getting started

npm create primodium@latest --template react-client-lite
cd react-client-lite
npm install
npm run dev

The Primodium react-client-lite template is based on react+vite. It uses gql.tada (opens in a new tab) for query authoring and shadcn/ui for UI elements. Source for the template is available on Github here (opens in a new tab).

To get gql.tada magic introspection working, make sure that your editor is using the workspace typescript version or this will not work. For Visual Studio Code, you will be prompted to switch versions.

Client TemplatesWorld Extensions