chore: Migrate RQ functions to use object syntax style (supabase#39895)

* Migrate all uses of invalidateQueries to use object syntax.

* Migrate the remainder of useInfiniteQuery.

* Migrate all setQueriesData.

* Migrate all fetchQuery uses.

* Migrate some leftover functions from RQ.

* Fix issues found by Charis.

Author: ivasilov

apps/studio/components/grid/components/grid/Grid.utils.tsx

@@ -28,11 +28,11 @@ export function useOnRowsChange(rows: SupaRow[]) {
 
       const queryKey = tableRowKeys.tableRows(projectRef, { table: { id: table.id } })
 
-      await queryClient.cancelQueries(queryKey)
+      await queryClient.cancelQueries({ queryKey })
 
-      const previousRowsQueries = queryClient.getQueriesData<TableRowsData>(queryKey)
+      const previousRowsQueries = queryClient.getQueriesData<TableRowsData>({ queryKey })
 
-      queryClient.setQueriesData<TableRowsData>(queryKey, (old) => {
+      queryClient.setQueriesData<TableRowsData>({ queryKey }, (old) => {
         return {
           rows:
             old?.rows.map((row) => {
@@ -67,9 +67,9 @@ export function useOnRowsChange(rows: SupaRow[]) {
 
       previousRowsQueries.forEach(([queryKey, previousRows]) => {
         if (previousRows) {
-          queryClient.setQueriesData(queryKey, previousRows)
+          queryClient.setQueriesData({ queryKey }, previousRows)
         }
-        queryClient.invalidateQueries(queryKey)
+        queryClient.invalidateQueries({ queryKey })
       })
 
       toast.error(error?.message ?? error)

apps/studio/components/grid/components/header/RefreshButton.tsx

@@ -16,7 +16,7 @@ export const RefreshButton = ({ tableId, isRefetching }: RefreshButtonProps) =>
   const queryKey = tableRowKeys.tableRowsAndCount(ref, tableId)
 
   async function onClick() {
-    await queryClient.invalidateQueries(queryKey)
+    await queryClient.invalidateQueries({ queryKey })
   }
 
   return (

apps/studio/components/interfaces/Account/TOTPFactors/AddNewFactorModal.tsx

@@ -128,7 +128,9 @@ const SecondStep = ({
     },
     onSuccess: async () => {
       if (lastVisitedOrganization) {
-        await queryClient.invalidateQueries(organizationKeys.members(lastVisitedOrganization))
+        await queryClient.invalidateQueries({
+          queryKey: organizationKeys.members(lastVisitedOrganization),
+        })
       }
       toast.success(`Successfully added a second factor authentication`)
       onClose()

apps/studio/components/interfaces/Account/TOTPFactors/DeleteFactorModal.tsx

@@ -29,7 +29,9 @@ const DeleteFactorModal = ({
   const { mutate: unenroll, isLoading } = useMfaUnenrollMutation({
     onSuccess: async () => {
       if (lastVisitedOrganization) {
-        await queryClient.invalidateQueries(organizationKeys.members(lastVisitedOrganization))
+        await queryClient.invalidateQueries({
+          queryKey: organizationKeys.members(lastVisitedOrganization),
+        })
       }
       toast.success(`Successfully deleted factor`)
       onClose()

apps/studio/components/interfaces/Auth/Policies/PolicyEditorPanel/index.tsx

@@ -125,7 +125,7 @@ export const PolicyEditorPanel = memo(function ({
   const { mutate: executeMutation, isLoading: isExecuting } = useExecuteSqlMutation({
     onSuccess: async () => {
       // refresh all policies
-      await queryClient.invalidateQueries(databasePoliciesKeys.list(ref))
+      await queryClient.invalidateQueries({ queryKey: databasePoliciesKeys.list(ref) })
       toast.success('Successfully created new policy')
       onSelectCancel()
     },

apps/studio/components/interfaces/Auth/Users/UsersV2.tsx

@@ -296,7 +296,9 @@ export const UsersV2 = () => {
         userIds.map((id) => deleteUser({ projectRef, userId: id, skipInvalidation: true }))
       )
       // [Joshen] Skip invalidation within RQ to prevent multiple requests, then invalidate once at the end
-      await Promise.all([queryClient.invalidateQueries(authKeys.usersInfinite(projectRef))])
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: authKeys.usersInfinite(projectRef) }),
+      ])
       toast.success(
         `Successfully deleted the selected ${selectedUsers.size} user${selectedUsers.size > 1 ? 's' : ''}`
       )

apps/studio/components/interfaces/Billing/Payment/AddPaymentMethodForm.tsx

@@ -74,12 +74,12 @@ const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps
             paymentMethodId: result.setupIntent.payment_method,
           })
 
-          await queryClient.invalidateQueries(
-            organizationKeys.paymentMethods(selectedOrganization.slug)
-          )
+          await queryClient.invalidateQueries({
+            queryKey: organizationKeys.paymentMethods(selectedOrganization.slug),
+          })
 
           queryClient.setQueriesData(
-            organizationKeys.paymentMethods(selectedOrganization.slug),
+            { queryKey: organizationKeys.paymentMethods(selectedOrganization.slug) },
             (prev: any) => {
               if (!prev) return prev
               return {
@@ -97,9 +97,9 @@ const AddPaymentMethodForm = ({ onCancel, onConfirm }: AddPaymentMethodFormProps
         }
       } else {
         if (selectedOrganization) {
-          await queryClient.invalidateQueries(
-            organizationKeys.paymentMethods(selectedOrganization.slug)
-          )
+          await queryClient.invalidateQueries({
+            queryKey: organizationKeys.paymentMethods(selectedOrganization.slug),
+          })
         }
       }
 

apps/studio/components/interfaces/BranchManagement/CreateBranchModal.tsx

@@ -186,7 +186,9 @@ export const CreateBranchModal = () => {
     onSuccess: async (data) => {
       toast.success(`Successfully created preview branch "${data.name}"`)
       if (projectRef) {
-        await Promise.all([queryClient.invalidateQueries(projectKeys.detail(projectRef))])
+        await Promise.all([
+          queryClient.invalidateQueries({ queryKey: projectKeys.detail(projectRef) }),
+        ])
       }
       sendEvent({
         action: 'branch_create_button_clicked',

apps/studio/components/interfaces/Database/Privileges/Privileges.utils.ts

@@ -343,8 +343,10 @@ export function useApplyPrivilegeOperations(callback?: () => void) {
       }
 
       await Promise.all([
-        queryClient.invalidateQueries(privilegeKeys.tablePrivilegesList(project.ref)),
-        queryClient.invalidateQueries(privilegeKeys.columnPrivilegesList(project.ref)),
+        queryClient.invalidateQueries({ queryKey: privilegeKeys.tablePrivilegesList(project.ref) }),
+        queryClient.invalidateQueries({
+          queryKey: privilegeKeys.columnPrivilegesList(project.ref),
+        }),
       ])
 
       setIsLoading(false)

apps/studio/components/interfaces/Organization/BillingSettings/CreditTopUp.tsx

@@ -185,7 +185,7 @@ export const CreditTopUp = ({ slug }: { slug: string | undefined }) => {
 
   const onSuccessfulPayment = async () => {
     onTopUpDialogVisibilityChange(false)
-    await queryClient.invalidateQueries(subscriptionKeys.orgSubscription(slug))
+    await queryClient.invalidateQueries({ queryKey: subscriptionKeys.orgSubscription(slug) })
     toast.success(
       'Successfully topped up balance. It may take a minute to reflect in your account.'
     )