mirror of
https://github.com/supabase/supabase.git
synced 2026-05-10 10:50:18 -04:00
7e9f243f51
## 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 -->
45 lines
1.3 KiB
TypeScript
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',
|
|
})
|
|
}
|