Files
supabase/apps/studio/data/third-party-auth/integrations-query.ts
Ivan Vasilov 7e9f243f51 chore(studio): update Cursor rule to use queryOptions (#42446)
## Summary

- Updates the Cursor rule at `.cursor/rules/studio/queries/RULE.md` to
recommend the `queryOptions` pattern from TanStack React Query instead
of custom `useXQuery` wrapper hooks
- Provides an example implementation by refactoring
`thirdPartyAuthIntegrationsQuery` from a
`useThirdPartyAuthIntegrationsQuery` hook to
`thirdPartyAuthIntegrationsQueryOptions`

## Why this pattern?

The `queryOptions` factory pattern from TanStack Query v5 offers several
benefits:

1. **Type safety** - Query keys and return types are properly inferred
2. **Reusability** - The same query config can be used with both
`useQuery()` in components and `queryClient.fetchQuery()` for imperative
fetching
3. **Consistency** - Aligns with TanStack Query's official
recommendations
4. **Simplicity** - Removes the need for custom generic wrapper hooks

## Test plan

- [ ] Verify the ThirdPartyAuthForm component works correctly with the
new pattern
- [ ] Check that the Cursor rule provides clear guidance for writing new
queries

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

## Release Notes

* **Documentation**
* Updated query pattern documentation with revised implementation
guidance.

* **Refactor**
* Updated third-party authentication integrations data fetching
mechanism.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-04 21:46:12 +00:00

45 lines
1.3 KiB
TypeScript

import { queryOptions } from '@tanstack/react-query'
import { components } from 'api-types'
import { keys } from './keys'
import { get, handleError } from '@/data/fetchers'
import type { ResponseError } from '@/types'
export type ThirdPartyAuthIntegrationsVariables = {
projectRef?: string
}
export type ThirdPartyAuthIntegrationsError = ResponseError
export type ThirdPartyAuthIntegration = components['schemas']['ThirdPartyAuth']
async function getThirdPartyAuthIntegrations(
{ projectRef }: ThirdPartyAuthIntegrationsVariables,
signal?: AbortSignal
) {
if (!projectRef) throw new Error('projectRef is required')
const { data, error } = await get('/v1/projects/{ref}/config/auth/third-party-auth', {
params: { path: { ref: projectRef } },
signal,
})
if (error) handleError(error)
return data
}
export type ThirdPartyAuthIntegrationsData = Awaited<
ReturnType<typeof getThirdPartyAuthIntegrations>
>
export const thirdPartyAuthIntegrationsQueryOptions = (
{ projectRef }: ThirdPartyAuthIntegrationsVariables,
{ enabled = true }: { enabled?: boolean } = { enabled: true }
) => {
return queryOptions({
queryKey: keys.integrations(projectRef),
queryFn: ({ signal }) => getThirdPartyAuthIntegrations({ projectRef }, signal),
enabled: enabled && typeof projectRef !== 'undefined',
})
}