Agent skill · supabase
studio-queries
React Query conventions for data fetching in Supabase Studio. Use when
What it needs
About 3k tokens when loaded.
What this skill does
Studio Queries & Mutations (React Query) Follow the patterns in apps/studio/data/. Reference examples: Query options: apps/studio/data/table-editor/table-editor-query.ts Mutation hook: apps/studio/data/edge-functions/edge-functions-update-mutation.ts Keys: apps/studio/data/edge-functions/keys.ts Query Keys Define a keys.ts per domain. Export Keys helpers using array keys with as const. Never inline query keys in components. Query Options (preferred pattern) Use queryOptions from @tanstack/react-query. This gives type safety and works with both useQuery() and queryClient.fetchQuery(). Rules: Export XVariables, XData, and XError types (prefixed with the domain name) Implement a private getX(variables, signal?) function: Throws if required variables are missing Passes signal for cancellation Calls handleError(error) on failure (which throws); returns data on success Not exported — use queryClient.fetchQuery(xQueryOptions(...)) for imperative fetching Export xQueryOptions() using queryOptions Gate with enabled so the query doesn't run until required variables exist Platform-only queries: include ISPLATFORM from lib/constants in enabled Don't add extra params to xQueryOptions — callers override by destructuring: { ...xQueryOptions(vars), enabled: true } Using Query Options in Components Imperative Fetching (outside React or in callbacks) Mutation Hook Export a Variables type with projectRef, identifiers, and payload Implement a private updateX(vars) function with required variable validation and handleError Wrap in useXMutation(): Accepts UseMutationOptions (omit mutationFn) Invalidates list() + detail() keys in onSuccess with await Promise.all([...]) Defaults to toast.error(...) when onError isn't provided Component Usage Use React Query v5 flags: isPending for initial load, isFetching for background refetches Render states explicitly in order: pending → error → success
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills supabase/studio-queries--1cd41a