@lsp-indexer/next

npm install @lsp-indexer/next @tanstack/react-query

# .env.local
INDEXER_URL=http://localhost:8080/v1/graphql
# Upstream Hasura WS for the proxy (falls back to INDEXER_URL with ws://)
# INDEXER_WS_URL=ws://localhost:8080/v1/graphql
# Required for WS proxy CORS validation (dev and production)
INDEXER_ALLOWED_ORIGINS=http://localhost:3000

# Browser connects to the WS proxy at this URL (not directly to Hasura)
NEXT_PUBLIC_INDEXER_WS_URL=ws://localhost:4000

# .env.local
NEXT_PUBLIC_INDEXER_WS_URL=wss://your-ws-proxy.example.com/v1/graphql

// app/providers.tsx
'use client';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { IndexerSubscriptionProvider } from '@lsp-indexer/react';
import { useState } from 'react';

export function Providers({ children }: { children: React.ReactNode }) {
  const [queryClient] = useState(
    () =>
      new QueryClient({
        defaultOptions: { queries: { staleTime: 60_000 } },
      }),
  );

  return (
    <QueryClientProvider client={queryClient}>
      <IndexerSubscriptionProvider>{children}</IndexerSubscriptionProvider>
    </QueryClientProvider>
  );
}

// Before (client-side)
import { useProfile } from '@lsp-indexer/react';

// After (server-side)
import { useProfile } from '@lsp-indexer/next';

import { useProfile, useDigitalAssets, useInfiniteNfts } from '@lsp-indexer/next';

function MyComponent() {
  const { profile } = useProfile({ address: '0x...' });
  const { digitalAssets } = useDigitalAssets({ filter: { tokenType: 'NFT' }, limit: 10 });
  const { nfts, fetchNextPage } = useInfiniteNfts({ pageSize: 20 });
  // ...
}

// In a Server Component
import { getProfile, getDigitalAssets } from '@lsp-indexer/next/actions';

export default async function Page() {
  const profile = await getProfile({ address: '0x...' });
  const { digitalAssets } = await getDigitalAssets({
    filter: { tokenType: 'TOKEN' },
    limit: 5,
  });

  return (
    <div>
      <h1>{profile?.name}</h1>
      <ul>
        {digitalAssets.map((a) => (
          <li key={a.address}>{a.name}</li>
        ))}
      </ul>
    </div>
  );
}

import { useIsFollowingBatch } from '@lsp-indexer/next';

const pairs = [
  { followerAddress: '0xFollower1', followedAddress: '0xFollowed1' },
  { followerAddress: '0xFollower2', followedAddress: '0xFollowed2' },
];

const { results, isLoading, error } = useIsFollowingBatch({ pairs });
// Keys are lowercased — any address casing is accepted as input:
// results.get('0xfollower1:0xfollowed1') → true | false

import { useEncryptedAssetsBatch } from '@lsp-indexer/next';

const tuples = [
  { address: '0xAssetAddress1', contentId: 'content-1', revision: 1 },
  { address: '0xAssetAddress2', contentId: 'content-2', revision: 0 },
];

const { encryptedAssets, isLoading, error } = useEncryptedAssetsBatch({
  tuples,
  include: { encryption: true },
});
// encryptedAssets → EncryptedAsset[] (one per matched tuple)

import { useMutualFollows } from '@lsp-indexer/next';
import type { ProfileInclude } from '@lsp-indexer/types';

const include: ProfileInclude = { ownedAssets: true };

function MutualFollows({ addressA, addressB }: { addressA: string; addressB: string }) {
  const { profiles, totalCount, isLoading } = useMutualFollows({
    addressA,
    addressB,
    sort: { field: 'name', direction: 'asc' },
    limit: 10,
    include,
  });

  return (
    <div>
      <p>{totalCount} mutual follows</p>
      {profiles?.map((p) => <div key={p.address}>{p.name}</div>)}
    </div>
  );
}

import { getMutualFollows, getFollowedByMyFollows } from '@lsp-indexer/next/actions';

export default async function Page() {
  const { profiles } = await getMutualFollows({ addressA: '0x...', addressB: '0x...', limit: 10 });
  const { profiles: suggested } = await getFollowedByMyFollows({
    myAddress: '0x...',
    targetAddress: '0x...',
    limit: 5,
  });

  return (
    <ul>
      {profiles.map((p) => (
        <li key={p.address}>{p.name}</li>
      ))}
    </ul>
  );
}

import { useCollectionAttributes } from '@lsp-indexer/next';

function TraitFilter({ collectionAddress }: { collectionAddress: string }) {
  const { attributes, totalCount, isLoading, error } = useCollectionAttributes({
    collectionAddress,
  });

  if (isLoading) return <p>Loading traits…</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <p>{totalCount} NFTs in collection</p>
      <ul>
        {attributes?.map((attr) => (
          <li key={`${attr.key}:${attr.value}`}>
            {attr.key}: {attr.value}
          </li>
        ))}
      </ul>
    </div>
  );
}

import { getCollectionAttributes } from '@lsp-indexer/next/actions';

export default async function CollectionPage({ address }: { address: string }) {
  const { attributes, totalCount } = await getCollectionAttributes(address);

  return (
    <div>
      <p>{totalCount} NFTs</p>
      <ul>
        {attributes.map((attr) => (
          <li key={`${attr.key}:${attr.value}`}>
            {attr.key}: {attr.value}
          </li>
        ))}
      </ul>
    </div>
  );
}

import { useNfts } from '@lsp-indexer/next';
import type { NftInclude } from '@lsp-indexer/types';

const include: NftInclude = {
  score: true,
  rank: true,
  chillClaimed: true,
  orbsClaimed: true,
  level: true,
  cooldownExpiry: true,
  faction: true,
};

const { nfts } = useNfts({ filter: { collectionAddress: '0x...' }, include });

import type { NftFilter } from '@lsp-indexer/types';

const filter: NftFilter = {
  collectionAddress: '0x...',
  chillClaimed: false,
  orbsClaimed: false,
  maxLevel: 5,
  cooldownExpiryBefore: Math.floor(Date.now() / 1000),
};

import type { NftSort } from '@lsp-indexer/types';

const sort: NftSort = { field: 'score', direction: 'desc', nulls: 'last' };

Browser → @lsp-indexer/react → WS Proxy (port 4000) → Hasura WebSocket

// ws-proxy.ts
import { createProxyServer } from '@lsp-indexer/next/server';

const { server } = createProxyServer({
  allowedOrigins: process.env.INDEXER_ALLOWED_ORIGINS?.split(','),
  maxConnections: 100,
  maxPayload: 64 * 1024,
});

server.listen(4000, () => {
  console.log('WS proxy listening on port 4000');
});

# Start Next.js
next start

# Start WS proxy (separate process)
node ws-proxy.js

services:
  app:
    build: .
    ports: ['3000:3000']
    environment:
      INDEXER_URL: http://hasura:8080/v1/graphql
      # Browser connects to the WS proxy — use the publicly accessible URL
      NEXT_PUBLIC_INDEXER_WS_URL: ws://localhost:4000
  ws-proxy:
    build: .
    command: node ws-proxy.js
    ports: ['4000:4000']
    environment:
      INDEXER_URL: http://hasura:8080/v1/graphql
      INDEXER_ALLOWED_ORIGINS: http://localhost:3000