chore: Migrate to use custom type for ReactQuery queries and mutations (supabase#40073)

* Add custom types for queries, mutations and infinite queries.

* Migrate all queries to use the new type.

* Migrate all infinite queries to useCustomInfiniteQueryOptions.

* Migrate all mutations to use useCustomMutationOptions.

* Add type to all imports in `types` folder.

Author: ivasilov

apps/studio/components/interfaces/Organization/CloudMarketplace/cloud-marketplace-query.ts

@@ -1,6 +1,6 @@
+import { useQuery } from '@tanstack/react-query'
+import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { get, handleError } from '../../../../data/fetchers'
-import type { ResponseError } from '../../../../types'
-import { useQuery, UseQueryOptions } from '@tanstack/react-query'
 import { useProfile } from '../../../../lib/profile'
 import { cloudMarketplaceKeys } from './keys'
 
@@ -35,7 +35,7 @@ export const useCloudMarketplaceOnboardingInfoQuery = <TData = CloudMarketplaceO
   {
     enabled = true,
     ...options
-  }: UseQueryOptions<
+  }: UseCustomQueryOptions<
     CloudMarketplaceOnboardingInfo,
     CloudMarketplaceOnboardingInfoError,
     TData

apps/studio/components/interfaces/Storage/StorageExplorer/useFetchFileUrlQuery.tsx

@@ -1,9 +1,9 @@
-import { UseQueryOptions, useQuery } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { getPublicUrlForBucketObject } from 'data/storage/bucket-object-get-public-url-mutation'
 import { signBucketObject } from 'data/storage/bucket-object-sign-mutation'
 import { Bucket } from 'data/storage/buckets-query'
 import { useStorageExplorerStateSnapshot } from 'state/storage-explorer'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { StorageItem } from '../Storage.types'
 
 const DEFAULT_EXPIRY = 7 * 24 * 60 * 60 // in seconds, default to 1 week
@@ -41,7 +41,7 @@ type UseFileUrlQueryVariables = {
 
 export const useFetchFileUrlQuery = (
   { file, projectRef, bucket }: UseFileUrlQueryVariables,
-  { ...options }: UseQueryOptions<string, ResponseError> = {}
+  { ...options }: UseCustomQueryOptions<string, ResponseError> = {}
 ) => {
   const { getPathAlongOpenedFolders } = useStorageExplorerStateSnapshot()
   const pathToFile = getPathAlongOpenedFolders(false)

apps/studio/data/__templates/resource-query.ts

@@ -1,8 +1,8 @@
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback } from 'react'
 
 import { get, handleError } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { resourceKeys } from './keys'
 
 export type ResourceVariables = {
@@ -31,7 +31,7 @@ export type ResourceError = ResponseError
 
 export const useResourceQuery = <TData = ResourceData>(
   { projectRef, id }: ResourceVariables,
-  { enabled = true, ...options }: UseQueryOptions<ResourceData, ResourceError, TData> = {}
+  { enabled = true, ...options }: UseCustomQueryOptions<ResourceData, ResourceError, TData> = {}
 ) =>
   useQuery<ResourceData, ResourceError, TData>({
     queryKey: resourceKeys.resource(projectRef, id),

apps/studio/data/__templates/resource-update-mutation.ts

@@ -1,8 +1,8 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
 import { handleError, patch } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { resourceKeys } from './keys'
 
 export type ResourceUpdateVariables = {
@@ -29,7 +29,7 @@ export const useResourceUpdateMutation = ({
   onError,
   ...options
 }: Omit<
-  UseMutationOptions<ResourceUpdateData, ResponseError, ResourceUpdateVariables>,
+  UseCustomMutationOptions<ResourceUpdateData, ResponseError, ResourceUpdateVariables>,
   'mutationFn'
 > = {}) => {
   const queryClient = useQueryClient()

apps/studio/data/__templates/resources-query.ts

@@ -1,8 +1,8 @@
-import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback } from 'react'
 
 import { get, handleError } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { resourceKeys } from './keys'
 
 export type ResourcesVariables = {
@@ -26,7 +26,7 @@ export type ResourcesError = ResponseError
 
 export const useResourcesQuery = <TData = ResourcesData>(
   { projectRef }: ResourcesVariables,
-  { enabled = true, ...options }: UseQueryOptions<ResourcesData, ResourcesError, TData> = {}
+  { enabled = true, ...options }: UseCustomQueryOptions<ResourcesData, ResourcesError, TData> = {}
 ) =>
   useQuery<ResourcesData, ResourcesError, TData>({
     queryKey: resourceKeys.list(projectRef),

apps/studio/data/access-tokens/access-tokens-create-mutation.ts

@@ -1,9 +1,9 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
 import { components } from 'api-types'
 import { handleError, post } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { accessTokenKeys } from './keys'
 
 export type AccessTokenCreateVariables = components['schemas']['CreateAccessTokenBody']
@@ -27,7 +27,7 @@ export const useAccessTokenCreateMutation = ({
   onError,
   ...options
 }: Omit<
-  UseMutationOptions<AccessTokenCreateData, ResponseError, AccessTokenCreateVariables>,
+  UseCustomMutationOptions<AccessTokenCreateData, ResponseError, AccessTokenCreateVariables>,
   'mutationFn'
 > = {}) => {
   const queryClient = useQueryClient()

apps/studio/data/access-tokens/access-tokens-delete-mutation.ts

@@ -1,8 +1,8 @@
-import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomMutationOptions } from 'types'
 import { accessTokenKeys } from './keys'
 
 export type AccessTokenDeleteVariables = {
@@ -25,7 +25,7 @@ export const useAccessTokenDeleteMutation = ({
   onError,
   ...options
 }: Omit<
-  UseMutationOptions<AccessTokenDeleteData, ResponseError, AccessTokenDeleteVariables>,
+  UseCustomMutationOptions<AccessTokenDeleteData, ResponseError, AccessTokenDeleteVariables>,
   'mutationFn'
 > = {}) => {
   const queryClient = useQueryClient()

apps/studio/data/access-tokens/access-tokens-query.ts

@@ -1,7 +1,7 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 
 import { get, handleError } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { accessTokenKeys } from './keys'
 
 export async function getAccessTokens(signal?: AbortSignal) {
@@ -20,7 +20,7 @@ export type AccessToken = AccessTokensData[number]
 export const useAccessTokensQuery = <TData = AccessTokensData>({
   enabled = true,
   ...options
-}: UseQueryOptions<AccessTokensData, AccessTokensError, TData> = {}) =>
+}: UseCustomQueryOptions<AccessTokensData, AccessTokensError, TData> = {}) =>
   useQuery<AccessTokensData, AccessTokensError, TData>({
     queryKey: accessTokenKeys.list(),
     queryFn: ({ signal }) => getAccessTokens(signal),

apps/studio/data/actions/action-detail-query.ts

@@ -1,8 +1,8 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 
 import type { operations } from 'data/api'
 import { get, handleError } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { actionKeys } from './keys'
 
 export type ActionRunVariables = operations['v1-get-action-run']['parameters']['path']
@@ -21,7 +21,7 @@ export type ActionRunError = ResponseError
 
 export const useActionRunQuery = <TData = ActionRunData>(
   { ref, run_id }: ActionRunVariables,
-  { enabled = true, ...options }: UseQueryOptions<ActionRunData, ActionRunError, TData> = {}
+  { enabled = true, ...options }: UseCustomQueryOptions<ActionRunData, ActionRunError, TData> = {}
 ) =>
   useQuery<ActionRunData, ActionRunError, TData>({
     queryKey: actionKeys.detail(ref, run_id),

apps/studio/data/actions/action-logs-query.ts

@@ -1,8 +1,8 @@
-import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 
 import { operations } from 'data/api'
 import { get, handleError } from 'data/fetchers'
-import type { ResponseError } from 'types'
+import type { ResponseError, UseCustomQueryOptions } from 'types'
 import { actionKeys } from './keys'
 
 export type ActionLogsVariables = operations['v1-get-action-run-logs']['parameters']['path']
@@ -27,7 +27,10 @@ export type WorkflowRunLogsError = ResponseError
 
 export const useActionRunLogsQuery = <TData = ActionLogsData>(
   { ref, run_id }: ActionLogsVariables,
-  { enabled = true, ...options }: UseQueryOptions<ActionLogsData, WorkflowRunLogsError, TData> = {}
+  {
+    enabled = true,
+    ...options
+  }: UseCustomQueryOptions<ActionLogsData, WorkflowRunLogsError, TData> = {}
 ) =>
   useQuery<ActionLogsData, WorkflowRunLogsError, TData>({
     queryKey: actionKeys.detail(ref, run_id),