fix incorrect query key on VercelProjectConnectionsQuery

studio/components/interfaces/Integrations/ProjectLinker.tsx

@@ -16,9 +16,6 @@ interface Project {
   ref: string
 }
 
-// to do: move this somewhere
-// const INTEGRATION_INTERNAL_ID = 1
-
 export interface ProjectLinkerProps {
   organizationIntegrationId: string | undefined
   foreignProjects: VercelProjectsResponse[]
@@ -60,7 +57,6 @@ const ProjectLinker = ({
       connection: {
         foreign_project_id: vercelProjectId,
         supabase_project_ref: supabaseProjectRef,
-        // integration_id: INTEGRATION_INTERNAL_ID,
         metadata: {
           ...projectDetails,
           supabaseConfig: {
@@ -88,16 +84,13 @@ const ProjectLinker = ({
     )
   }
 
-  /**
-   * create a flat array of foreign project ids. ie, ["prj_MlkO6AiLG5ofS9ojKrkS3PhhlY3f", ..]
-   */
-  const flatInstalledConnectionsIds = installedConnections.map((x) => x.foreign_project_id)
-  /**
-   * check that vercel project is not already installed
-   */
+  // create a flat array of foreign project ids. ie, ["prj_MlkO6AiLG5ofS9ojKrkS3PhhlY3f", ..]
+  const flatInstalledConnectionsIds = new Set(installedConnections.map((x) => x.foreign_project_id))
+
+  // check that vercel project is not already installed
   const filteredForeignProjects: VercelProjectsResponse[] = foreignProjects.filter(
     (foreignProject) => {
-      return !flatInstalledConnectionsIds.includes(foreignProject.id)
+      return !flatInstalledConnectionsIds.has(foreignProject.id)
     }
   )
 

studio/components/interfaces/Organization/IntegrationSettings/SidePanelVercelProjectLinker.tsx

@@ -50,13 +50,6 @@ const SidePanelVercelProjectLinker = () => {
     [selectedOrganization?.id, supabaseProjectsData]
   )
 
-  const { data: vercelProjectConnectionsData } = useVercelProjectConnectionsQuery(
-    {
-      organization_integration_id: organizationIntegrationId,
-    },
-    { enabled: organizationIntegrationId !== null }
-  )
-
   const { data: vercelProjectsData } = useVercelProjectsQuery(
     {
       organization_integration_id: organizationIntegrationId,

studio/components/ui/OrganizationPicker.tsx

@@ -1,10 +1,6 @@
 import { useIntegrationsQuery } from 'data/integrations/integrations-query'
 import { IntegrationName } from 'data/integrations/integrations.types'
-import {
-  OrganizationsResponse,
-  useOrganizationsQuery,
-} from 'data/organizations/organizations-query'
-import { useStore } from 'hooks'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
 import { useState } from 'react'
 import { Organization } from 'types'
 import { Badge, IconHexagon, Listbox } from 'ui'
@@ -20,14 +16,12 @@ const OrganizationPicker = ({
   onSelectedOrgChange,
   integrationName,
 }: OrganizationPickerProps) => {
-  const { ui } = useStore()
   const [selectedOrg, setSelectedOrg] = useState<Organization | null>(null)
 
   /**
    * array of integrations installed on all
    */
-  const { data: integrationData, isLoading: integrationDataLoading } = useIntegrationsQuery({})
-  console.log('integrationData', integrationData)
+  const { data: integrationData, isLoading: integrationDataLoading } = useIntegrationsQuery()
 
   /**
    * filter integrations to match integrationName

studio/data/integrations/integration-connections-create-mutation.ts

@@ -54,6 +54,9 @@ export const useIntegrationConnectionsCreateMutation = ({
         queryClient.invalidateQueries(
           integrationKeys.vercelProjectList(variables.organizationIntegrationId)
         ),
+        queryClient.invalidateQueries(
+          integrationKeys.vercelConnectionsList(variables.organizationIntegrationId)
+        ),
       ])
       await onSuccess?.(data, variables, context)
     },

studio/data/integrations/integrations-github-repos-query.ts

@@ -126,12 +126,12 @@ export async function getIntegrations({ orgSlug }: IntegrationsVariables, signal
 export type IntegrationsData = Awaited<ReturnType<typeof getIntegrations>>
 export type IntegrationsError = unknown
 
-export const useIntegrationsQuery = <TData = IntegrationsData>(
+export const useIntegrationsGitHubReposQuery = <TData = IntegrationsData>(
   { orgSlug }: IntegrationsVariables,
   { enabled = true, ...options }: UseQueryOptions<IntegrationsData, IntegrationsError, TData> = {}
 ) =>
   useQuery<IntegrationsData, IntegrationsError, TData>(
-    integrationKeys.integrationsList(),
+    integrationKeys.integrationsList(), // TODO: make a unique key for github repos
     ({ signal }) => getIntegrations({ orgSlug }, signal),
     { enabled: enabled && typeof orgSlug !== 'undefined', ...options }
   )

studio/data/integrations/integrations-vercel-installed-connection-delete-mutation.ts

@@ -46,6 +46,9 @@ export const useIntegrationsVercelInstalledConnectionDeleteMutation = ({
           queryClient.invalidateQueries(
             integrationKeys.vercelProjectList(variables.organization_integration_id)
           ),
+          queryClient.invalidateQueries(
+            integrationKeys.vercelConnectionsList(variables.organization_integration_id)
+          ),
         ])
         await onSuccess?.(data, variables, context)
       },

studio/data/integrations/integrations-vercel-installed-connections-query.ts

@@ -51,7 +51,7 @@ export const useVercelProjectConnectionsQuery = <TData = VercelProjectsData>(
   }: UseQueryOptions<VercelProjectsData, VercelProjectsError, TData> = {}
 ) =>
   useQuery<VercelProjectsData, VercelProjectsError, TData>(
-    integrationKeys.vercelProjectList(organization_integration_id),
+    integrationKeys.vercelConnectionsList(organization_integration_id),
     ({ signal }) => getVercelInstalledConnections({ organization_integration_id }, signal),
     {
       enabled:

studio/pages/integrations/vercel/install.tsx

@@ -46,7 +46,7 @@ const VercelIntegration: NextPageWithLayout = () => {
    *
    * Array of integrations installed on all
    */
-  const { data: integrationData, isLoading: integrationDataLoading } = useIntegrationsQuery({})
+  const { data: integrationData, isLoading: integrationDataLoading } = useIntegrationsQuery()
 
   const { data: organizationsData, isLoading: isLoadingOrganizationsQuery } = useOrganizationsQuery(
     {