add-ogc-hook

Fetch OGC API collection data via a reusable React hook.

2|Updated Feb 17, 2026
One-click install
npx skills add https://github.com/ogc-maps/storybook-components --skill add-ogc-hook
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: add-ogc-hook
Source: https://github.com/ogc-maps/storybook-components/tree/main/.claude/skills/add-ogc-hook
Command: npx skills add https://github.com/ogc-maps/storybook-components --skill add-ogc-hook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a stable, reusable React hook to fetch data from any OGC API endpoint, abstracting away endpoint details and enabling components to react to loading and errors without embedding fetch logic.

Core Features & Use Cases

  • Supports standard OGC API endpoints (collections, features, tiles, coverages, maps, and records) with a single hook interface
  • Ensures consistent result shape: data, loading, error, and optional pagination or metadata flags
  • Enables backend-agnostic data access across tipg, pygeoapi, or any compliant server, facilitating easy swapping of backends

Quick Start

Call the hook with a baseUrl and collection to fetch OGC API data and render the results.

Frequently Asked Questions about add-ogc-hook

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

FAQPage Schema
How do I fetch OGC API collections data in a React application?

Fetch OGC API collections data in React by using a reusable hook that abstracts endpoint details for features, tiles, coverages, maps, and records, returning a consistent loading, data, and error state.

Can I use a single React hook to access both tipg and pygeoapi endpoints?

Yes, you can access both tipg and pygeoapi endpoints with a single React hook, because it provides a backend-agnostic interface that standardizes data fetching across any OGC-API-compliant server.

What is the best way to standardize OGC API data fetching across multiple React components?

Standardize OGC API data fetching across React components by centralizing fetch logic in a utility module and using a reusable hook that enforces stable dependency keys, cancellation, and a consistent result shape.

Does this OGC API React hook handle request cancellation and authentication?

Yes, the OGC API React hook handles request cancellation and supports optional SourceAuth, conforming to standard hook conventions for stable dependency keys and secure data retrieval.

Why does my React component repeatedly fetch OGC API features when dependencies change?

React components repeatedly fetch OGC API features when dependencies change if the hook lacks stable dependency keys, which this OGC API hook enforces to prevent unnecessary refetching and ensure cancellation.

Do I need a specific backend to query OGC API coverages and tiles from React?

No specific backend is needed to query OGC API coverages and tiles from React, because the hook operates backend-agnostically across any OGC-API-compliant server like tipg or pygeoapi.