Files
supabase/apps/studio/data/projects/project-detail-query.ts
Charis 50e1eb7436 chore(eslint): bump eslint-config-next to v16 for useEffectEvent (#48458)
## 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?

Chore / build (ESLint config upgrade + lint cleanup).

## What is the current behavior?

`eslint-plugin-react-hooks` v5 (pulled in transitively by
`eslint-config-next` v15) doesn't recognize stable `useEffectEvent`, so
every effect that calls an effect-event handler needs an `eslint-disable
react-hooks/exhaustive-deps` to silence a false positive. There are 30
such dead disables across Studio.

## What is the new behavior?

Bumps `eslint-config-next` to v16, which pulls in
`eslint-plugin-react-hooks` v7 whose `exhaustive-deps` understands
`useEffectEvent`, and removes the 30 now-dead disable directives (and
their orphaned explanatory comments).

Supporting changes:

- **Flat-config migration**: v16 is a native flat-config array (v15 was
eslintrc), so `eslint-config-supabase` now spreads it directly instead
of bridging through `FlatCompat`.
- **React Compiler rules off**: v16 enables react-hooks v7's
`recommended`, which layers the React Compiler lint rules on top of the
two classic rules. These are switched off (derived dynamically from what
next enables) to keep this change scoped to the `exhaustive-deps`
improvement.
- **Plugin-registration fallout** (v16 scopes plugin registration to a
file glob rather than registering globally like FlatCompat did): stop
re-registering `@typescript-eslint` (shared) and `jsx-a11y` (studio);
scope our react / react-hooks / jsx-a11y rule overrides (studio, www) to
v16's plugin glob so they don't error on files outside it (e.g. `.cjs`).
- **Lint surface preserved**: v16's glob newly includes `.mts`/`.cts`
(v15 didn't lint them), which surfaced pre-existing errors in tooling
scripts. The shared config keeps the prior surface by leaving
`.mts`/`.cts` unlinted; linting them is left as a separate change.
- **Ratchet**: rebaselines `@tanstack/query/exhaustive-deps` 9 → 89. v15
forced next's `@babel/eslint-parser` onto `.ts` files, hiding these
deps; v16 parses `.ts` with `@typescript-eslint/parser` and correctly
surfaces the intentional `connectionString`-excluded-from-`queryKey`
pattern. Worth a follow-up to review whether any are real
cache-correctness bugs.
- Drops three now-dead devDeps from `eslint-config-supabase`:
`@eslint/eslintrc`, `@eslint/js`, `@typescript-eslint/eslint-plugin`.

Verified locally: `turbo run lint` → 7/7 packages pass with 0 errors;
Studio `lint:ratchet` passes; Prettier clean on changed files; typecheck
unaffected.

## Additional context

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

## Summary by CodeRabbit

* **Chores**
* Refined linting configuration and removed outdated lint suppressions
across Studio.
* Updated Next.js linting support and refreshed related development
configuration.
  * Expanded lint baseline coverage for query-related code.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-31 09:01:05 -04:00

229 lines
7.0 KiB
TypeScript

import { QueryClient, useQuery, useQueryClient } from '@tanstack/react-query'
import { useCallback } from 'react'
import { replicaKeys } from '../read-replicas/keys'
import { ReadReplicasData } from '../read-replicas/replicas-query'
import { projectKeys } from './keys'
import { OrgProjectsResponse } from './org-projects-infinite-query'
import { getProjectStatusOverride } from './project-status-override'
import type { components } from '@/data/api'
import { get, handleError, isValidConnString, post } from '@/data/fetchers'
import type { ResponseError, UseCustomQueryOptions } from '@/types'
type ProjectDetailVariables = { ref?: string; skipWake?: boolean }
export type ProjectDetail = components['schemas']['ProjectDetailResponse']
export interface Project extends Omit<ProjectDetail, 'status'> {
/**
* postgrestStatus is available on client side only.
* We use this status to check if a project instance is HEALTHY or not
* If not we will show ConnectingState and run a polling until it's back online
*/
postgrestStatus?: 'ONLINE' | 'OFFLINE'
status: ProjectDetail['status']
}
export async function getProjectDetail(
{ ref, skipWake = false }: ProjectDetailVariables,
signal?: AbortSignal,
headers?: Record<string, string>,
queryClient?: QueryClient
) {
if (!ref) throw new Error('Project ref is required')
const { data, error } = await get('/platform/projects/{ref}', {
params: { path: { ref } },
signal,
headers,
})
let connectionString = data?.connectionString
/**
* A project is marked as active but potentially hibernated and needs to be woken up (typically few seconds only).
* To prevent odd side effects like pg-meta queries failing or the likes, we wake up the project proactively and wait for it
* to be back online before returning the project details.
*/
if (data?.is_hibernating && !skipWake) {
// In case project was scaled down, explicitly wake it up before continuing to return the project details
const { error: errorWaking, data: wakeResponse } = await post('/platform/projects/{ref}/wake', {
params: { path: { ref } },
signal,
headers,
})
// We will still let the user load the page in case of a wake error, but log it for debugging purposes
if (errorWaking) {
console.error('Error waking up the project', { ref, errorWaking })
}
// As the instance IP has changed, we need to use the latest encrypted connection string
if (wakeResponse) {
connectionString = wakeResponse.connection_string
// If replicas were previously fetched, they will hold the old connection string that we need to replace
queryClient?.setQueryData<ReadReplicasData>(replicaKeys.list(ref), (old) => {
if (!old) return old
return old.map((db) => {
if (db.identifier === ref) {
return {
...db,
connectionString: wakeResponse.connection_string,
connection_string_read_only: wakeResponse.connection_string_read_only,
}
}
return db
})
})
}
}
if (error) handleError(error)
const project = { ...data, connectionString: connectionString } as Project
const statusOverride = getProjectStatusOverride(ref)
if (statusOverride) project.status = statusOverride
return project
}
export type ProjectDetailData = Awaited<ReturnType<typeof getProjectDetail>>
export type ProjectDetailError = ResponseError
export const useProjectDetailQuery = <TData = ProjectDetailData>(
{ ref }: ProjectDetailVariables,
{
enabled = true,
...options
}: UseCustomQueryOptions<ProjectDetailData, ProjectDetailError, TData> = {}
) => {
const queryClient = useQueryClient()
return useQuery<ProjectDetailData, ProjectDetailError, TData>({
queryKey: projectKeys.detail(ref),
queryFn: ({ signal }) => getProjectDetail({ ref }, signal, undefined, queryClient),
enabled: enabled && typeof ref !== 'undefined',
staleTime: 30 * 1000,
refetchInterval: (query) => {
const data = query.state.data
const status = data && data.status
const connectionString = data && data.connectionString
if (status === 'COMING_UP' || status === 'UNKNOWN' || !isValidConnString(connectionString)) {
return 5 * 1000 // 5 seconds
}
return false
},
...options,
})
}
export function prefetchProjectDetail(client: QueryClient, { ref }: ProjectDetailVariables) {
return client.fetchQuery({
queryKey: projectKeys.detail(ref),
queryFn: ({ client, signal }) =>
getProjectDetail({ ref, skipWake: true }, signal, undefined, client),
})
}
export const useInvalidateProjectDetailsQuery = () => {
const queryClient = useQueryClient()
const invalidateProjectDetailsQuery = useCallback(
(ref: string) => {
return queryClient.invalidateQueries({ queryKey: projectKeys.detail(ref) })
},
[queryClient]
)
return { invalidateProjectDetailsQuery }
}
export const useSetProjectPostgrestStatus = () => {
const queryClient = useQueryClient()
const setProjectPostgrestStatus = (ref: Project['ref'], status: Project['postgrestStatus']) => {
return queryClient.setQueriesData<Project>(
{ queryKey: projectKeys.detail(ref) },
(old) => {
if (!old) return old
return { ...old, postgrestStatus: status }
},
{ updatedAt: Date.now() }
)
}
return { setProjectPostgrestStatus }
}
export const useSetProjectStatus = () => {
const queryClient = useQueryClient()
const setProjectStatus = ({
ref,
slug,
status,
}: {
ref: Project['ref']
slug?: string
status: Project['status']
}) => {
// Org projects infinite query
if (slug) {
queryClient.setQueriesData<{ pages: OrgProjectsResponse[] } | undefined>(
{ queryKey: projectKeys.infiniteListByOrg(slug) },
(old) => {
if (!old) return old
return {
...old,
pages: old.pages.map((page) => {
return {
...page,
projects: page.projects.map((project) =>
project.ref === ref ? { ...project, status } : project
),
}
}),
}
},
{ updatedAt: Date.now() }
)
}
// Projects infinite query
queryClient.setQueriesData<{ pages: OrgProjectsResponse[] } | undefined>(
{ queryKey: projectKeys.infiniteList() },
(old) => {
if (!old) return old
return {
...old,
pages: old.pages.map((page) => {
return {
...page,
projects: page.projects.map((project) =>
project.ref === ref ? { ...project, status } : project
),
}
}),
}
},
{ updatedAt: Date.now() }
)
// Project details query
queryClient.setQueriesData<Project>(
{ queryKey: projectKeys.detail(ref) },
(old) => {
if (!old) return old
return { ...old, status }
},
{ updatedAt: Date.now() }
)
}
return { setProjectStatus }
}