mcpField
U
using-backstage-catalog

using-backstage-catalog

github.com/vinzscamDevelopment448 installsUpdated 10w ago
Repository

About using-backstage-catalog

using-backstage-catalog is a skill for implementing Backstage catalog operations in frontend and backend plugins. It provides patterns for fetching and querying entities and managing catalog locations, with guidance on credentials, hooks, and common pitfalls.

Key features

  1. 01Fetch entities by reference
  2. 02Query entities with filters
  3. 03Register, refresh, and unregister locations
  4. 04Frontend and backend patterns
  5. 05Guidance on credentials and async fetching

Use cases

  1. 01Look up a catalog entity in a plugin
  2. 02List entities matching catalog filters
  3. 03Manage catalog locations programmatically
  4. 04Add catalog operations to a scaffolded plugin

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/vinzscam/backstage-skills --skill using-backstage-catalog

After installing, type/using-backstage-catalogin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
fetch-by-ref.md
query-entities.md
register-entity.md

Details

From the project README

Backstage Catalog Patterns

When to use this skill

  • Plugin needs to fetch a specific entity by its ref (e.g. a Group, Component, or User)
  • Plugin needs to query entities with filters (e.g. all Components owned by a team, all Groups of a given type)
  • Plugin needs to register a new catalog location, refresh an entity, or unregister one programmatically
  • This applies to both frontend and backend code; the entry points differ but the operations are the same

Choose the right pattern

Frontend (in a frontend plugin component)
SituationPatternReference
Fetch one entity by refuseApi(catalogApiRef).getEntityByRef(ref)references/fetch-by-ref.md (Frontend section)
Query entities with filtersuseApi(catalogApiRef).getEntities({ filter })references/query-entities.md (Frontend section)
Register / refresh / unregister a locationuseApi(catalogApiRef).addLocation / refreshEntity / removeLocationByIdreferences/register-entity.md (Frontend section)
Backend (in a backend plugin or module)
SituationPatternReference
Fetch one entity by refcatalog.getEntityByRef(ref, { credentials }) via catalogServiceRefreferences/fetch-by-ref.md (Backend section)
Query entities with filterscatalog.getEntities({ filter }, { credentials }) via catalogServiceRefreferences/query-entities.md (Backend section)
Register / refresh / unregister a locationcatalog.addLocation / refreshEntity / removeLocationById via catalogServiceRefreferences/register-entity.md (Backend section)

Two invocation modes

  • Standalone (mid-development): user is editing an existing plugin. Pick the right reference based on the situation table above and apply.
  • Post-scaffold (called by creating-backstage-plugin): apply the pattern to a freshly scaffolded plugin. Each reference's "Post-scaffold usage" section names the file and insertion point — frontend-template scaffolds use the Frontend pattern, backend-template scaffolds use the Backend pattern.

Common gotchas

  • In frontend code, catalogApiRef comes from @backstage/plugin-catalog-react, NOT @backstage/catalog-client. The latter is for backend.
  • useApi itself comes from @backstage/frontend-plugin-api in NFS plugins; catalogApiRef is plugin-specific and stays in @backstage/plugin-catalog-react.
  • In backend code, depend on catalogServiceRef from @backstage/plugin-catalog-node — it wraps the catalog client with auth/discovery wiring already done and takes BackstageCredentials directly. Methods take { credentials } (a BackstageCredentials object), not { token } (a string). For incoming HTTP requests, get credentials via httpAuth.credentials(req). For service-to-service work (scheduled tasks, init-time fetches), use auth.getOwnServiceCredentials(). Don't manually new CatalogClient(...) — that's the underlying API but the service ref is the canonical surface.
  • getEntityByRef returns Entity | undefined. Always handle the undefined case (entity may have been deleted or the ref may be malformed).
  • getEntities returns { items: Entity[] } — destructure or access .items.
  • Filters on getEntities are AND-combined within an object, OR-combined across an array of objects.
  • Frontend: don't fetch in a render — wrap in useAsync (auto-fetch on mount/dep change) or useAsyncFn (button-triggered fetch) from react-use. Don't manually wire useState for { loading, error, data } — the hook handles race conditions and unmount cleanup correctly.
  • Backend: don't fetch on every HTTP request without caching — for hot paths, use coreServices.cache to memoize results that don't need to be live.

UI conventions

Use @backstage/ui for rendering when possible (Skeleton, Alert, Text, Flex, Button, …). See using-backstage-ui skill for the full component catalog and styling guidance.

Comments

Markdown supported