Files
supabase/apps/studio/data/content-api/docs-error-codes-query.ts
T
kemal.earthandClaude Sonnet 4.6 9b028f6fd5 feat(studio): map error codes to docs (#43140)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

This introduces a small snippet preview of the error code coming via our
content API for the docs. This appears in a couple of places right now.

- **Auth Overview** - This page isn't fully released yet, but it appears
on the error codes table (as depicted below).
- **Logs** - When you delve into the logs panel, if there's an error
code available, they're also wrapped in this popover.

We are also working on a shared-data package (#43458) to potentially
replace this endpoint internally. Also introduces a multifaceted button
to debug/fix with either Assistant or LLM of choice.

| Auth Overview | Logs Panel |
|--------|--------|
| <img width="407" height="287" alt="Screenshot 2026-03-09 at 14 14 09"
src="https://github.com/user-attachments/assets/7450dddb-6828-4cd3-802d-37d47ba1b440"
/> | <img width="394" height="216" alt="Screenshot 2026-03-09 at 14 13
56"
src="https://github.com/user-attachments/assets/80c2a46e-dbe4-4e88-a0a7-68b977a71d6b"
/> |

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-09 17:33:14 +00:00

48 lines
1.4 KiB
TypeScript

import { useQuery } from '@tanstack/react-query'
import { executeGraphQL } from 'data/graphql/execute'
import { graphql } from 'data/graphql/gql'
import { Service } from 'data/graphql/graphql'
import { contentApiKeys } from './keys'
import { UseCustomQueryOptions } from 'types'
const ErrorCodeQuery = graphql(`
query ErrorCodeQuery($code: String!, $service: Service) {
errors(code: $code, service: $service) {
nodes {
code
service
message
}
}
}
`)
interface Variables {
code: string
service?: Service
}
async function getErrorCodeDescriptions({ code, service }: Variables, signal?: AbortSignal) {
return await executeGraphQL(ErrorCodeQuery, { variables: { code, service }, signal })
}
type ErrorCodeDescriptionsData = Awaited<ReturnType<typeof getErrorCodeDescriptions>>
type ErrorCodeDescriptionsError = unknown
export const useErrorCodesQuery = <TData = ErrorCodeDescriptionsData>(
variables: Variables,
{
enabled = true,
...options
}: UseCustomQueryOptions<ErrorCodeDescriptionsData, ErrorCodeDescriptionsError, TData> = {}
) => {
return useQuery<ErrorCodeDescriptionsData, ErrorCodeDescriptionsError, TData>({
queryKey: contentApiKeys.errorCodes(variables),
queryFn: ({ signal }) => getErrorCodeDescriptions(variables, signal),
enabled,
retry: false,
staleTime: Infinity,
...options,
})
}