feat: Use typed queries (#1386)

Author: maciaszczykm

www/src/_deprecated/components/integrations/OAuthIntegrations.tsx

@@ -1,10 +1,9 @@
-import { useQuery } from '@apollo/client'
 import { Box, Text } from 'grommet'
 import { Check as Checkmark } from 'forge-core'
 
 import { ZOOM_ICON, ZOOM_INSTALL_URL } from './constants'
-import { OAUTH_Q } from './queries'
 import { OAuthService } from './types'
+import { useOauthIntegrationsQuery } from '../../../generated/graphql'
 
 function redirectUrl(format, service) {
   const location = `${
@@ -66,7 +65,9 @@ function Integration({
 }
 
 export function OAuthIntegrations() {
-  const { data } = useQuery(OAUTH_Q, { fetchPolicy: 'cache-and-network' })
+  const { data } = useOauthIntegrationsQuery({
+    fetchPolicy: 'cache-and-network',
+  })
 
   if (!data) return null
 

www/src/_deprecated/components/integrations/OauthCreator.tsx

@@ -1,14 +1,13 @@
 import { useEffect, useMemo } from 'react'
 import { Errors } from 'forge-core'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
-import { useMutation } from '@apollo/client'
 
 import { Box, Text } from 'grommet'
 
 import { LoopingLogo } from '../../../components/utils/AnimatedLogo'
 
-import { CREATE_OAUTH } from './queries'
 import { ParamToService } from './types'
+import { useCreateOauthIntegrationMutation } from '../../../generated/graphql'
 
 function OauthError({ error, service }: any) {
   return (
@@ -40,11 +39,12 @@ export function OauthCreator() {
       redirectUri: `${window.location.origin}${window.location.pathname}`,
     }
   }, [location])
-  const [mutation, { loading, data, error }] = useMutation(CREATE_OAUTH, {
-    variables: {
-      attributes: { code, redirectUri, service: ParamToService[service] },
-    },
-  })
+  const [mutation, { loading, data, error }] =
+    useCreateOauthIntegrationMutation({
+      variables: {
+        attributes: { code, redirectUri, service: ParamToService[service] },
+      },
+    })
 
   useEffect(() => {
     mutation()

www/src/_deprecated/components/integrations/queries.ts

@@ -71,21 +71,3 @@ export const DELETE_WEBHOOK = gql`
   }
   ${IntegrationWebhookFragment}
 `
-
-export const OAUTH_Q = gql`
-  query {
-    oauthIntegrations {
-      ...OauthIntegration
-    }
-  }
-  ${OauthIntegration}
-`
-
-export const CREATE_OAUTH = gql`
-  mutation Create($attributes: OauthIntegrationAttributes!) {
-    createOauthIntegration(attributes: $attributes) {
-      ...OauthIntegration
-    }
-  }
-  ${OauthIntegration}
-`

www/src/components/account/CreateRole.tsx

@@ -1,5 +1,4 @@
 import { useCallback, useContext, useMemo, useState } from 'react'
-import { useMutation } from '@apollo/client'
 import { Button } from 'honorable'
 import { Modal } from '@pluralsh/design-system'
 import uniqWith from 'lodash/uniqWith'
@@ -9,7 +8,9 @@ import { appendConnection, updateCache } from '../../utils/graphql'
 
 import SubscriptionContext from '../../contexts/SubscriptionContext'
 
-import { CREATE_ROLE, ROLES_Q } from './queries'
+import { useCreateRoleMutation } from '../../generated/graphql'
+
+import { ROLES_Q } from './queries'
 
 import { Actions } from './Actions'
 import { sanitize } from './utils'
@@ -42,15 +43,15 @@ export function CreateRole({ q }: any) {
     setCreateModalVisible(false)
   }, [])
 
-  const [mutation, { loading, error }] = useMutation(CREATE_ROLE, {
+  const [mutation, { loading, error }] = useCreateRoleMutation({
     variables: {
       attributes: { ...attributes, roleBindings: roleBindings.map(sanitize) },
     },
-    update: (cache, { data: { createRole } }) =>
+    update: (cache, { data }) =>
       updateCache(cache, {
         query: ROLES_Q,
         variables: { q },
-        update: (prev) => appendConnection(prev, createRole, 'roles'),
+        update: (prev) => appendConnection(prev, data?.createRole, 'roles'),
       }),
     onCompleted: () => resetAndClose(),
   })

www/src/components/account/CreateServiceAccount.tsx

@@ -20,11 +20,9 @@ import SubscriptionContext from '../../contexts/SubscriptionContext'
 
 import { Confirm } from '../utils/Confirm'
 
-import {
-  CREATE_SERVICE_ACCOUNT,
-  UPDATE_SERVICE_ACCOUNT,
-  USERS_Q,
-} from './queries'
+import { useCreateServiceAccountMutation } from '../../generated/graphql'
+
+import { UPDATE_SERVICE_ACCOUNT, USERS_Q } from './queries'
 
 import { MoreMenu } from './MoreMenu'
 
@@ -274,18 +272,19 @@ export function CreateServiceAccount({ q }: any) {
     setCreateModalVisible(false)
   }, [])
 
-  const [mutation, { loading, error }] = useMutation(CREATE_SERVICE_ACCOUNT, {
+  const [mutation, { loading, error }] = useCreateServiceAccountMutation({
     variables: {
       attributes: {
         ...attributes,
         impersonationPolicy: { bindings: bindings.map(sanitize) },
       },
     },
-    update: (cache, { data: { createServiceAccount } }) =>
+    update: (cache, { data }) =>
       updateCache(cache, {
         query: USERS_Q,
         variables: { q, serviceAccount: true },
-        update: (prev) => appendConnection(prev, createServiceAccount, 'users'),
+        update: (prev) =>
+          appendConnection(prev, data?.createServiceAccount, 'users'),
       }),
     onCompleted: () => {
       resetAndClose()

www/src/components/account/DnsRecords.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client'
 import { Box } from 'grommet'
 import { Button, Div, Flex, Span } from 'honorable'
 import moment from 'moment'
@@ -18,19 +18,21 @@ import { Table, TableData, TableRow } from '../utils/Table'
 import { ProviderIcon } from '../utils/ProviderIcon'
 import { Confirm } from '../utils/Confirm'
 
-import { DELETE_DNS_RECORD, DNS_RECORDS } from './queries'
+import { useDeleteDnsRecordMutation } from '../../generated/graphql'
+
+import { DNS_RECORDS } from './queries'
 
 function DeleteRecord({ record, domain }: any) {
   const [confirm, setConfirm] = useState(false)
-  const [mutation, { loading, error }] = useMutation(DELETE_DNS_RECORD, {
+  const [mutation, { loading, error }] = useDeleteDnsRecordMutation({
     variables: { name: record.name, type: record.type },
-    update: (cache, { data: { deleteDnsRecord } }) =>
+    update: (cache, { data }) =>
       updateCache(cache, {
         query: DNS_RECORDS,
         variables: { id: domain.id },
         update: (prev) =>
           deepUpdate(prev, 'dnsDomain', (domain) =>
-            removeConnection(domain, deleteDnsRecord, 'dnsRecords')
+            removeConnection(domain, data?.deleteDnsRecord, 'dnsRecords')
           ),
       }),
     onCompleted: () => setConfirm(false),

www/src/components/account/Domains.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client'
 import { Box } from 'grommet'
 import { Flex, Span } from 'honorable'
 import moment from 'moment'
@@ -25,11 +25,15 @@ import { Table, TableData, TableRow } from '../utils/Table'
 import ListInput from '../utils/ListInput'
 import { List } from '../utils/List'
 import { Confirm } from '../utils/Confirm'
-import { DnsRecordFragment } from '../../generated/graphql'
+import {
+  DnsRecordFragment,
+  useDeleteDomainMutation,
+  useUpdateDomainMutation,
+} from '../../generated/graphql'
 
 import LoadingIndicator from '../utils/LoadingIndicator'
 
-import { DELETE_DOMAIN, DNS_DOMAINS, UPDATE_DOMAIN } from './queries'
+import { DNS_DOMAINS } from './queries'
 import { Actions } from './Actions'
 import { MoreMenu } from './MoreMenu'
 import { BindingInput } from './Typeaheads'
@@ -52,12 +56,13 @@ function Header({ q, setQ }: any) {
 function DomainOptions({ domain, setDomain }: any) {
   const [confirm, setConfirm] = useState(false)
   const [edit, setEdit] = useState(false)
-  const [mutation, { loading, error }] = useMutation(DELETE_DOMAIN, {
+  const [mutation, { loading, error }] = useDeleteDomainMutation({
     variables: { id: domain.id },
-    update: (cache, { data: { deleteDomain } }) => {
+    update: (cache, { data }) => {
       updateCache(cache, {
         query: DNS_DOMAINS,
-        update: (prev) => removeConnection(prev, deleteDomain, 'dnsDomains'),
+        update: (prev) =>
+          removeConnection(prev, data?.deleteDomain, 'dnsDomains'),
         variables: {},
       })
     },
@@ -124,7 +129,7 @@ function AccessPolicy({ domain: { id, accessPolicy }, edit, setEdit }: any) {
     accessPolicy ? accessPolicy.bindings : []
   )
   const uniqueBindings = useMemo(() => uniqWith(bindings, isEqual), [bindings])
-  const [mutation, { loading, error }] = useMutation(UPDATE_DOMAIN, {
+  const [mutation, { loading, error }] = useUpdateDomainMutation({
     variables: {
       id,
       attributes: {

www/src/components/account/EditRole.tsx

@@ -1,11 +1,10 @@
-import { useMutation } from '@apollo/client'
 import { Button } from 'honorable'
 import { Modal } from '@pluralsh/design-system'
 import { useMemo, useState } from 'react'
 import uniqWith from 'lodash/uniqWith'
 import isEqual from 'lodash/isEqual'
 
-import { UPDATE_ROLE } from './queries'
+import { useUpdateRoleMutation } from '../../generated/graphql'
 
 import { Actions } from './Actions'
 import { sanitize } from './utils'
@@ -25,7 +24,7 @@ export function EditRole({ role }: any) {
     [roleBindings]
   )
 
-  const [mutation, { loading, error }] = useMutation(UPDATE_ROLE, {
+  const [mutation, { loading, error }] = useUpdateRoleMutation({
     variables: {
       id: role.id,
       attributes: { ...attributes, roleBindings: roleBindings.map(sanitize) },

www/src/components/account/InviteUser.tsx

@@ -1,4 +1,3 @@
-import { useMutation } from '@apollo/client'
 import {
   Codeline,
   MailIcon,
@@ -15,7 +14,8 @@ import { useCurrentUser } from '../../contexts/CurrentUserContext'
 import SubscriptionContext from '../../contexts/SubscriptionContext'
 import { GqlError } from '../utils/Alert'
 
-import { CREATE_INVITE } from './queries'
+import { useCreateInviteMutation } from '../../generated/graphql'
+
 import { inviteLink } from './utils'
 
 const MAX_OPEN_SOURCE_USERS = 5
@@ -27,10 +27,10 @@ export function InviteUser({ refetch }: { refetch?: (() => void) | null }) {
   const [invite, setInvite] = useState<any>(null)
   const { account } = useCurrentUser()
   const { isGrandfathered, isPaidPlan } = useContext(SubscriptionContext)
-  const [mutation, { loading, error, reset }] = useMutation(CREATE_INVITE, {
+  const [mutation, { loading, error, reset }] = useCreateInviteMutation({
     variables: { attributes: { email } },
     onCompleted: (data) => {
-      setInvite(data && data.createInvite)
+      setInvite(data?.createInvite)
       refetch?.()
     },
   })

www/src/components/account/Invites.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
 import { Div, Flex, Text } from 'honorable'
@@ -23,19 +23,22 @@ import LoadingIndicator from '../utils/LoadingIndicator'
 
 import { Confirm } from '../utils/Confirm'
 
-import { DELETE_INVITE, INVITES_Q } from './queries'
+import { useDeleteInviteMutation } from '../../generated/graphql'
+
+import { INVITES_Q } from './queries'
 import { inviteLink } from './utils'
 
 function DeleteInvite({ invite }: any) {
   const [confirm, setConfirm] = useState(false)
-  const [mutation, { loading, error }] = useMutation(DELETE_INVITE, {
+  const [mutation, { loading, error }] = useDeleteInviteMutation({
     variables: { id: invite.id },
     onCompleted: () => setConfirm(false),
-    update: (cache, { data: { deleteInvite } }) =>
+    update: (cache, { data }) =>
       updateCache(cache, {
         query: INVITES_Q,
         variables: {},
-        update: (invites) => removeConnection(invites, deleteInvite, 'invites'),
+        update: (invites) =>
+          removeConnection(invites, data?.deleteInvite, 'invites'),
       }),
   })
 

www/src/components/account/Roles.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client'
 import { Box } from 'grommet'
 import isEmpty from 'lodash/isEmpty'
 import { Flex } from 'honorable'
@@ -16,7 +16,7 @@ import {
 } from '../../utils/graphql'
 import { DeleteIconButton } from '../utils/IconButtons'
 import { StandardScroller } from '../utils/SmoothScroller'
-import { Permission } from '../../generated/graphql'
+import { Permission, useDeleteRoleMutation } from '../../generated/graphql'
 import { canEdit } from '../../utils/account'
 import LoadingIndicator from '../utils/LoadingIndicator'
 
@@ -26,7 +26,7 @@ import { Confirm } from '../utils/Confirm'
 
 import BillingTrialBanner from './billing/BillingTrialBanner'
 
-import { DELETE_ROLE, ROLES_Q } from './queries'
+import { ROLES_Q } from './queries'
 import { hasRbac } from './utils'
 import { Info } from './Info'
 import { EditRole } from './EditRole'
@@ -51,13 +51,13 @@ function Role({ role, q }: any) {
   const [confirm, setConfirm] = useState(false)
   const me = useContext(CurrentUserContext)
   const editable = canEdit(me, me.account) || hasRbac(me, Permission.Users)
-  const [mutation, { loading, error }] = useMutation(DELETE_ROLE, {
+  const [mutation, { loading, error }] = useDeleteRoleMutation({
     variables: { id: role.id },
     update: (cache, { data }) =>
       updateCache(cache, {
         query: ROLES_Q,
         variables: { q },
-        update: (prev) => removeConnection(prev, data.deleteRole, 'roles'),
+        update: (prev) => removeConnection(prev, data?.deleteRole, 'roles'),
       }),
     onCompleted: () => setConfirm(false),
   })