Use Generated GraphQL Hooks

administration/src/KeepAliveToken.tsx

@@ -1,9 +1,8 @@
-import { useMutation } from '@apollo/client'
 import { Button, Classes, Dialog } from '@blueprintjs/core'
 import React, { ReactNode, useContext, useEffect, useState } from 'react'
 import { AuthContextData } from './AuthProvider'
 import { useAppToaster } from './components/AppToaster'
-import { SignInDocument, SignInMutation, SignInMutationVariables, SignInPayload } from './generated/graphql'
+import { SignInPayload, useSignInMutation } from './generated/graphql'
 import { ProjectConfigContext } from './project-configs/ProjectConfigContext'
 
 interface Props {
@@ -21,7 +20,7 @@ const KeepAliveToken = (props: Props) => {
   })
   const appToaster = useAppToaster()
 
-  const [signIn, mutationState] = useMutation<SignInMutation, SignInMutationVariables>(SignInDocument, {
+  const [signIn, mutationState] = useSignInMutation({
     onCompleted: payload => props.onSignIn(payload.signInPayload, props.authData.password),
     onError: () => appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' }),
   })

administration/src/RegionProvider.tsx

@@ -1,7 +1,6 @@
-import { useQuery } from '@apollo/client'
 import { Button, Spinner } from '@blueprintjs/core'
 import { createContext, ReactNode, useContext } from 'react'
-import { GetRegionsDocument, GetRegionsQuery, GetRegionsQueryVariables, Region } from './generated/graphql'
+import { Region, useGetRegionsQuery } from './generated/graphql'
 import { ProjectConfigContext } from './project-configs/ProjectConfigContext'
 import { AuthContext } from './AuthProvider'
 
@@ -10,7 +9,7 @@ export const RegionContext = createContext<Region | null>(null)
 const RegionProvider = ({ children }: { children: ReactNode }) => {
   const { projectId } = useContext(ProjectConfigContext)
   const userRegionId = useContext(AuthContext).data?.administrator.regionId
-  const { loading, error, data, refetch } = useQuery<GetRegionsQuery, GetRegionsQueryVariables>(GetRegionsDocument, {
+  const { loading, error, data, refetch } = useGetRegionsQuery({
     variables: { project: projectId },
   })
   if (loading) return <Spinner />

administration/src/components/RegionSelector.tsx

@@ -1,8 +1,7 @@
 import React, { useContext } from 'react'
 import { Button, Menu, MenuItem, Spinner } from '@blueprintjs/core'
-import { useQuery } from '@apollo/client'
 import { ItemListRenderer, ItemRenderer, Select } from '@blueprintjs/select'
-import { GetRegionsDocument, GetRegionsQuery, GetRegionsQueryVariables, Region } from '../generated/graphql'
+import { Region, useGetRegionsQuery } from '../generated/graphql'
 import { ProjectConfigContext } from '../project-configs/ProjectConfigContext'
 
 const RegionSelect = Select.ofType<Region>()
@@ -32,7 +31,7 @@ const itemRenderer: ItemRenderer<Region> = (region, { handleClick, modifiers })
 
 const RegionSelector = (props: { onRegionSelect: (region: Region) => void; activeRegionId: number }) => {
   const projectId = useContext(ProjectConfigContext).projectId
-  const { loading, error, data, refetch } = useQuery<GetRegionsQuery, GetRegionsQueryVariables>(GetRegionsDocument, {
+  const { loading, error, data, refetch } = useGetRegionsQuery({
     variables: { project: projectId },
   })
   if (loading) return <Spinner />

administration/src/components/applications/ApplicationsController.tsx

@@ -1,20 +1,14 @@
 import React, { useContext } from 'react'
 import { Button, Card, H3, Spinner } from '@blueprintjs/core'
-import { useQuery } from '@apollo/client'
 import { RegionContext } from '../../RegionProvider'
 import ApplicationsOverview from './ApplicationsOverview'
-import {
-  GetApplicationsDocument,
-  GetApplicationsQuery,
-  GetApplicationsQueryVariables,
-  Region,
-} from '../../generated/graphql'
+import { Region, useGetApplicationsQuery } from '../../generated/graphql'
 
 const ApplicationsController = (props: { region: Region; token: string }) => {
-  const { loading, error, data, refetch } = useQuery<GetApplicationsQuery, GetApplicationsQueryVariables>(
-    GetApplicationsDocument,
-    { variables: { regionId: props.region.id }, onError: error => console.error(error) }
-  )
+  const { loading, error, data, refetch } = useGetApplicationsQuery({
+    variables: { regionId: props.region.id },
+    onError: error => console.error(error),
+  })
   if (loading) return <Spinner />
   else if (error || !data)
     return (

administration/src/components/applications/ApplicationsOverview.tsx

@@ -1,17 +1,11 @@
-import { useMutation } from '@apollo/client'
 import { Alert, Button, Card, H4, IResizeEntry, ResizeSensor } from '@blueprintjs/core'
 import { format } from 'date-fns'
 import React, { FunctionComponent, useState } from 'react'
 import styled from 'styled-components'
 import JsonFieldView, { JsonField } from './JsonFieldView'
 import { useAppToaster } from '../AppToaster'
 import FlipMove from 'react-flip-move'
-import {
-  DeleteApplicationDocument,
-  DeleteApplicationMutation,
-  DeleteApplicationMutationVariables,
-  GetApplicationsQuery,
-} from '../../generated/graphql'
+import { GetApplicationsQuery, useDeleteApplicationMutation } from '../../generated/graphql'
 
 type Application = GetApplicationsQuery['applications'][number]
 
@@ -62,22 +56,19 @@ const ApplicationView: FunctionComponent<{ application: Application; token: stri
   const [height, setHeight] = useState(0)
   const appToaster = useAppToaster()
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
-  const [deleteApplication, { loading }] = useMutation<DeleteApplicationMutation, DeleteApplicationMutationVariables>(
-    DeleteApplicationDocument,
-    {
-      onError: error => {
-        console.error(error)
+  const [deleteApplication, { loading }] = useDeleteApplicationMutation({
+    onError: error => {
+      console.error(error)
+      appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
+    },
+    onCompleted: ({ deleted }: { deleted: boolean }) => {
+      if (deleted) gotDeleted()
+      else {
+        console.error('Delete operation returned false.')
         appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
-      },
-      onCompleted: ({ deleted }: { deleted: boolean }) => {
-        if (deleted) gotDeleted()
-        else {
-          console.error('Delete operation returned false.')
-          appToaster?.show({ intent: 'danger', message: 'Etwas ist schief gelaufen.' })
-        }
-      },
-    }
-  )
+      }
+    },
+  })
 
   const handleResize = (entries: IResizeEntry[]) => {
     setHeight(entries[0].contentRect.height)

administration/src/components/auth/Login.tsx

@@ -1,10 +1,9 @@
-import { useMutation } from '@apollo/client'
 import React, { useContext } from 'react'
 import styled from 'styled-components'
 import LoginForm from './LoginForm'
 import { useAppToaster } from '../AppToaster'
 import { Card, H2, H3, H4 } from '@blueprintjs/core'
-import { SignInDocument, SignInMutation, SignInMutationVariables, SignInPayload } from '../../generated/graphql'
+import { SignInMutation, SignInPayload, useSignInMutation } from '../../generated/graphql'
 import { ProjectConfigContext } from '../../project-configs/ProjectConfigContext'
 
 interface Props {
@@ -28,7 +27,7 @@ const Login = (props: Props) => {
   const config = useContext(ProjectConfigContext)
   const appToaster = useAppToaster()
   const [state, setState] = React.useState<State>({ email: '', password: '' })
-  const [signIn, mutationState] = useMutation<SignInMutation, SignInMutationVariables>(SignInDocument, {
+  const [signIn, mutationState] = useSignInMutation({
     onCompleted: (payload: SignInMutation) => props.onSignIn(payload.signInPayload, state.password),
     onError: () => appToaster?.show({ intent: 'danger', message: 'Login fehlgeschlagen.' }),
   })