enskit

Query ENS Omnigraph data in React apps with typed, provider-based workflows.

41|19|Updated Dec 23, 2024
One-click install
npx skills add https://github.com/namehash/ensnode --skill enskit
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: enskit
Source: https://github.com/namehash/ensnode/tree/main/packages/ensskills/skills/enskit
Command: npx skills add https://github.com/namehash/ensnode --skill enskit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build reliable React UIs that consume ENS Omnigraph data by providing a ready-to-use provider, typed queries, and a normalized cache so developers can focus on UI rather than data plumbing.

Core Features & Use Cases

  • OmnigraphProvider integration to connect to an ENSNode-backed Omnigraph API.
  • Typed queries via useOmnigraphQuery and gql.tada templates with readFragment helpers.
  • Built-in cache normalization, bigint support, and cursor-based pagination for Relay-style connections.
  • Helpers to render beautified ENS names and to coerce inputs into InterpretedName form for safe, URL-driven navigation.
  • Use cases include reading ENS domains/registrations, resolving owners and resolvers, and building dashboards that reflect the ENSv1/v2 state.

Quick Start

Install enskit and enssdk, wrap your React app with OmnigraphProvider, then query data using useOmnigraphQuery.

Frequently Asked Questions about enskit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I query ENS Omnigraph data in a React application?

You can query ENS Omnigraph data in a React application by using a provider-based workflow with typed hooks like useOmnigraphQuery, which connects your UI to an ENSNode-backed API and handles deterministic queries while normalizing the cache.

What is the best way to integrate typed GraphQL queries for ENS domains in TypeScript?

The best way to integrate typed GraphQL queries for ENS domains in TypeScript is by using gql.tada templates with readFragment helpers. This approach provides type-safe query structures and built-in cache normalization for reliable ENS data fetching.

How do I handle Relay-style cursor pagination for ENS data in React?

You handle Relay-style cursor pagination for ENS data in React by utilizing a provider toolkit that supports cursor-based pagination connections. This feature allows your application to manage large sets of ENS domains or registrations efficiently through normalized cache updates.

Can I use urql with a normalized cache for ENS protocol data?

Yes, you can use urql with a normalized cache for ENS protocol data by integrating an OmnigraphProvider. This setup enables cache normalization and bigint support, ensuring deterministic queries for ENS v1 and v2 aware UIs without manual state management.

How do I safely render and navigate ENS names in a URL-driven UI?

You safely render and navigate ENS names in a URL-driven UI by using helper utilities that coerce inputs into InterpretedName form. These helpers also render beautified ENS names, ensuring safe navigation when reading ENS domains and resolving owners.