Real-time Block Updates

import { createClient } from 'graphql-ws';

const client = createClient({
  url: 'wss://api.chainvue.io/graphql',
  connectionParams: {
    authorization: 'Bearer YOUR_API_KEY',
  },
});

const subscription = client.subscribe(
  {
    query: `
      subscription {
        newBlock(chainId: "iJhCezBExJHvtyH3fGhNnt2NhU4Ztkf2yq") {
          height
          hash
          time
          txCount
        }
      }
    `,
  },
  {
    next: (data) => {
      const block = data.data.newBlock;
      console.log(`New block #${block.height}`);
      console.log(`  Hash: ${block.hash}`);
      console.log(`  Transactions: ${block.txCount}`);
    },
    error: (err) => {
      console.error('Subscription error:', err);
    },
    complete: () => {
      console.log('Subscription complete');
    },
  }
);

// To unsubscribe later:
// subscription.unsubscribe();

import { useEffect, useState } from 'react';
import { createClient } from 'graphql-ws';

const client = createClient({
  url: 'wss://api.chainvue.io/graphql',
  connectionParams: {
    authorization: `Bearer ${process.env.CHAINVUE_API_KEY}`,
  },
});

function useNewBlocks(chainId: string) {
  const [latestBlock, setLatestBlock] = useState(null);

  useEffect(() => {
    const subscription = client.subscribe(
      {
        query: `
          subscription NewBlock($chainId: String!) {
            newBlock(chainId: $chainId) {
              height
              hash
              time
              txCount
            }
          }
        `,
        variables: { chainId },
      },
      {
        next: (data) => setLatestBlock(data.data.newBlock),
        error: console.error,
        complete: () => console.log('done'),
      }
    );

    return () => subscription.unsubscribe();
  }, [chainId]);

  return latestBlock;
}

// Usage:
function BlockMonitor() {
  const block = useNewBlocks('iJhCezBExJHvtyH3fGhNnt2NhU4Ztkf2yq');

  if (!block) return <div>Waiting for blocks...</div>;

  return (
    <div>
      <h2>Latest Block: #{block.height}</h2>
      <p>Hash: {block.hash}</p>
      <p>Transactions: {block.txCount}</p>
    </div>
  );
}

const WebSocket = require('ws');

const ws = new WebSocket('wss://api.chainvue.io/graphql', 'graphql-ws');

ws.on('open', () => {
  // Initialize connection
  ws.send(JSON.stringify({
    type: 'connection_init',
    payload: {
      authorization: 'Bearer YOUR_API_KEY',
    },
  }));
});

ws.on('message', (data) => {
  const message = JSON.parse(data);

  if (message.type === 'connection_ack') {
    // Subscribe to new blocks
    ws.send(JSON.stringify({
      id: '1',
      type: 'subscribe',
      payload: {
        query: `
          subscription {
            newBlock(chainId: "iJhCezBExJHvtyH3fGhNnt2NhU4Ztkf2yq") {
              height
              hash
              txCount
            }
          }
        `,
      },
    }));
  }

  if (message.type === 'next') {
    const block = message.payload.data.newBlock;
    console.log(`Block #${block.height}: ${block.txCount} txs`);
  }
});

ws.on('error', console.error);

Block #689001: 3 txs
Block #689002: 1 txs
Block #689003: 7 txs
Block #689004: 2 txs
...