From f6ccd015ae2930aba0465c7e42a3b5ef45731f5c Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Fri, 8 Jul 2022 11:18:33 +0200
Subject: [PATCH] hive/app: strict null checks (#220)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix src/lib/urql-cache.ts

* fix src/lib/mixpanel.ts

* fix: src/lib/hooks/use-route-selector.ts

* fix: src/lib/access/common.ts

* fix: src/components/v2/time-ago.tsx

* fix: src/components/v2/skeleton.tsx

* fix: src/components/v2/modals/delete-organization.tsx (verified functionality)

* fix: src/components/v2/modals/create-target.tsx

* fix: src/components/v2/modals/create-project.tsx

* fix: src/components/v2/modals/create-organization.tsx

* fix: src/components/v2/modals/create-channel.tsx

* fix: src/components/v2/modals/create-alert.tsx

* fix: packages/web/app/src/components/v2/dropdown.tsx

* fix: src/components/v2/data-wrapper.tsx

* fix: src/components/target/operations/Filters.tsx

* fix: pages/[orgId]/[projectId]/[targetId]/history.tsx

* fix: src/components/project/Switcher.tsx

* fix: src/components/organization/Switcher.tsx

* fix: src/components/organization/Permissions.tsx

* fix: pages/settings.tsx

* fix: packages/web/app/src/components/v2/tabs.tsx

* fix: packages/web/app/src/components/v2/avatar.tsx

* fix: packages/web/app/pages/join/[inviteCode].tsx

* fix: packages/web/app/pages/[orgId]/index.tsx

* fix: pages/[orgId]/members.tsx

* fix: pages/[orgId]/settings.tsx

* fix:  pages/[orgId]/subscription/index.tsx

* fix: pages/api/github/callback.ts

* fix: pages/api/github/connect/[orgId].ts

* fix: src/components/common/Navigation.tsx

* fix: src/components/common/UserSettings.tsx

* fix: src/components/common/LoadingAPI.tsx

* fix: packages/web/app/src/components/common/Feedback.tsx

* fix: packages/web/app/src/components/common/DataWrapper.tsx

* fix: src/components/admin/AdminStats.tsx

* fix: pages/index.tsx

* fix: pages/api/proxy.ts

* fix: src/components/auth/AuthProvider.tsx

* fix: pages/[orgId]/[projectId]/index.tsx

* fix:  pages/[orgId]/[projectId]/settings.tsx

* fix: src/components/organization/billing/Billing.tsx

* fix: src/components/organization/billing/BillingPaymentMethod.tsx

* fix: src/components/organization/billing/BillingPlanPicker.tsx

* fix: src/components/organization/billing/InvoicesList.tsx

* fix: pages/[orgId]/_new.tsx

* fix: pages/[orgId]/subscription/manage.tsx

* fix: pages/[orgId]/[projectId]/[targetId]/settings.tsx

* fix: src/components/target/operations/List.tsx

* fix: src/components/target/operations/Stats.tsx

* fix: src/components/target/Switcher.tsx

* fix: pages/[orgId]/[projectId]/[targetId]/index.tsx

* fix: src/components/organization/billing/PlanSummary.tsx

* fix: src/components/v2/modals/create-access-token.tsx

* fix: src/components/v2/header.tsx

* fix: src/components/layouts/project.tsx

* fix: src/components/layouts/target.tsx

* fix: src/components/layouts/organization.tsx

* fix: src/components/v2/activities.tsx

* fix: enable rule

* strict mode

* NOTE: This file should not be edited 😁

* run prettier
---
 packages/web/app/modules.d.ts                 |  9 +-
 .../[projectId]/[targetId]/history.tsx        | 16 ++--
 .../[orgId]/[projectId]/[targetId]/index.tsx  | 92 ++++++++++---------
 .../[projectId]/[targetId]/operations.tsx     |  2 +-
 .../[projectId]/[targetId]/settings.tsx       |  6 +-
 .../app/pages/[orgId]/[projectId]/index.tsx   |  2 +-
 .../pages/[orgId]/[projectId]/settings.tsx    | 12 +--
 packages/web/app/pages/[orgId]/_new.tsx       |  2 +-
 packages/web/app/pages/[orgId]/index.tsx      | 20 ++--
 packages/web/app/pages/[orgId]/members.tsx    | 12 +--
 packages/web/app/pages/[orgId]/settings.tsx   |  8 +-
 .../app/pages/[orgId]/subscription/index.tsx  |  4 +-
 .../app/pages/[orgId]/subscription/manage.tsx | 47 +++++++---
 packages/web/app/pages/api/proxy.ts           |  2 +-
 packages/web/app/pages/index.tsx              | 24 +++--
 packages/web/app/pages/join/[inviteCode].tsx  | 32 ++++---
 packages/web/app/pages/settings.tsx           | 19 +---
 .../app/src/components/admin/AdminStats.tsx   | 24 ++---
 .../app/src/components/auth/AuthProvider.tsx  |  8 +-
 .../app/src/components/common/DataWrapper.tsx |  4 +
 .../app/src/components/common/Feedback.tsx    |  8 +-
 .../app/src/components/common/LoadingAPI.tsx  | 32 +++----
 .../app/src/components/common/Navigation.tsx  | 12 ++-
 .../src/components/common/UserSettings.tsx    | 14 ++-
 .../src/components/layouts/organization.tsx   | 16 +++-
 .../app/src/components/layouts/project.tsx    | 19 ++--
 .../web/app/src/components/layouts/target.tsx |  8 +-
 .../components/organization/Permissions.tsx   | 16 +++-
 .../src/components/organization/Switcher.tsx  | 56 +++++------
 .../organization/billing/Billing.tsx          |  4 +
 .../billing/BillingPaymentMethod.tsx          |  2 +-
 .../billing/BillingPlanPicker.tsx             |  3 +-
 .../organization/billing/InvoicesList.tsx     |  2 +-
 .../organization/billing/PlanSummary.tsx      | 18 ++--
 .../app/src/components/project/Switcher.tsx   | 29 +++---
 .../app/src/components/target/Switcher.tsx    | 22 ++---
 .../components/target/operations/Filters.tsx  | 31 +++++--
 .../src/components/target/operations/List.tsx | 50 ++++++----
 .../components/target/operations/Stats.tsx    | 37 ++++----
 .../web/app/src/components/v2/activities.tsx  |  7 +-
 packages/web/app/src/components/v2/avatar.tsx |  8 +-
 .../app/src/components/v2/data-wrapper.tsx    |  6 +-
 .../web/app/src/components/v2/dropdown.tsx    | 54 +++++------
 packages/web/app/src/components/v2/header.tsx |  2 +-
 .../v2/modals/create-access-token.tsx         | 44 ++++++---
 .../src/components/v2/modals/create-alert.tsx |  6 +-
 .../components/v2/modals/create-channel.tsx   |  2 +-
 .../v2/modals/create-organization.tsx         |  2 +-
 .../components/v2/modals/create-project.tsx   |  2 +-
 .../components/v2/modals/create-target.tsx    |  2 +-
 .../v2/modals/delete-organization.tsx         | 12 +--
 .../web/app/src/components/v2/skeleton.tsx    |  2 +-
 packages/web/app/src/components/v2/tabs.tsx   | 37 ++++----
 .../web/app/src/components/v2/time-ago.tsx    |  4 +-
 .../mutation.delete-alert-channels.graphql    |  1 +
 .../graphql/mutation.delete-alerts.graphql    |  1 +
 .../mutation.delete-organization.graphql      |  1 +
 ...utation.delete-persisted-operation.graphql |  1 +
 .../graphql/mutation.delete-project.graphql   |  1 +
 .../graphql/mutation.delete-target.graphql    |  1 +
 .../mutation.join-organization.graphql        |  1 +
 ...ery.get-github-integration-details.graphql |  1 -
 .../query.organization-invitation.graphql     |  1 +
 packages/web/app/src/lib/access/common.ts     |  6 +-
 .../web/app/src/lib/access/organization.ts    |  4 +-
 packages/web/app/src/lib/access/project.ts    |  7 +-
 packages/web/app/src/lib/access/target.ts     |  7 +-
 .../app/src/lib/hooks/use-route-selector.ts   |  2 +-
 packages/web/app/src/lib/mixpanel.ts          |  2 +-
 packages/web/app/src/lib/urql-cache.ts        | 40 +++++---
 packages/web/app/tsconfig.json                |  8 +-
 71 files changed, 564 insertions(+), 435 deletions(-)

diff --git a/packages/web/app/modules.d.ts b/packages/web/app/modules.d.ts
index eb8a12a35e..d96c502c2d 100644
--- a/packages/web/app/modules.d.ts
+++ b/packages/web/app/modules.d.ts
@@ -1,4 +1,3 @@
-/* eslint-disable import/no-unused-modules */
 declare module 'node-crisp-api';
 declare module 'tailwindcss/colors';
 
@@ -8,3 +7,11 @@ declare module '@n1ru4l/react-time-ago' {
     children: (args: { value: string }) => React.ReactElement;
   }): React.ReactElement;
 }
+
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    APP_BASE_URL: string;
+    GITHUB_APP_NAME: string;
+    GRAPHQL_ENDPOINT: string;
+  }
+}
diff --git a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/history.tsx b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/history.tsx
index 404b9d1ebf..50cc05eef9 100644
--- a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/history.tsx
+++ b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/history.tsx
@@ -50,7 +50,7 @@ const ChangesBlock = ({
 }: {
   changes: SchemaChangeFieldsFragment[];
   criticality: CriticalityLevel;
-}): ReactElement => {
+}): ReactElement | null => {
   const filteredChanges = changes.filter(c => c.criticality === criticality);
 
   if (!filteredChanges.length) {
@@ -71,7 +71,7 @@ const ChangesBlock = ({
   );
 };
 
-const DiffView = ({ view, versionId }: { view: 'sdl' | 'list'; versionId: string }): ReactElement => {
+const DiffView = ({ view, versionId }: { view: 'sdl' | 'list'; versionId: string }): ReactElement | null => {
   const router = useRouteSelector();
   const [compareQuery] = useQuery({
     query: CompareDocument,
@@ -183,7 +183,10 @@ const ListPage = ({
         <Button
           variant="link"
           onClick={() => {
-            onLoadMore(versions.nodes.at(-1).id);
+            const id = versions.nodes.at(-1)?.id;
+            if (typeof id == 'string') {
+              onLoadMore(id);
+            }
           }}
         >
           Load more
@@ -265,14 +268,13 @@ export default function HistoryPage(): ReactElement {
     },
     requestPolicy: 'cache-and-network',
   });
-  const latestVersionId = latestSchemaQuery.data?.target.latestSchemaVersion?.id;
-  const versionId = router.versionId || latestVersionId;
+  const versionId = router.versionId ?? latestSchemaQuery.data?.target?.latestSchemaVersion?.id;
 
   return (
     <>
       <Title title="History" />
-      <TargetLayout value="history" className={latestVersionId ? 'flex h-full items-stretch gap-x-5' : ''}>
-        {() => (latestVersionId ? <Page versionId={versionId} /> : noSchema)}
+      <TargetLayout value="history" className={versionId ? 'flex h-full items-stretch gap-x-5' : ''}>
+        {() => (versionId ? <Page versionId={versionId} /> : noSchema)}
       </TargetLayout>
     </>
   );
diff --git a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/index.tsx b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/index.tsx
index 80b5764cf5..47bde971d5 100644
--- a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/index.tsx
+++ b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/index.tsx
@@ -100,7 +100,7 @@ const SchemaServiceName = ({
   }
 
   return (
-    <Editable defaultValue={schema.service} isDisabled={mutation.fetching} onSubmit={submit}>
+    <Editable defaultValue={schema.service ?? ''} isDisabled={mutation.fetching} onSubmit={submit}>
       <EditablePreview />
       <EditableInput />
     </Editable>
@@ -123,7 +123,7 @@ const Schemas = ({
   filterService?: string;
 }): ReactElement => {
   if (project.type === ProjectType.Single) {
-    return <GraphQLBlock className="mb-6" sdl={schemas[0].source} url={schemas[0].url} />;
+    return <GraphQLBlock className="mb-6" sdl={schemas[0].source} url={schemas[0]?.url ?? ''} />;
   }
 
   return (
@@ -140,7 +140,7 @@ const Schemas = ({
           <GraphQLBlock
             key={schema.id}
             sdl={schema.source}
-            url={schema.url}
+            url={schema.url ?? ''}
             title={
               <SchemaServiceName
                 version={version}
@@ -178,7 +178,7 @@ const SyncSchemaButton = ({
   target: TargetFieldsFragment;
   project: ProjectFieldsFragment;
   organization: OrganizationFieldsFragment;
-}): ReactElement => {
+}): ReactElement | null => {
   const [status, setStatus] = useState<'idle' | 'error' | 'success'>('idle');
   const [mutation, mutate] = useMutation(SchemaSyncButton_SchemaSyncCDN);
 
@@ -230,9 +230,9 @@ function SchemaView({
   organization: OrganizationFieldsFragment;
   project: ProjectFieldsFragment;
   target: TargetFieldsFragment;
-}): ReactElement {
-  const [filterService, setFilterService] = useState<string | null>(null);
-  const [term, setTerm] = useState<string | null>(null);
+}): ReactElement | null {
+  const [filterService, setFilterService] = useState<string>('');
+  const [term, setTerm] = useState<string>('');
   const debouncedFilter = useDebouncedCallback((value: string) => {
     setFilterService(value);
   }, 500);
@@ -268,45 +268,51 @@ function SchemaView({
     redirect: false,
   });
 
-  if (!query.data?.target?.latestSchemaVersion?.schemas.nodes.length) {
-    return noSchema;
-  }
-
   return (
     <DataWrapper query={query}>
-      {() => (
-        <>
-          <div className="mb-5 flex flex-row items-center justify-between">
-            <div className="font-light text-gray-500">The latest published schema.</div>
-            <div className="flex flex-row items-center gap-4">
-              {isDistributed && (
-                <form
-                  onSubmit={event => {
-                    event.preventDefault();
-                  }}
-                >
-                  <InputGroup size="sm" variant="filled">
-                    <Input type="text" placeholder="Find service" value={term} onChange={handleChange} />
-                    <InputRightElement>
-                      <IconButton aria-label="Reset" size="xs" variant="ghost" onClick={reset} icon={<VscClose />} />
-                    </InputRightElement>
-                  </InputGroup>
-                </form>
-              )}
-              {canManage && <MarkAsValid version={query.data.target.latestSchemaVersion} />}
-              {canManage && <SyncSchemaButton target={target} project={project} organization={organization} />}
+      {query => {
+        if (!query.data?.target?.latestSchemaVersion?.schemas.nodes.length) {
+          return noSchema;
+        }
+
+        return (
+          <>
+            <div className="mb-5 flex flex-row items-center justify-between">
+              <div className="font-light text-gray-500">The latest published schema.</div>
+              <div className="flex flex-row items-center gap-4">
+                {isDistributed && (
+                  <form
+                    onSubmit={event => {
+                      event.preventDefault();
+                    }}
+                  >
+                    <InputGroup size="sm" variant="filled">
+                      <Input type="text" placeholder="Find service" value={term} onChange={handleChange} />
+                      <InputRightElement>
+                        <IconButton aria-label="Reset" size="xs" variant="ghost" onClick={reset} icon={<VscClose />} />
+                      </InputRightElement>
+                    </InputGroup>
+                  </form>
+                )}
+                {canManage ? (
+                  <>
+                    <MarkAsValid version={query.data.target.latestSchemaVersion} />{' '}
+                    <SyncSchemaButton target={target} project={project} organization={organization} />
+                  </>
+                ) : null}
+              </div>
             </div>
-          </div>
-          <Schemas
-            organization={organization}
-            project={project}
-            target={query.data.target}
-            filterService={filterService}
-            version={query.data.target.latestSchemaVersion.id}
-            schemas={query.data.target.latestSchemaVersion.schemas.nodes ?? []}
-          />
-        </>
-      )}
+            <Schemas
+              organization={organization}
+              project={project}
+              target={query.data.target}
+              filterService={filterService}
+              version={query.data.target.latestSchemaVersion.id}
+              schemas={query.data.target.latestSchemaVersion.schemas.nodes ?? []}
+            />
+          </>
+        );
+      }}
     </DataWrapper>
   );
 }
diff --git a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/operations.tsx b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/operations.tsx
index 5b57789591..8d3d31f1b4 100644
--- a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/operations.tsx
+++ b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/operations.tsx
@@ -60,7 +60,7 @@ const OperationsView = ({
     return { from, to };
   }, [selectedPeriod]);
 
-  const updatePeriod = useCallback<ComponentProps<'select'>['onChange']>(
+  const updatePeriod = useCallback<Exclude<ComponentProps<'select'>['onChange'], undefined | null>>(
     ev => {
       router.push(`${href}?period=${ev.target.value}`);
     },
diff --git a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/settings.tsx b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/settings.tsx
index 9604d90bf0..77c3931683 100644
--- a/packages/web/app/pages/[orgId]/[projectId]/[targetId]/settings.tsx
+++ b/packages/web/app/pages/[orgId]/[projectId]/[targetId]/settings.tsx
@@ -160,7 +160,7 @@ const ExtendBaseSchema = (props: { baseSchema: string }): ReactElement => {
         options={{ readOnly: mutation.fetching }}
         value={baseSchema}
         height={300}
-        onChange={setBaseSchema}
+        onChange={value => setBaseSchema(value ?? '')}
       />
       {mutation.data?.updateBaseSchema.error && (
         <div className="text-red-500">{mutation.data.updateBaseSchema.error.message}</div>
@@ -504,7 +504,7 @@ const Page = ({ target, organization }: { target: TargetFieldsFragment; organiza
         </form>
         {touched.name && (errors.name || mutation.error) && (
           <div className="mt-2 text-red-500">
-            {errors.name ?? mutation.error.graphQLErrors[0]?.message ?? mutation.error.message}
+            {errors.name ?? mutation.error?.graphQLErrors[0]?.message ?? mutation.error?.message}
           </div>
         )}
         {mutation.data?.updateTargetName.error?.inputErrors?.name && (
@@ -516,7 +516,7 @@ const Page = ({ target, organization }: { target: TargetFieldsFragment; organiza
 
       <ConditionalBreakingChanges />
 
-      {target && <ExtendBaseSchema baseSchema={target.baseSchema} />}
+      {target?.baseSchema?.length ? <ExtendBaseSchema baseSchema={target.baseSchema} /> : null}
 
       {canDelete && (
         <Card>
diff --git a/packages/web/app/pages/[orgId]/[projectId]/index.tsx b/packages/web/app/pages/[orgId]/[projectId]/index.tsx
index d76d88479c..c7669a9793 100644
--- a/packages/web/app/pages/[orgId]/[projectId]/index.tsx
+++ b/packages/web/app/pages/[orgId]/[projectId]/index.tsx
@@ -10,7 +10,7 @@ import { TargetQuery, TargetsDocument, VersionsDocument } from '@/graphql';
 import { useClipboard } from '@/lib/hooks/use-clipboard';
 import { useRouteSelector } from '@/lib/hooks/use-route-selector';
 
-const TargetCard = ({ target }: { target: TargetQuery['target'] }): ReactElement => {
+const TargetCard = ({ target }: { target: Exclude<TargetQuery['target'], null | undefined> }): ReactElement => {
   const router = useRouteSelector();
   const copyToClipboard = useClipboard();
   const [versionsQuery] = useQuery({
diff --git a/packages/web/app/pages/[orgId]/[projectId]/settings.tsx b/packages/web/app/pages/[orgId]/[projectId]/settings.tsx
index 49c3ea4e98..f51c5da25b 100644
--- a/packages/web/app/pages/[orgId]/[projectId]/settings.tsx
+++ b/packages/web/app/pages/[orgId]/[projectId]/settings.tsx
@@ -65,9 +65,7 @@ const GitHubIntegration = ({ gitRepository }: { gitRepository: string }): ReactE
     return <Spinner />;
   }
 
-  const hasGitHubIntegration = integrationQuery.data?.hasGitHubIntegration === true;
-
-  if (hasGitHubIntegration) {
+  if (integrationQuery.data?.gitHubIntegration) {
     return (
       <>
         <form className="flex gap-x-2" onSubmit={handleSubmit}>
@@ -82,7 +80,7 @@ const GitHubIntegration = ({ gitRepository }: { gitRepository: string }): ReactE
             value={values.gitRepository}
             onChange={handleChange}
             onBlur={handleBlur}
-            isInvalid={touched.gitRepository && Boolean(errors.gitRepository)}
+            isInvalid={!!touched.gitRepository && Boolean(errors.gitRepository)}
           />
           <Button type="submit" variant="primary" size="large" className="px-10" disabled={isSubmitting}>
             Save
@@ -90,7 +88,7 @@ const GitHubIntegration = ({ gitRepository }: { gitRepository: string }): ReactE
         </form>
         {touched.gitRepository && (errors.gitRepository || mutation.error) && (
           <div className="mt-2 text-red-500">
-            {errors.gitRepository ?? mutation.error.graphQLErrors[0]?.message ?? mutation.error.message}
+            {errors.gitRepository ?? mutation.error?.graphQLErrors[0]?.message ?? mutation.error?.message}
           </div>
         )}
         {mutation.data?.updateProjectGitRepository.error && (
@@ -195,7 +193,7 @@ const Page = ({
         </form>
         {touched.name && (errors.name || mutation.error) && (
           <div className="mt-2 text-red-500">
-            {errors.name ?? mutation.error.graphQLErrors[0]?.message ?? mutation.error.message}
+            {errors.name ?? mutation.error?.graphQLErrors[0]?.message ?? mutation.error?.message}
           </div>
         )}
         {mutation.data?.updateProjectName.error && (
@@ -206,7 +204,7 @@ const Page = ({
       <Card>
         <Heading className="mb-2">Git Repository</Heading>
         <p className="mb-3 font-light text-gray-300">Connect the project with your Git repository</p>
-        <GitHubIntegration gitRepository={project?.gitRepository} />
+        {project?.gitRepository ? <GitHubIntegration gitRepository={project.gitRepository} /> : null}
       </Card>
 
       {canAccessProject(ProjectAccessScope.Delete, organization.me) && (
diff --git a/packages/web/app/pages/[orgId]/_new.tsx b/packages/web/app/pages/[orgId]/_new.tsx
index a73a6612a9..84782cfc5a 100644
--- a/packages/web/app/pages/[orgId]/_new.tsx
+++ b/packages/web/app/pages/[orgId]/_new.tsx
@@ -28,7 +28,7 @@ const NewPage: FC = () => {
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    wrapperRef.current.scrollIntoView({
+    wrapperRef.current?.scrollIntoView({
       behavior: 'smooth',
     });
   }, [page]);
diff --git a/packages/web/app/pages/[orgId]/index.tsx b/packages/web/app/pages/[orgId]/index.tsx
index b89c0b0f78..be61704b16 100644
--- a/packages/web/app/pages/[orgId]/index.tsx
+++ b/packages/web/app/pages/[orgId]/index.tsx
@@ -94,8 +94,6 @@ export default function ProjectsPage(): ReactElement {
     },
   });
 
-  const isLoading = projectsWithTargetsQuery.fetching;
-
   return (
     <>
       <Title title="Projects" />
@@ -104,9 +102,15 @@ export default function ProjectsPage(): ReactElement {
           <>
             <div className="grow">
               <Heading className="mb-4">Active Projects</Heading>
-              {isLoading || projectsWithTargetsQuery.data.projects.total !== 0 ? (
+              {projectsWithTargetsQuery.data?.projects.total === 0 ? (
+                <EmptyList
+                  title="Hive is waiting for your first project"
+                  description='You can create a project by clicking the "Create Project" button'
+                  docsUrl={`${process.env.NEXT_PUBLIC_DOCS_LINK}/get-started/projects`}
+                />
+              ) : (
                 <div className="grid grid-cols-2 gap-5">
-                  {isLoading
+                  {projectsWithTargetsQuery.fetching
                     ? [1, 2].map(key => (
                         <Card key={key}>
                           <div className="flex gap-x-2">
@@ -120,16 +124,10 @@ export default function ProjectsPage(): ReactElement {
                           <Skeleton visible className="h-7" />
                         </Card>
                       ))
-                    : projectsWithTargetsQuery.data.projects.nodes.map(project => (
+                    : projectsWithTargetsQuery.data?.projects.nodes.map(project => (
                         <ProjectCard key={project.id} project={project} />
                       ))}
                 </div>
-              ) : (
-                <EmptyList
-                  title="Hive is waiting for your first project"
-                  description='You can create a project by clicking the "Create Project" button'
-                  docsUrl={`${process.env.NEXT_PUBLIC_DOCS_LINK}/get-started/projects`}
-                />
               )}
             </div>
 
diff --git a/packages/web/app/pages/[orgId]/members.tsx b/packages/web/app/pages/[orgId]/members.tsx
index 737afbd2f4..c5220f882c 100644
--- a/packages/web/app/pages/[orgId]/members.tsx
+++ b/packages/web/app/pages/[orgId]/members.tsx
@@ -68,8 +68,8 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
     });
   }, [mutate, notify, router.organizationId]);
 
-  const org = organizationMembersQuery.data?.organization.organization;
-  const isPersonal = org && org.type === OrganizationType.Personal;
+  const org = organizationMembersQuery.data?.organization?.organization;
+  const isPersonal = org?.type === OrganizationType.Personal;
   const members = org?.members.nodes;
 
   useEffect(() => {
@@ -84,7 +84,7 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
   if (!org || isPersonal) return null;
 
   const me = meQuery.data?.me;
-  const selectedMember = selectedMemberId && members.find(node => node.id === selectedMemberId);
+  const selectedMember = selectedMemberId ? members?.find(node => node.id === selectedMemberId) : null;
 
   return (
     <>
@@ -124,11 +124,11 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
           <TrashIcon />
         </Button>
       </div>
-      {members.map(node => {
+      {members?.map(node => {
         const IconToUse = authProviderIcons[node.user.provider] ?? KeyIcon;
 
         const isOwner = node.id === org.owner.id;
-        const isMe = node.id === me.id;
+        const isMe = node.id === me?.id;
         const isDisabled = isOwner || isMe;
 
         return (
@@ -140,7 +140,7 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
               checked={checked.includes(node.id)}
               disabled={isDisabled}
             />
-            <Avatar src={isMe ? user.picture : ''} fallback={node.user.displayName[0]} shape="circle" />
+            <Avatar src={isMe ? user?.picture : ''} fallback={node.user.displayName[0]} shape="circle" />
             <div className="grow overflow-hidden">
               <h3 className="line-clamp-1 font-medium">{node.user.displayName}</h3>
               <h4 className="text-sm font-light text-gray-500">{node.user.email}</h4>
diff --git a/packages/web/app/pages/[orgId]/settings.tsx b/packages/web/app/pages/[orgId]/settings.tsx
index 279692b3d3..332c5740e8 100644
--- a/packages/web/app/pages/[orgId]/settings.tsx
+++ b/packages/web/app/pages/[orgId]/settings.tsx
@@ -180,7 +180,7 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
             </Button>
           </form>
           {touched.name && (errors.name || mutation.error) && (
-            <div className="mt-2 text-red-500">{errors.name || mutation.error.message}</div>
+            <div className="mt-2 text-red-500">{errors.name || mutation.error?.message}</div>
           )}
           {mutation.data?.updateOrganizationName?.error && (
             <div className="mt-2 text-red-500">{mutation.data?.updateOrganizationName.error.message}</div>
@@ -213,7 +213,11 @@ const Page = ({ organization }: { organization: OrganizationFieldsFragment }) =>
               <AlertTriangleIcon className="h-5 w-5" />
               This action is not reversible!
             </Tag>
-            <DeleteOrganizationModal isOpen={isModalOpen} toggleModalOpen={toggleModalOpen} />
+            <DeleteOrganizationModal
+              isOpen={isModalOpen}
+              toggleModalOpen={toggleModalOpen}
+              organization={organization}
+            />
           </div>
         </Card>
       )}
diff --git a/packages/web/app/pages/[orgId]/subscription/index.tsx b/packages/web/app/pages/[orgId]/subscription/index.tsx
index 7e05336ea8..6384e8908d 100644
--- a/packages/web/app/pages/[orgId]/subscription/index.tsx
+++ b/packages/web/app/pages/[orgId]/subscription/index.tsx
@@ -26,7 +26,7 @@ const Page = ({
   organization,
 }: {
   organization: OrganizationFieldsFragment & OrgBillingInfoFieldsFragment & OrgRateLimitFieldsFragment;
-}): ReactElement => {
+}): ReactElement | null => {
   const canAccess = useOrganizationAccess({
     scope: OrganizationAccessScope.Settings,
     member: organization?.me,
@@ -81,7 +81,7 @@ const Page = ({
             <OrganizationUsageEstimationView organization={organization} />
           </div>
         </Card>
-        {organization.billingConfiguration?.invoices?.length > 0 && (
+        {organization.billingConfiguration?.invoices?.length && (
           <Card>
             <Heading className="mb-2">Invoices</Heading>
             <div>
diff --git a/packages/web/app/pages/[orgId]/subscription/manage.tsx b/packages/web/app/pages/[orgId]/subscription/manage.tsx
index 262e07d0e9..88d1a65a0c 100644
--- a/packages/web/app/pages/[orgId]/subscription/manage.tsx
+++ b/packages/web/app/pages/[orgId]/subscription/manage.tsx
@@ -30,7 +30,7 @@ const Inner = ({
   organization,
 }: {
   organization: OrganizationFieldsFragment & OrgBillingInfoFieldsFragment;
-}): ReactElement => {
+}): ReactElement | null => {
   const stripe = useStripe();
   const elements = useElements();
   const canAccess = useOrganizationAccess({
@@ -54,8 +54,9 @@ const Inner = ({
     (plan: BillingPlanType) => {
       setPlan(plan);
       if (planSummaryRef.current) {
+        const planSummaryElement = planSummaryRef.current;
         setTimeout(() => {
-          planSummaryRef.current.scrollIntoView({
+          planSummaryElement.scrollIntoView({
             block: 'start',
             behavior: 'smooth',
           });
@@ -64,7 +65,7 @@ const Inner = ({
     },
     [setPlan, planSummaryRef]
   );
-  const [couponCode, setCouponCode] = useState<string | null>(null);
+  const [couponCode, setCouponCode] = useState<string>('');
   const [operationsRateLimit, setOperationsRateLimit] = useState<number>(
     Math.floor(organization.rateLimit.operations / 1_000_000)
   );
@@ -90,18 +91,24 @@ const Inner = ({
   );
 
   useEffect(() => {
-    if (query.data?.billingPlans?.length > 0) {
+    if (query.data?.billingPlans?.length) {
       if (organization.plan !== plan) {
         const actualPlan = query.data.billingPlans.find(v => v.planType === plan);
 
-        setOperationsRateLimit(Math.floor(actualPlan.includedOperationsLimit / 1_000_000));
-        setSchemaPushesLimit(actualPlan.includedSchemaPushLimit);
+        setOperationsRateLimit(Math.floor((actualPlan?.includedOperationsLimit ?? 0) / 1_000_000));
+        setSchemaPushesLimit(actualPlan?.includedSchemaPushLimit ?? 0);
       } else {
-        setOperationsRateLimit(Math.floor(organization.rateLimit.operations / 1_000_000));
+        setOperationsRateLimit(Math.floor((organization.rateLimit.operations ?? 0) / 1_000_000));
         setSchemaPushesLimit(organization.rateLimit.schemaPushes);
       }
     }
-  }, [plan, query.data?.billingPlans]);
+  }, [
+    organization.plan,
+    organization.rateLimit.operations,
+    organization.rateLimit.schemaPushes,
+    plan,
+    query.data?.billingPlans,
+  ]);
 
   if (!canAccess) {
     return null;
@@ -122,10 +129,25 @@ const Inner = ({
     let paymentMethodId: string | null = null;
 
     if (organization.billingConfiguration.paymentMethod === null) {
+      if (stripe === null || elements === null) {
+        // TODO: what to do here?
+        return;
+      }
+      const card = elements.getElement(CardElement);
+
+      if (card === null) {
+        // TODO: what to do here?
+        return;
+      }
       const { paymentMethod } = await stripe.createPaymentMethod({
         type: 'card',
-        card: elements.getElement(CardElement),
+        card,
       });
+
+      if (paymentMethod === undefined) {
+        // TODO: what to do here?
+        return;
+      }
       paymentMethodId = paymentMethod.id;
     }
 
@@ -136,7 +158,7 @@ const Inner = ({
         schemaPushes: schemaPushesRateLimit,
       },
       paymentMethodId: paymentMethodId,
-      couponCode,
+      couponCode: couponCode.trim() === '' ? null : couponCode.trim(),
     });
   };
 
@@ -220,7 +242,8 @@ const Inner = ({
       }
     >
       {result => {
-        const selectedPlan = result.data.billingPlans.find(v => v.planType === plan);
+        // TODO: this is also not safe as billingPlans might be an empty list.
+        const selectedPlan = result.data.billingPlans.find(v => v.planType === plan) ?? result.data.billingPlans[0];
 
         return (
           <div className="flex w-full flex-col gap-5">
@@ -311,7 +334,7 @@ const Inner = ({
                           <Input
                             className="w-full"
                             size="medium"
-                            value={couponCode}
+                            value={couponCode ?? ''}
                             onChange={e => setCouponCode(e.target.value)}
                             placeholder="Code"
                           />
diff --git a/packages/web/app/pages/api/proxy.ts b/packages/web/app/pages/api/proxy.ts
index 82d6fd12f3..8047d69189 100644
--- a/packages/web/app/pages/api/proxy.ts
+++ b/packages/web/app/pages/api/proxy.ts
@@ -64,7 +64,7 @@ async function graphql(req: NextApiRequest, res: NextApiResponse) {
     op: 'app.accessToken',
   });
 
-  let accessToken: string;
+  let accessToken: string | undefined;
 
   try {
     const result = await auth0.getAccessToken(req, res);
diff --git a/packages/web/app/pages/index.tsx b/packages/web/app/pages/index.tsx
index 380b228aa5..8b8f60d1c3 100644
--- a/packages/web/app/pages/index.tsx
+++ b/packages/web/app/pages/index.tsx
@@ -11,7 +11,7 @@ import { LAST_VISITED_ORG_KEY } from '@/constants';
 
 export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
   try {
-    let orgId: string;
+    let orgId: string | null = null;
     const cookies = new Cookies(req, res);
     const lastOrgIdInCookies = cookies.get(LAST_VISITED_ORG_KEY);
 
@@ -19,17 +19,22 @@ export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
       orgId = lastOrgIdInCookies;
     } else {
       const { host, cookie } = req.headers;
-      const protocol = host.startsWith('localhost') ? 'http' : 'https';
+      const protocol = host?.startsWith('localhost') ? 'http' : 'https';
       const query = stripIgnoredCharacters(print(OrganizationsDocument));
 
+      const headers: Record<string, string> = {
+        'content-type': 'application/json',
+        Accept: 'application/json',
+      };
+
+      if (cookie != null) {
+        headers['cookie'] = cookie;
+      }
+
       const response = await fetch(`${protocol}://${host}/api/proxy`, {
         method: 'POST',
         body: JSON.stringify({ query, operationName: 'organizations' }),
-        headers: {
-          cookie,
-          'content-type': 'application/json',
-          Accept: 'application/json',
-        },
+        headers,
       });
 
       const result: ExecutionResult<OrganizationsQuery> = await response.json();
@@ -64,8 +69,9 @@ export default function Home(): ReactElement {
     // Just in case server-side redirect wasn't working
     if (query.data) {
       const org = query.data.organizations.nodes.find(node => node.type === OrganizationType.Personal);
-
-      router.visitOrganization({ organizationId: org.cleanId });
+      if (org) {
+        router.visitOrganization({ organizationId: org.cleanId });
+      }
     }
   }, [router, query.data]);
 
diff --git a/packages/web/app/pages/join/[inviteCode].tsx b/packages/web/app/pages/join/[inviteCode].tsx
index ce4205191b..f7f816c86e 100644
--- a/packages/web/app/pages/join/[inviteCode].tsx
+++ b/packages/web/app/pages/join/[inviteCode].tsx
@@ -36,17 +36,19 @@ export default function OrganizationPage() {
     mutate({
       code,
     }).then(result => {
-      if (result.data.joinOrganization.__typename === 'OrganizationInvitationError') {
-        notify(result.data.joinOrganization.message, 'error');
-      } else {
-        const org = result.data.joinOrganization.organization;
-        notify(`You joined "${org.name}" organization`, 'success');
-        track('JOIN_ORGANIZATION_ATTEMPT_SUCCESS', {
-          code,
-        });
-        router.visitOrganization({
-          organizationId: org.cleanId,
-        });
+      if (result.data) {
+        if (result.data.joinOrganization.__typename === 'OrganizationInvitationError') {
+          notify(result.data.joinOrganization.message, 'error');
+        } else {
+          const org = result.data.joinOrganization.organization;
+          notify(`You joined "${org.name}" organization`, 'success');
+          track('JOIN_ORGANIZATION_ATTEMPT_SUCCESS', {
+            code,
+          });
+          router.visitOrganization({
+            organizationId: org.cleanId,
+          });
+        }
       }
     });
   }, [mutate, code, router, notify]);
@@ -62,8 +64,12 @@ export default function OrganizationPage() {
     <>
       <Title title="Invitation" />
       <DataWrapper query={query}>
-        {() => {
-          const invitation = query.data.organizationByInviteCode;
+        {({ data }) => {
+          if (data.organizationByInviteCode == null) {
+            return null;
+          }
+          const invitation = data.organizationByInviteCode;
+
           if (invitation.__typename === 'OrganizationInvitationError') {
             return (
               <Center>
diff --git a/packages/web/app/pages/settings.tsx b/packages/web/app/pages/settings.tsx
index 526a0cd805..dcc1c5b2e7 100644
--- a/packages/web/app/pages/settings.tsx
+++ b/packages/web/app/pages/settings.tsx
@@ -53,27 +53,12 @@ const SettingsPage: FC = () => {
         <header className="container flex items-center pb-5">
           <div className="mr-4 rounded-full">
             <Avatar
-              src={user.picture}
+              src={user?.picture ?? null}
               alt="Your profile photo"
               shape="circle"
-              fallback={me?.displayName[0]}
+              fallback={me?.displayName[0] ?? '?'}
               className="!h-[94px] !w-[94px] text-4xl"
             />
-            {/* TODO: changing profile photo currently unavailable */}
-            {/*<div*/}
-            {/*  tw="*/}
-            {/*  opacity-0*/}
-            {/*  absolute inset-0*/}
-            {/*  w-full h-full*/}
-            {/*  flex items-center justify-center*/}
-            {/*  rounded-full*/}
-            {/*  bg-[#0B0D1199]*/}
-            {/*  hover:opacity-100*/}
-            {/*  transition-opacity duration-200*/}
-            {/*"*/}
-            {/*>*/}
-            {/*  <CameraIcon />*/}
-            {/*</div>*/}
           </div>
           <div className="overflow-hidden">
             <Heading size="2xl" className="line-clamp-1">
diff --git a/packages/web/app/src/components/admin/AdminStats.tsx b/packages/web/app/src/components/admin/AdminStats.tsx
index 7970fcfb8f..a5ab82ed3b 100644
--- a/packages/web/app/src/components/admin/AdminStats.tsx
+++ b/packages/web/app/src/components/admin/AdminStats.tsx
@@ -445,7 +445,7 @@ export const AdminStats: React.FC<{
     },
   });
 
-  const data = React.useMemo(() => {
+  const tableData = React.useMemo(() => {
     return (query.data?.admin?.stats.organizations ?? [])
       .filter(node => filterStats(node, filters))
       .map(node => ({
@@ -463,19 +463,19 @@ export const AdminStats: React.FC<{
 
   const overall = React.useMemo(() => {
     return {
-      users: data.reduce((total, node) => (node.type === 'PERSONAL' ? total + 1 : total), 0),
-      organizations: data.length,
-      projects: sumByKey(data, 'projects'),
-      targets: sumByKey(data, 'targets'),
-      versions: sumByKey(data, 'versions'),
-      persistedOperations: sumByKey(data, 'persistedOperations'),
-      operations: sumByKey(data, 'operations'),
+      users: tableData.reduce((total, node) => (node.type === 'PERSONAL' ? total + 1 : total), 0),
+      organizations: tableData.length,
+      projects: sumByKey(tableData, 'projects'),
+      targets: sumByKey(tableData, 'targets'),
+      versions: sumByKey(tableData, 'versions'),
+      persistedOperations: sumByKey(tableData, 'persistedOperations'),
+      operations: sumByKey(tableData, 'operations'),
     };
-  }, [data]);
+  }, [tableData]);
 
   return (
     <DataWrapper query={query}>
-      {() => (
+      {({ data }) => (
         <div tw="flex flex-col space-y-6">
           <StatGroup tw="bg-gray-100 dark:bg-gray-800 px-3 py-2">
             <OverallStat label="Users" value={overall.users} />
@@ -486,8 +486,8 @@ export const AdminStats: React.FC<{
             <OverallStat label="Persisted Ops" value={overall.persistedOperations} />
             <OverallStat label="Collected Ops" value={overall.operations} />
           </StatGroup>
-          <CollectedOperationsOverTime last={last} operations={query.data?.admin.stats.general.operationsOverTime} />
-          <OrganizationTable data={data} />
+          <CollectedOperationsOverTime last={last} operations={data.admin.stats.general.operationsOverTime} />
+          <OrganizationTable data={tableData} />
         </div>
       )}
     </DataWrapper>
diff --git a/packages/web/app/src/components/auth/AuthProvider.tsx b/packages/web/app/src/components/auth/AuthProvider.tsx
index ae865d2f4d..7709d39f20 100644
--- a/packages/web/app/src/components/auth/AuthProvider.tsx
+++ b/packages/web/app/src/components/auth/AuthProvider.tsx
@@ -22,13 +22,13 @@ declare global {
 function identifyOnCrisp(user: UserProfile): void {
   const crisp = globalThis.window.$crisp;
   if (crisp) {
-    pushIfNotEmpty(crisp, 'user:email', user.email);
-    pushIfNotEmpty(crisp, 'user:nickname', user.name || user.nickname);
-    pushIfNotEmpty(crisp, 'user:avatar', user.picture);
+    pushIfNotEmpty(crisp, 'user:email', user?.email);
+    pushIfNotEmpty(crisp, 'user:nickname', user?.name ?? user?.nickname);
+    pushIfNotEmpty(crisp, 'user:avatar', user?.picture);
   }
 }
 
-function pushIfNotEmpty(crisp: any, key: string, value: string): void {
+function pushIfNotEmpty(crisp: any, key: string, value: string | undefined | null): void {
   if (value) {
     crisp.push(['set', key, value]);
   }
diff --git a/packages/web/app/src/components/common/DataWrapper.tsx b/packages/web/app/src/components/common/DataWrapper.tsx
index d0211fd734..5ba87698c1 100644
--- a/packages/web/app/src/components/common/DataWrapper.tsx
+++ b/packages/web/app/src/components/common/DataWrapper.tsx
@@ -67,6 +67,10 @@ export class DataWrapper<TData, TVariables> extends React.Component<{
       return <QueryError error={query.error} />;
     }
 
+    if (query.data == null) {
+      return this.props.spinnerComponent || <Spinner />;
+    }
+
     return <>{children({ data: query.data })}</>;
   }
 }
diff --git a/packages/web/app/src/components/common/Feedback.tsx b/packages/web/app/src/components/common/Feedback.tsx
index e5caf38b81..0cb0325c56 100644
--- a/packages/web/app/src/components/common/Feedback.tsx
+++ b/packages/web/app/src/components/common/Feedback.tsx
@@ -60,7 +60,13 @@ export const Feedback: React.FC<{
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnEsc={false} closeOnOverlayClick={false}>
       <ModalOverlay />
-      <ModalContent as="form" onSubmit={formik.handleSubmit}>
+      <ModalContent
+        as="form"
+        // Chakra does not let us use the correct type signature/formik is to strict in it's types.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onSubmit={formik.handleSubmit}
+      >
         <ModalHeader>{state === 'FORM' ? 'Send feedback' : 'We got your feedback'}</ModalHeader>
         <ModalBody>
           {state === 'FORM' ? (
diff --git a/packages/web/app/src/components/common/LoadingAPI.tsx b/packages/web/app/src/components/common/LoadingAPI.tsx
index a9da900b98..2170159d2d 100644
--- a/packages/web/app/src/components/common/LoadingAPI.tsx
+++ b/packages/web/app/src/components/common/LoadingAPI.tsx
@@ -1,25 +1,23 @@
 import { Progress } from '@chakra-ui/react';
-import { useMemo, memo } from 'react';
+import React from 'react';
 import { useInflightRequests } from '@/lib/urql-exchanges/state';
 
-export const LoadingAPIIndicator = memo(() => {
+export const LoadingAPIIndicator = React.memo(() => {
   const inflightRequests = useInflightRequests();
   const isFetching = inflightRequests > 0;
 
-  return useMemo(() => {
-    return (
-      isFetching && (
-        <Progress
-          zIndex={10_000}
-          position="fixed"
-          top="0px"
-          left="0px"
-          isIndeterminate
-          width="100vw"
-          height="5px"
-          colorScheme="yellow"
-        />
-      )
-    );
+  return React.useMemo(() => {
+    return isFetching ? (
+      <Progress
+        zIndex={10_000}
+        position="fixed"
+        top="0px"
+        left="0px"
+        isIndeterminate
+        width="100vw"
+        height="5px"
+        colorScheme="yellow"
+      />
+    ) : null;
   }, [isFetching]);
 });
diff --git a/packages/web/app/src/components/common/Navigation.tsx b/packages/web/app/src/components/common/Navigation.tsx
index fc07152e66..323803b6a9 100644
--- a/packages/web/app/src/components/common/Navigation.tsx
+++ b/packages/web/app/src/components/common/Navigation.tsx
@@ -137,13 +137,13 @@ export function Navigation() {
             <div tw="hidden sm:block sm:ml-6">
               <div tw="flex space-x-4 items-center ">
                 {organization && <OrganizationSwitcher organizationId={organization} />}
-                {project && (
+                {project && organization && (
                   <>
                     <div tw="text-xl text-gray-200 font-normal select-none">/</div>
                     <ProjectSwitcher organizationId={organization} projectId={project} />
                   </>
                 )}
-                {project && target && (
+                {project && target && organization && (
                   <>
                     <div tw="text-xl text-gray-200 font-normal select-none">/</div>
                     <TargetSwitcher organizationId={organization} projectId={project} targetId={target} />
@@ -166,15 +166,17 @@ export function Navigation() {
                   as={Button}
                   tw="font-normal"
                   variant="ghost"
-                  rightIcon={<img tw="h-6 w-6 rounded-full" src={user.picture} alt={user.name} />}
+                  rightIcon={
+                    <img tw="h-6 w-6 rounded-full" src={user?.picture ?? undefined} alt={user?.name ?? undefined} />
+                  }
                 >
-                  {me?.displayName ?? user.nickname}
+                  {me?.displayName ?? user?.nickname}
                 </MenuButton>
                 <MenuList bg={dropdownBgColor} color={dropdownTextColor}>
                   {me && (
                     <>
                       <MenuItem onClick={settings.onOpen}>Settings</MenuItem>
-                      <UserSettings me={meQuery.data?.me} isOpen={settings.isOpen} onClose={settings.onClose} />
+                      <UserSettings me={me} isOpen={settings.isOpen} onClose={settings.onClose} />
                     </>
                   )}
                   <MenuItem as="a" href="https://calendly.com/d/zjjt-g8zd/hive-feedback">
diff --git a/packages/web/app/src/components/common/UserSettings.tsx b/packages/web/app/src/components/common/UserSettings.tsx
index ce99051bb3..9fa70dc2b2 100644
--- a/packages/web/app/src/components/common/UserSettings.tsx
+++ b/packages/web/app/src/components/common/UserSettings.tsx
@@ -60,11 +60,11 @@ export const UserSettings: React.FC<{
           input: values,
         });
 
-        if (data.updateMe) {
+        if (data?.updateMe?.ok) {
           formik.resetForm({
             values: {
-              fullName: data.updateMe.ok?.updatedUser.fullName,
-              displayName: data.updateMe.ok?.updatedUser.displayName,
+              fullName: data.updateMe.ok.updatedUser.fullName,
+              displayName: data.updateMe.ok.updatedUser.displayName,
             },
           });
         } else {
@@ -84,7 +84,13 @@ export const UserSettings: React.FC<{
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="xl" closeOnEsc={false} closeOnOverlayClick={false}>
       <ModalOverlay />
-      <ModalContent as="form" onSubmit={formik.handleSubmit}>
+      <ModalContent
+        as="form"
+        // Chakra does not let us use the correct type signature/formik is to strict in it's types.
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onSubmit={formik.handleSubmit}
+      >
         <ModalHeader>User Settings</ModalHeader>
         <ModalBody>
           <div tw="space-y-6">
diff --git a/packages/web/app/src/components/layouts/organization.tsx b/packages/web/app/src/components/layouts/organization.tsx
index 6b4925debb..f74df38c0b 100644
--- a/packages/web/app/src/components/layouts/organization.tsx
+++ b/packages/web/app/src/components/layouts/organization.tsx
@@ -56,7 +56,7 @@ export function OrganizationLayout({
     includeBilling?: boolean;
     includeRateLimit?: boolean;
   }
->): ReactElement {
+>): ReactElement | null {
   const router = useRouteSelector();
   const { push } = useRouter();
   const [isModalOpen, setModalOpen] = useState(false);
@@ -86,17 +86,23 @@ export function OrganizationLayout({
   }, [organizationQuery.error, router]);
 
   useOrganizationAccess({
-    member: organizationQuery.data?.organization.organization?.me,
+    member: organizationQuery.data?.organization?.organization?.me,
     scope: OrganizationAccessScope.Read,
     redirect: true,
   });
 
-  if (organizationQuery.fetching || organizationQuery.error) return null;
+  if (organizationQuery.fetching || organizationQuery.error) {
+    return null;
+  }
 
-  const organization = organizationQuery.data?.organization.organization;
-  const me = organization.me;
+  const organization = organizationQuery.data?.organization?.organization;
+  const me = organization?.me;
   const isRegularOrg = !organization || organization.type === OrganizationType.Regular;
 
+  if (!organization || !me) {
+    return null;
+  }
+
   if (!value) {
     return <>{children({ organization })}</>;
   }
diff --git a/packages/web/app/src/components/layouts/project.tsx b/packages/web/app/src/components/layouts/project.tsx
index 7c44dd68c4..37027f982d 100644
--- a/packages/web/app/src/components/layouts/project.tsx
+++ b/packages/web/app/src/components/layouts/project.tsx
@@ -24,7 +24,7 @@ export const ProjectLayout = ({
   children(props: { project: ProjectFieldsFragment; organization: OrganizationFieldsFragment }): ReactNode;
   value: 'targets' | 'alerts' | 'settings';
   className?: string;
-}): ReactElement => {
+}): ReactElement | null => {
   const router = useRouteSelector();
   const [isModalOpen, setModalOpen] = useState(false);
   const toggleModalOpen = useCallback(() => {
@@ -59,16 +59,21 @@ export const ProjectLayout = ({
 
   useProjectAccess({
     scope: ProjectAccessScope.Read,
-    member: projectQuery.data?.organization.organization.me,
+    member: projectQuery.data?.organization?.organization.me,
     redirect: true,
   });
 
-  if (projectQuery.fetching || projectQuery.error) return null;
+  if (projectQuery.fetching || projectQuery.error) {
+    return null;
+  }
 
   const project = projectQuery.data?.project;
-  const org = projectQuery.data?.organization.organization;
+  const org = projectQuery.data?.organization?.organization;
   const projects = projectsQuery.data?.projects;
-  const me = org.me;
+
+  if (!org || !project) {
+    return null;
+  }
 
   return (
     <>
@@ -125,14 +130,14 @@ export const ProjectLayout = ({
               <a>Targets</a>
             </Tabs.Trigger>
           </NextLink>
-          {canAccessProject(ProjectAccessScope.Alerts, me) && (
+          {canAccessProject(ProjectAccessScope.Alerts, org.me) && (
             <NextLink passHref href={`/${orgId}/${projectId}/alerts`}>
               <Tabs.Trigger value={TabValue.Alerts} asChild>
                 <a>Alerts</a>
               </Tabs.Trigger>
             </NextLink>
           )}
-          {canAccessProject(ProjectAccessScope.Settings, me) && (
+          {canAccessProject(ProjectAccessScope.Settings, org.me) && (
             <NextLink passHref href={`/${orgId}/${projectId}/settings`}>
               <Tabs.Trigger value={TabValue.Settings} asChild>
                 <a>Settings</a>
diff --git a/packages/web/app/src/components/layouts/target.tsx b/packages/web/app/src/components/layouts/target.tsx
index 9955a7f475..8165340616 100644
--- a/packages/web/app/src/components/layouts/target.tsx
+++ b/packages/web/app/src/components/layouts/target.tsx
@@ -38,7 +38,7 @@ export const TargetLayout = ({
   value: 'schema' | 'history' | 'operations' | 'laboratory' | 'settings';
   className?: string;
   connect?: ReactNode;
-}): ReactElement => {
+}): ReactElement | null => {
   const [isModalOpen, setModalOpen] = useState(false);
   const toggleModalOpen = useCallback(() => {
     setModalOpen(prevOpen => !prevOpen);
@@ -70,7 +70,7 @@ export const TargetLayout = ({
 
   const targets = targetsQuery.data?.targets;
   const target = targets?.nodes.find(node => node.cleanId === targetId);
-  const org = projectQuery.data?.organization.organization;
+  const org = projectQuery.data?.organization?.organization;
   const project = projectQuery.data?.project;
   const me = org?.me;
 
@@ -105,6 +105,10 @@ export const TargetLayout = ({
     return <QueryError error={projectQuery.error || targetsQuery.error} />;
   }
 
+  if (!org || !project || !target) {
+    return null;
+  }
+
   return (
     <>
       <SubHeader>
diff --git a/packages/web/app/src/components/organization/Permissions.tsx b/packages/web/app/src/components/organization/Permissions.tsx
index 5e46e8ec0f..e688babdea 100644
--- a/packages/web/app/src/components/organization/Permissions.tsx
+++ b/packages/web/app/src/components/organization/Permissions.tsx
@@ -47,6 +47,10 @@ function matchScope<T>(list: readonly T[], defaultValue: string, lowerPriority?:
   return defaultValue;
 }
 
+function isBoolean(value: unknown): value is boolean {
+  return typeof value === 'boolean';
+}
+
 function PermissionsSpaceInner(props: Props<OrganizationAccessScope>): React.ReactElement<any, any>;
 function PermissionsSpaceInner(props: Props<ProjectAccessScope>): React.ReactElement<any, any>;
 function PermissionsSpaceInner(props: Props<TargetAccessScope>): React.ReactElement<any, any>;
@@ -62,13 +66,15 @@ function PermissionsSpaceInner<T extends OrganizationAccessScope | ProjectAccess
         <div tw="divide-y-2 divide-gray-100">
           {scopes.map(scope => {
             const possibleScope = [scope.mapping['read-only'], scope.mapping['read-write']].filter(Boolean);
-            const canManageScope = possibleScope.some(checkAccess);
+            const canManageScope = possibleScope.some(isBoolean);
 
             if (!canManageScope) {
               return null;
             }
 
-            const hasReadOnly = !!scope.mapping['read-only'];
+            const readOnlyScope = scope.mapping['read-only'];
+            const hasReadOnly = typeof readOnlyScope !== 'undefined';
+
             const selectedScope = matchScope(
               initialScopes,
               NoAccess,
@@ -103,11 +109,11 @@ function PermissionsSpaceInner<T extends OrganizationAccessScope | ProjectAccess
 
                           if (hasReadOnly) {
                             // Include read-only as well
-                            newScopes.push(scope.mapping['read-only']);
+                            newScopes.push(readOnlyScope);
                           }
-                        } else {
+                        } else if (readOnlyScope) {
                           // just read-only
-                          newScopes.push(scope.mapping['read-only']);
+                          newScopes.push(readOnlyScope);
                         }
 
                         onChange(newScopes);
diff --git a/packages/web/app/src/components/organization/Switcher.tsx b/packages/web/app/src/components/organization/Switcher.tsx
index ece6ad216d..863ea874c4 100644
--- a/packages/web/app/src/components/organization/Switcher.tsx
+++ b/packages/web/app/src/components/organization/Switcher.tsx
@@ -13,7 +13,7 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react';
 import 'twin.macro';
-import { OrganizationsDocument, OrganizationType } from '@/graphql';
+import { OrganizationsDocument, OrganizationsQuery, OrganizationType } from '@/graphql';
 import { OrganizationCreator } from './Creator';
 import { useRouteSelector } from '@/lib/hooks/use-route-selector';
 
@@ -25,63 +25,57 @@ export const OrganizationSwitcher: React.FC<{
     query: OrganizationsDocument,
   });
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const menu = React.useMemo<{
-    personal: Array<{
-      key: string;
-      label: string;
-    }>;
-    organizations: Array<{
-      key: string;
-      label: string;
-    }>;
-  }>(() => {
+  const menu = React.useMemo(() => {
     if (!data?.organizations?.nodes) {
-      return {
-        personal: [],
-        organizations: [],
-      };
+      return null;
     }
 
-    const menu: {
-      personal: Array<{ key: string; label: string }>;
-      organizations: Array<{ key: string; label: string }>;
-    } = {
-      personal: [],
-      organizations: [],
-    };
+    const personal: Array<{ key: string; label: string }> = [];
+    const organizations: Array<{ key: string; label: string }> = [];
+    let currentOrganization: null | OrganizationsQuery['organizations']['nodes'][number] = null;
 
-    data.organizations.nodes.forEach(node => {
+    for (const node of data.organizations.nodes) {
+      if (node.cleanId === organizationId) {
+        currentOrganization = node;
+      }
       if (node.type === OrganizationType.Personal) {
-        return menu.personal.push({
+        personal.push({
           key: node.cleanId,
           label: node.name,
         });
+        continue;
       }
 
-      menu.organizations.push({
+      organizations.push({
         key: node.cleanId,
         label: node.name,
       });
-    });
+    }
 
-    return menu;
+    if (currentOrganization === null) {
+      return null;
+    }
+
+    return {
+      personal,
+      organizations,
+      currentOrganization,
+    };
   }, [data]);
 
   const dropdownBgColor = useColorModeValue('white', 'gray.900');
   const dropdownTextColor = useColorModeValue('gray.700', 'gray.300');
 
-  if (!menu.personal.length) {
+  if (!menu) {
     return null;
   }
 
-  const currentOrganization = data.organizations.nodes.find(node => node.cleanId === organizationId);
-
   return (
     <>
       <OrganizationCreator isOpen={isOpen} onClose={onClose} />
       <Menu autoSelect={false}>
         <MenuButton size="sm" as={Button} rightIcon={<VscChevronDown />} variant="ghost" tw="font-normal">
-          {currentOrganization.name}
+          {menu.currentOrganization.name}
         </MenuButton>
         <MenuList bg={dropdownBgColor} color={dropdownTextColor}>
           {menu.personal.length && (
diff --git a/packages/web/app/src/components/organization/billing/Billing.tsx b/packages/web/app/src/components/organization/billing/Billing.tsx
index 3d2690662d..d38b150f5b 100644
--- a/packages/web/app/src/components/organization/billing/Billing.tsx
+++ b/packages/web/app/src/components/organization/billing/Billing.tsx
@@ -17,6 +17,10 @@ export const BillingView: React.FC<{
       {result => {
         const plan = result.data.billingPlans.find(v => v.planType === organization.plan);
 
+        if (plan == null) {
+          return null;
+        }
+
         return (
           <PlanSummary
             retentionInDays={organization.rateLimit.retentionInDays}
diff --git a/packages/web/app/src/components/organization/billing/BillingPaymentMethod.tsx b/packages/web/app/src/components/organization/billing/BillingPaymentMethod.tsx
index 239e85eac3..8f88447062 100644
--- a/packages/web/app/src/components/organization/billing/BillingPaymentMethod.tsx
+++ b/packages/web/app/src/components/organization/billing/BillingPaymentMethod.tsx
@@ -15,7 +15,7 @@ export const BillingPaymentMethod = ({
   className?: string;
   organizationBilling: OrgBillingInfoFieldsFragment;
   onValidationChange?: (isValid: boolean) => void;
-}): ReactElement => {
+}): ReactElement | null => {
   if (plan !== 'PRO') {
     return null;
   }
diff --git a/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx b/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
index 15b6142017..b40b396ae3 100644
--- a/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
+++ b/packages/web/app/src/components/organization/billing/BillingPlanPicker.tsx
@@ -123,7 +123,6 @@ const Plan = (plan: {
 
 const billingPlanLookUpMap = {
   [BillingPlanType.Hobby]: 'Free',
-  [BillingPlanType.Enterprise]: 'Contact Us',
 } as Record<BillingPlanType, string | undefined>;
 
 export const BillingPlanPicker = ({
@@ -144,7 +143,7 @@ export const BillingPlanPicker = ({
           <Plan
             key={plan.id}
             name={plan.name}
-            price={billingPlanLookUpMap[plan.planType] ?? plan.basePrice}
+            price={billingPlanLookUpMap[plan.planType] ?? plan.basePrice ?? 'Contact Us'}
             isActive={activePlan === plan.planType}
             features={planCollection[plan.planType].features}
             description={planCollection[plan.planType].description}
diff --git a/packages/web/app/src/components/organization/billing/InvoicesList.tsx b/packages/web/app/src/components/organization/billing/InvoicesList.tsx
index 79f6b9d008..5155f194d6 100644
--- a/packages/web/app/src/components/organization/billing/InvoicesList.tsx
+++ b/packages/web/app/src/components/organization/billing/InvoicesList.tsx
@@ -7,7 +7,7 @@ import { CurrencyFormatter } from './helpers';
 export const InvoicesList: React.FC<{
   organization: OrganizationFieldsFragment & OrgBillingInfoFieldsFragment;
 }> = ({ organization }) => {
-  if (organization.billingConfiguration?.invoices?.length === 0) {
+  if (null == organization.billingConfiguration?.invoices?.length) {
     return null;
   }
 
diff --git a/packages/web/app/src/components/organization/billing/PlanSummary.tsx b/packages/web/app/src/components/organization/billing/PlanSummary.tsx
index 39826b5215..b56542d423 100644
--- a/packages/web/app/src/components/organization/billing/PlanSummary.tsx
+++ b/packages/web/app/src/components/organization/billing/PlanSummary.tsx
@@ -25,12 +25,12 @@ const PriceEstimationTable = ({
   operationsRateLimit: number;
   schemaPushesRateLimit: number;
 }): ReactElement => {
-  const includedOperationsInMillions = plan.includedOperationsLimit / 1_000_000;
+  const includedOperationsInMillions = (plan.includedOperationsLimit ?? 0) / 1_000_000;
   const additionalOperations = Math.max(0, operationsRateLimit - includedOperationsInMillions);
-  const operationsTotal = plan.pricePerOperationsUnit * additionalOperations;
-  const additionalSchemaPushes = Math.max(0, schemaPushesRateLimit - plan.includedSchemaPushLimit);
-  const schemaTotal = plan.pricePerSchemaPushUnit * additionalSchemaPushes;
-  const total = plan.basePrice + operationsTotal + schemaTotal;
+  const operationsTotal = (plan.pricePerOperationsUnit ?? 0) * additionalOperations;
+  const additionalSchemaPushes = Math.max(0, schemaPushesRateLimit - (plan.includedSchemaPushLimit ?? 0));
+  const schemaTotal = (plan.pricePerSchemaPushUnit ?? 0) * additionalSchemaPushes;
+  const total = (plan.basePrice ?? 0) + operationsTotal + schemaTotal;
 
   return (
     <Table size="sm">
@@ -48,8 +48,8 @@ const PriceEstimationTable = ({
             Base price <span className="text-gray-500">(unlimited seats)</span>
           </Td>
           <Td isNumeric />
-          <Td isNumeric>{CurrencyFormatter.format(plan.basePrice)}</Td>
-          <Td isNumeric>{CurrencyFormatter.format(plan.basePrice)}</Td>
+          <Td isNumeric>{CurrencyFormatter.format(plan.basePrice ?? 0)}</Td>
+          <Td isNumeric>{CurrencyFormatter.format(plan.basePrice ?? 0)}</Td>
         </Tr>
         <Tr>
           <Td>
@@ -71,7 +71,7 @@ const PriceEstimationTable = ({
           <Tr>
             <Td>Additional Operations</Td>
             <Td isNumeric>{additionalOperations}M</Td>
-            <Td isNumeric>{CurrencyFormatter.format(plan.pricePerOperationsUnit)}</Td>
+            <Td isNumeric>{CurrencyFormatter.format(plan.pricePerOperationsUnit ?? 0)}</Td>
             <Td isNumeric>{CurrencyFormatter.format(operationsTotal)}</Td>
           </Tr>
         )}
@@ -79,7 +79,7 @@ const PriceEstimationTable = ({
           <Tr>
             <Td>Additional Schema Pushes</Td>
             <Td isNumeric>{additionalSchemaPushes}</Td>
-            <Td isNumeric>{CurrencyFormatter.format(plan.pricePerSchemaPushUnit)}</Td>
+            <Td isNumeric>{CurrencyFormatter.format(plan.pricePerSchemaPushUnit ?? 0)}</Td>
             <Td isNumeric>{CurrencyFormatter.format(schemaTotal)}</Td>
           </Tr>
         )}
diff --git a/packages/web/app/src/components/project/Switcher.tsx b/packages/web/app/src/components/project/Switcher.tsx
index 52be448970..c13113f29b 100644
--- a/packages/web/app/src/components/project/Switcher.tsx
+++ b/packages/web/app/src/components/project/Switcher.tsx
@@ -20,44 +20,45 @@ export const ProjectSwitcher: React.FC<{
       },
     },
   });
-  const items = React.useMemo(() => {
+  const refinedData = React.useMemo(() => {
     if (!data?.projects?.nodes) {
-      return [];
+      return null;
     }
 
-    return data.projects.nodes.map(node => ({
-      key: node.cleanId,
-      label: node.name,
-    }));
+    const currentProject = data?.projects?.nodes.find(node => node.cleanId === projectId);
+
+    if (!currentProject) {
+      return null;
+    }
+
+    return { items: data.projects.nodes, currentProject };
   }, [data]);
 
   const dropdownBgColor = useColorModeValue('white', 'gray.900');
   const dropdownTextColor = useColorModeValue('gray.700', 'gray.300');
 
-  if (!items.length) {
+  if (refinedData === null) {
     return null;
   }
 
-  const currentProject = data.projects.nodes.find(node => node.cleanId === projectId);
-
   return (
     <Menu autoSelect={false}>
       <MenuButton size="sm" as={Button} rightIcon={<VscChevronDown />} variant="ghost" tw="font-normal">
-        {currentProject.name}
+        {refinedData.currentProject.name}
       </MenuButton>
       <MenuList bg={dropdownBgColor} color={dropdownTextColor}>
-        {items.map(item => {
+        {refinedData.items.map(item => {
           return (
             <MenuItem
               onClick={() => {
                 router.visitProject({
                   organizationId: organizationId,
-                  projectId: item.key,
+                  projectId: item.cleanId,
                 });
               }}
-              key={item.key}
+              key={item.cleanId}
             >
-              {item.label}
+              {item.name}
             </MenuItem>
           );
         })}
diff --git a/packages/web/app/src/components/target/Switcher.tsx b/packages/web/app/src/components/target/Switcher.tsx
index 0b61263e65..45f8bffdf2 100644
--- a/packages/web/app/src/components/target/Switcher.tsx
+++ b/packages/web/app/src/components/target/Switcher.tsx
@@ -22,45 +22,37 @@ export const TargetSwitcher: React.FC<{
       },
     },
   });
-  const items = React.useMemo(() => {
-    if (!data?.targets?.nodes) {
-      return [];
-    }
 
-    return data.targets.nodes.map(node => ({
-      key: node.cleanId,
-      label: node.name,
-    }));
+  const currentTarget = React.useMemo(() => {
+    return data?.targets.nodes.find(node => node.cleanId === targetId);
   }, [data]);
 
   const dropdownBgColor = useColorModeValue('white', 'gray.900');
   const dropdownTextColor = useColorModeValue('gray.700', 'gray.300');
 
-  if (!items.length) {
+  if (!currentTarget || !data?.targets.nodes.length) {
     return null;
   }
 
-  const currentTarget = data.targets.nodes.find(node => node.cleanId === targetId);
-
   return (
     <Menu autoSelect={false}>
       <MenuButton size="sm" as={Button} rightIcon={<VscChevronDown />} variant="ghost" tw="font-normal">
         {currentTarget.name}
       </MenuButton>
       <MenuList bg={dropdownBgColor} color={dropdownTextColor}>
-        {items.map(item => {
+        {data.targets.nodes.map(item => {
           return (
             <MenuItem
               onClick={() => {
                 router.visitTarget({
                   organizationId,
                   projectId,
-                  targetId: item.key,
+                  targetId: item.cleanId,
                 });
               }}
-              key={item.key}
+              key={item.cleanId}
             >
-              {item.label}
+              {item.name}
             </MenuItem>
           );
         })}
diff --git a/packages/web/app/src/components/target/operations/Filters.tsx b/packages/web/app/src/components/target/operations/Filters.tsx
index 1a1851057c..e65b6f28f3 100644
--- a/packages/web/app/src/components/target/operations/Filters.tsx
+++ b/packages/web/app/src/components/target/operations/Filters.tsx
@@ -34,9 +34,22 @@ const OperationsFilter: React.FC<{
   operations: readonly OperationStatsFieldsFragment[];
   selected?: string[];
 }> = ({ onClose, isOpen, onFilter, focusRef, operations, selected }) => {
-  const [selectedItems, setSelectedItems] = React.useState<string[]>(
-    selected?.length > 0 ? selected : operations.map(op => op.operationHash)
-  );
+  function getOperationHashes() {
+    const items: Array<string> = [];
+    for (const op of operations) {
+      if (op.operationHash) {
+        items.push(op.operationHash);
+      }
+    }
+    return items;
+  }
+  const [selectedItems, setSelectedItems] = React.useState<string[]>(() => {
+    if (selected?.length) {
+      return selected;
+    }
+    return getOperationHashes();
+  });
+
   const onSelect = React.useCallback(
     (operationHash: string, selected: boolean) => {
       const itemAt = selectedItems.findIndex(hash => hash === operationHash);
@@ -68,7 +81,7 @@ const OperationsFilter: React.FC<{
   const [visibleOperations, setVisibleOperations] = React.useState(operations);
 
   const selectAll = React.useCallback(() => {
-    setSelectedItems(operations.map(op => op.operationHash));
+    setSelectedItems(getOperationHashes());
   }, [operations]);
   const selectNone = React.useCallback(() => {
     setSelectedItems([]);
@@ -189,7 +202,7 @@ const OperationsFilterContainer: React.FC<{
     return null;
   }
 
-  if (query.fetching || query.error) {
+  if (query.fetching || query.error || !query.data) {
     return <Spinner />;
   }
 
@@ -217,7 +230,9 @@ const OperationRow: React.FC<{
 }> = ({ operation, selected, onSelect, style }) => {
   const requests = useFormattedNumber(operation.count);
   const change = React.useCallback(() => {
-    onSelect(operation.operationHash, !selected);
+    if (operation.operationHash) {
+      onSelect(operation.operationHash, !selected);
+    }
   }, [onSelect, operation.operationHash, selected]);
 
   return (
@@ -241,7 +256,7 @@ export const OperationsFilterTrigger: React.FC<{
   selected?: string[];
 }> = ({ period, onFilter, selected }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const ref = React.useRef();
+  const ref = React.useRef<HTMLButtonElement | null>(null);
 
   return (
     <>
@@ -254,7 +269,7 @@ export const OperationsFilterTrigger: React.FC<{
         bgColor="whiteAlpha.50"
         _hover={{ bgColor: 'whiteAlpha.100' }}
       >
-        <span tw="font-normal">Operations ({selected?.length > 0 ? selected.length : 'all'})</span>
+        <span tw="font-normal">Operations ({selected?.length ? selected.length : 'all'})</span>
       </Button>
       <OperationsFilterContainer
         isOpen={isOpen}
diff --git a/packages/web/app/src/components/target/operations/List.tsx b/packages/web/app/src/components/target/operations/List.tsx
index 59dfd2d4d8..cbc1376307 100644
--- a/packages/web/app/src/components/target/operations/List.tsx
+++ b/packages/web/app/src/components/target/operations/List.tsx
@@ -78,7 +78,7 @@ const OperationRow: React.FC<{
   operation: Operation;
 }> = ({ operation }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const linkRef = React.useRef();
+  const linkRef = React.useRef<HTMLButtonElement | null>(null);
   const count = useFormattedNumber(operation.requests);
   const percentage = useDecimal(operation.percentage);
   const failureRate = useDecimal(operation.failureRate);
@@ -96,6 +96,9 @@ const OperationRow: React.FC<{
               href="#"
               size="sm"
               variant="link"
+              // TODO: If you have an idea how to solve this TS issue, send a PR :)
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-ignore
               ref={linkRef}
               onClick={e => {
                 e.preventDefault();
@@ -306,6 +309,9 @@ const OperationsTable: React.FC<{
         </Thead>
         <Tbody>
           {tableInstance.getRowModel().rows.map(row => {
+            if (!row.original) {
+              return null;
+            }
             return <OperationRow operation={row.original} key={row.original.id} />;
           })}
         </Tbody>
@@ -374,24 +380,30 @@ const OperationsTableContainer: React.FC<{
   fetching?: boolean;
   className?: string;
 }> = ({ operations, operationsFilter, className, fetching }) => {
-  const data = React.useMemo(
-    () =>
-      operations
-        .filter(op => (operationsFilter.length ? operationsFilter.includes(op.operationHash) : true))
-        .map(op => ({
-          id: op.id,
-          name: op.name,
-          kind: op.kind,
-          p90: op.duration.p90,
-          p95: op.duration.p95,
-          p99: op.duration.p99,
-          failureRate: 1 - op.countOk / op.count,
-          requests: op.count,
-          percentage: op.percentage,
-          document: op.document,
-        })),
-    [operations, operationsFilter]
-  );
+  const data = React.useMemo(() => {
+    const records: Array<Operation> = [];
+    for (const op of operations) {
+      if (operationsFilter.length > 0 && op.operationHash) {
+        if (operationsFilter.includes(op.operationHash) === false) {
+          continue;
+        }
+      }
+      records.push({
+        id: op.id,
+        name: op.name,
+        kind: op.kind,
+        p90: op.duration.p90,
+        p95: op.duration.p95,
+        p99: op.duration.p99,
+        failureRate: 1 - op.countOk / op.count,
+        requests: op.count,
+        percentage: op.percentage,
+        document: op.document,
+      });
+    }
+
+    return records;
+  }, [operations, operationsFilter]);
 
   const [pagination, setPagination] = React.useState<PaginationState>({
     pageIndex: 0,
diff --git a/packages/web/app/src/components/target/operations/Stats.tsx b/packages/web/app/src/components/target/operations/Stats.tsx
index 00c336ded7..2b43bfd7d2 100644
--- a/packages/web/app/src/components/target/operations/Stats.tsx
+++ b/packages/web/app/src/components/target/operations/Stats.tsx
@@ -865,10 +865,11 @@ export const OperationsStats: React.FC<{
     },
   });
 
-  const stats = query.data?.operationsStats;
+  if (!query.data) {
+    return null;
+  }
 
-  const totalRequests = stats?.totalRequests;
-  const totalFailures = stats?.totalFailures;
+  const { operationsStats } = query.data;
 
   return (
     <section
@@ -884,46 +885,50 @@ export const OperationsStats: React.FC<{
         tw="rounded-md p-5 ring-1 ring-gray-800 transition bg-gray-900/50"
       >
         <GridItem>
-          <RequestsStats requests={totalRequests} />
+          <RequestsStats requests={operationsStats.totalRequests} />
         </GridItem>
         <GridItem>
-          <RPM requests={totalRequests} period={period} />
+          <RPM requests={operationsStats.totalRequests} period={period} />
         </GridItem>
         <GridItem>
-          <UniqueOperationsStats operations={stats?.totalOperations} />
+          <UniqueOperationsStats operations={operationsStats.totalOperations} />
         </GridItem>
 
         <GridItem rowSpan={2}>
-          <SuccessRateStats requests={totalRequests} totalFailures={totalFailures} />
-          <FailureRateStats requests={totalRequests} totalFailures={totalFailures} />
+          <SuccessRateStats requests={operationsStats.totalRequests} totalFailures={operationsStats.totalFailures} />
+          <FailureRateStats requests={operationsStats.totalRequests} totalFailures={operationsStats.totalFailures} />
         </GridItem>
 
         <GridItem>
-          <PercentileStats value={stats?.duration?.p90} title="Latency p90" />
+          <PercentileStats value={operationsStats?.duration?.p90} title="Latency p90" />
         </GridItem>
         <GridItem>
-          <PercentileStats value={stats?.duration?.p95} title="Latency p95" />
+          <PercentileStats value={operationsStats?.duration?.p95} title="Latency p95" />
         </GridItem>
         <GridItem>
-          <PercentileStats value={stats?.duration?.p99} title="Latency p99" />
+          <PercentileStats value={operationsStats?.duration?.p99} title="Latency p99" />
         </GridItem>
       </Grid>
       <div>
-        <ClientsStats clients={stats?.clients?.nodes} />
+        <ClientsStats clients={operationsStats?.clients?.nodes} />
       </div>
       <div>
         <OverTimeStats
           period={period}
           resolution={resolution}
-          requestsOverTime={stats?.requestsOverTime}
-          failuresOverTime={stats?.failuresOverTime}
+          requestsOverTime={operationsStats?.requestsOverTime}
+          failuresOverTime={operationsStats?.failuresOverTime}
         />
       </div>
       <div>
-        <RpmOverTimeStats period={period} resolution={resolution} requestsOverTime={stats?.requestsOverTime} />
+        <RpmOverTimeStats
+          period={period}
+          resolution={resolution}
+          requestsOverTime={operationsStats?.requestsOverTime}
+        />
       </div>
       <div>
-        <LatencyOverTimeStats period={period} duration={stats?.durationOverTime} resolution={resolution} />
+        <LatencyOverTimeStats period={period} duration={operationsStats?.durationOverTime} resolution={resolution} />
       </div>
       <div>
         <LatencyHistogramStats
diff --git a/packages/web/app/src/components/v2/activities.tsx b/packages/web/app/src/components/v2/activities.tsx
index c140ddf89c..be6d101581 100644
--- a/packages/web/app/src/components/v2/activities.tsx
+++ b/packages/web/app/src/components/v2/activities.tsx
@@ -53,7 +53,8 @@ export const getActivity = (
   };
 
   const targetLink = 'target' in activity && (
-    <NextLink href={targetHref} passHref>
+    /* TODO: figure out what is going on with targetHref... */
+    <NextLink href={targetHref as any} passHref>
       <Link variant="primary">{activity.target.name}</Link>
     </NextLink>
   );
@@ -173,8 +174,8 @@ export const getActivity = (
       return {
         content: (
           <>
-            {user.displayName} changed{' '}
-            <NextLink href={targetHref} passHref>
+            {user.displayName} changed {/* TODO: figure out what is going on with targetHref... */}
+            <NextLink href={targetHref as any} passHref>
               <Link variant="primary">{activity.value}</Link>
             </NextLink>{' '}
             target name in {projectLink} project
diff --git a/packages/web/app/src/components/v2/avatar.tsx b/packages/web/app/src/components/v2/avatar.tsx
index a730e47e63..ec6bc01353 100644
--- a/packages/web/app/src/components/v2/avatar.tsx
+++ b/packages/web/app/src/components/v2/avatar.tsx
@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { Fallback, Image, Root } from '@radix-ui/react-avatar';
 import clsx from 'clsx';
 
@@ -6,11 +6,11 @@ type Size = 'lg' | 'md' | 'sm' | 'xs';
 //           50     40     34     20
 
 type AvatarProps = {
-  src: string;
+  src?: string | null;
   alt?: string;
   shape?: 'circle' | 'square';
   size?: Size;
-  fallback?: any;
+  fallback?: ReactNode;
 };
 
 export const Avatar = ({
@@ -38,7 +38,7 @@ export const Avatar = ({
       )}
       {...props}
     >
-      <Image src={src} alt={alt} className="drag-none h-full w-full object-cover" />
+      <Image src={src ?? undefined} alt={alt} className="drag-none h-full w-full object-cover" />
       {fallback && <Fallback delayMs={500}>{fallback}</Fallback>}
     </Root>
   );
diff --git a/packages/web/app/src/components/v2/data-wrapper.tsx b/packages/web/app/src/components/v2/data-wrapper.tsx
index c9c6866ede..8905407207 100644
--- a/packages/web/app/src/components/v2/data-wrapper.tsx
+++ b/packages/web/app/src/components/v2/data-wrapper.tsx
@@ -14,13 +14,17 @@ export class DataWrapper<TData, TVariables> extends Component<{
     const { query, children, spinnerComponent } = this.props;
 
     if (query.fetching) {
-      return spinnerComponent || <Spinner />;
+      return spinnerComponent ?? <Spinner />;
     }
 
     if (query.error) {
       return <QueryError error={query.error} />;
     }
 
+    if (!query.data) {
+      return spinnerComponent ?? <Spinner />;
+    }
+
     return children({ data: query.data });
   }
 }
diff --git a/packages/web/app/src/components/v2/dropdown.tsx b/packages/web/app/src/components/v2/dropdown.tsx
index 70b9f4d031..68222fce75 100644
--- a/packages/web/app/src/components/v2/dropdown.tsx
+++ b/packages/web/app/src/components/v2/dropdown.tsx
@@ -1,38 +1,23 @@
 import { FC } from 'react';
 import { keyframes } from '@emotion/react';
 import {
-  Content,
+  Content as DropDownMenuContent,
   DropdownMenuContentProps,
   DropdownMenuItemProps,
-  DropdownMenuLabelProps,
-  DropdownMenuProps,
   DropdownMenuSeparatorProps,
   DropdownMenuTriggerItemProps,
-  DropdownMenuTriggerProps,
-  Item,
+  Item as DropDownMenuItem,
   Label,
   Root,
-  Separator,
+  Separator as DropDownMenuSeparator,
   Trigger,
-  TriggerItem,
+  TriggerItem as DropDownMenuTriggerItem,
 } from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { css } from 'twin.macro';
 
-const DropdownMenu: FC<DropdownMenuProps> & {
-  Trigger?: FC<DropdownMenuTriggerProps>;
-  Label?: FC<DropdownMenuLabelProps>;
-  Content?: FC<DropdownMenuContentProps>;
-  Item?: FC<DropdownMenuItemProps>;
-  TriggerItem?: FC<DropdownMenuTriggerItemProps>;
-  Separator?: FC<DropdownMenuSeparatorProps>;
-} = Root;
-
-DropdownMenu.Trigger = Trigger;
-DropdownMenu.Label = Label;
-
-DropdownMenu.Content = ({ children, className, ...props }) => (
-  <Content
+const Content: FC<DropdownMenuContentProps> = ({ children, className, ...props }) => (
+  <DropDownMenuContent
     className={clsx(
       `
     flex
@@ -87,11 +72,11 @@ DropdownMenu.Content = ({ children, className, ...props }) => (
     {...props}
   >
     {children}
-  </Content>
+  </DropDownMenuContent>
 );
 
-DropdownMenu.Item = ({ children, className, ...props }) => (
-  <Item
+const Item: FC<DropdownMenuItemProps> = ({ children, className, ...props }) => (
+  <DropDownMenuItem
     className={clsx(
       `
       flex
@@ -111,11 +96,11 @@ DropdownMenu.Item = ({ children, className, ...props }) => (
     {...props}
   >
     {children}
-  </Item>
+  </DropDownMenuItem>
 );
 
-DropdownMenu.TriggerItem = ({ children, className, ...props }) => (
-  <TriggerItem
+const TriggerItem: FC<DropdownMenuTriggerItemProps> = ({ children, className, ...props }) => (
+  <DropDownMenuTriggerItem
     className={clsx(
       `
       radix-state-open:sepia
@@ -137,11 +122,18 @@ DropdownMenu.TriggerItem = ({ children, className, ...props }) => (
     {...props}
   >
     {children}
-  </TriggerItem>
+  </DropDownMenuTriggerItem>
 );
 
-DropdownMenu.Separator = ({ className, asChild }) => (
-  <Separator className={clsx('h-px bg-gray-700/50', className)} asChild={asChild} />
+const Separator: FC<DropdownMenuSeparatorProps> = ({ className, asChild }) => (
+  <DropDownMenuSeparator className={clsx('h-px bg-gray-700/50', className)} asChild={asChild} />
 );
 
-export { DropdownMenu };
+export const DropdownMenu = Object.assign(Root, {
+  Separator,
+  Trigger,
+  Label,
+  Content,
+  TriggerItem,
+  Item,
+});
diff --git a/packages/web/app/src/components/v2/header.tsx b/packages/web/app/src/components/v2/header.tsx
index 0ca1ca95bc..de6521ded2 100644
--- a/packages/web/app/src/components/v2/header.tsx
+++ b/packages/web/app/src/components/v2/header.tsx
@@ -89,7 +89,7 @@ export const Header = (): ReactElement => {
           <DropdownMenu.Trigger asChild>
             <Button>
               <ArrowDownIcon className="h-5 w-5 text-gray-500" />
-              <Avatar src={user.picture} shape="circle" className="ml-2.5 border-2 border-gray-900" />
+              <Avatar src={user?.picture} shape="circle" className="ml-2.5 border-2 border-gray-900" />
             </Button>
           </DropdownMenu.Trigger>
 
diff --git a/packages/web/app/src/components/v2/modals/create-access-token.tsx b/packages/web/app/src/components/v2/modals/create-access-token.tsx
index dc9da3882a..30102c1252 100644
--- a/packages/web/app/src/components/v2/modals/create-access-token.tsx
+++ b/packages/web/app/src/components/v2/modals/create-access-token.tsx
@@ -6,7 +6,7 @@ import * as Yup from 'yup';
 
 import { PermissionsSpace, usePermissionsManager } from '@/components/organization/Permissions';
 import { Button, CopyValue, Heading, Input, Modal, Tag } from '@/components/v2';
-import { OrganizationDocument } from '@/graphql';
+import { OrganizationDocument, OrganizationQuery } from '@/graphql';
 import { scopes } from '@/lib/access/common';
 import { useRouteSelector } from '@/lib/hooks/use-route-selector';
 
@@ -48,8 +48,30 @@ export const CreateAccessTokenModal = ({
     },
   });
 
-  const { organization } = organizationQuery.data.organization;
+  const organization = organizationQuery.data?.organization?.organization;
 
+  return (
+    <Modal open={isOpen} onOpenChange={toggleModalOpen} className="w-[650px]">
+      {organization ? (
+        <ModalContent
+          organization={organization}
+          organizationId={router.organizationId}
+          projectId={router.projectId}
+          targetId={router.targetId}
+          toggleModalOpen={toggleModalOpen}
+        />
+      ) : null}
+    </Modal>
+  );
+};
+
+const ModalContent = (props: {
+  organization: Exclude<OrganizationQuery['organization'], null | undefined>['organization'];
+  organizationId: string;
+  projectId: string;
+  targetId: string;
+  toggleModalOpen: () => void;
+}) => {
   const [mutation, mutate] = useMutation(CreateAccessToken_CreateTokenMutation);
 
   const { handleSubmit, values, handleChange, handleBlur, isSubmitting, errors, touched } = useFormik({
@@ -60,9 +82,9 @@ export const CreateAccessTokenModal = ({
     async onSubmit(values) {
       await mutate({
         input: {
-          organization: router.organizationId,
-          project: router.projectId,
-          target: router.targetId,
+          organization: props.organizationId,
+          project: props.projectId,
+          target: props.targetId,
           name: values.name,
           organizationScopes: manager.organizationScopes,
           projectScopes: manager.projectScopes,
@@ -74,12 +96,12 @@ export const CreateAccessTokenModal = ({
 
   const manager = usePermissionsManager({
     onSuccess() {},
-    organization,
-    member: organization.me,
+    organization: props.organization,
+    member: props.organization.me,
   });
 
   return (
-    <Modal open={isOpen} onOpenChange={toggleModalOpen} className="w-[650px]">
+    <>
       {mutation.data?.createToken.ok ? (
         <div className="flex flex-col gap-5">
           <Heading className="text-center">Token successfully created!</Heading>
@@ -88,7 +110,7 @@ export const CreateAccessTokenModal = ({
             This is your unique API key and it is non-recoverable. If you lose this key, you will need to create a new
             one.
           </Tag>
-          <Button variant="primary" size="large" className="ml-auto" onClick={toggleModalOpen}>
+          <Button variant="primary" size="large" className="ml-auto" onClick={props.toggleModalOpen}>
             Ok, got it!
           </Button>
         </div>
@@ -148,7 +170,7 @@ export const CreateAccessTokenModal = ({
           {mutation.error && <div className="text-sm text-red-500">{mutation.error.message}</div>}
 
           <div className="flex w-full gap-2">
-            <Button type="button" size="large" block onClick={toggleModalOpen}>
+            <Button type="button" size="large" block onClick={props.toggleModalOpen}>
               Cancel
             </Button>
             <Button type="submit" size="large" block variant="primary" disabled={isSubmitting}>
@@ -157,6 +179,6 @@ export const CreateAccessTokenModal = ({
           </div>
         </form>
       )}
-    </Modal>
+    </>
   );
 };
diff --git a/packages/web/app/src/components/v2/modals/create-alert.tsx b/packages/web/app/src/components/v2/modals/create-alert.tsx
index 3857720702..a8fb8e867c 100644
--- a/packages/web/app/src/components/v2/modals/create-alert.tsx
+++ b/packages/web/app/src/components/v2/modals/create-alert.tsx
@@ -97,7 +97,7 @@ export const CreateAlertModal = ({
             ]}
             value={values.type}
             onChange={handleChange}
-            isInvalid={touched.type && Boolean(errors.type)}
+            isInvalid={!!touched.type && Boolean(errors.type)}
           />
           {touched.type && errors.type && <div className="text-sm text-red-500">{errors.type}</div>}
         </div>
@@ -115,7 +115,7 @@ export const CreateAlertModal = ({
             }))}
             value={values.channel}
             onChange={handleChange}
-            isInvalid={touched.channel && Boolean(errors.channel)}
+            isInvalid={!!touched.channel && Boolean(errors.channel)}
           />
           {touched.channel && errors.channel && <div className="text-sm text-red-500">{errors.channel}</div>}
         </div>
@@ -133,7 +133,7 @@ export const CreateAlertModal = ({
             }))}
             value={values.target}
             onChange={handleChange}
-            isInvalid={touched.target && Boolean(errors.target)}
+            isInvalid={!!touched.target && Boolean(errors.target)}
           />
           {touched.target && errors.target && <div className="text-sm text-red-500">{errors.target}</div>}
         </div>
diff --git a/packages/web/app/src/components/v2/modals/create-channel.tsx b/packages/web/app/src/components/v2/modals/create-channel.tsx
index 5aba042ca4..714d44508c 100644
--- a/packages/web/app/src/components/v2/modals/create-channel.tsx
+++ b/packages/web/app/src/components/v2/modals/create-channel.tsx
@@ -113,7 +113,7 @@ export const CreateChannelModal = ({
             value={values.type}
             onChange={handleChange}
             onBlur={handleBlur}
-            isInvalid={touched.type && Boolean(errors.type)}
+            isInvalid={!!touched.type && Boolean(errors.type)}
             placeholder="Select channel type"
             options={[
               { value: AlertChannelType.Slack, name: 'Slack' },
diff --git a/packages/web/app/src/components/v2/modals/create-organization.tsx b/packages/web/app/src/components/v2/modals/create-organization.tsx
index 0eaa5cab11..3386142e0a 100644
--- a/packages/web/app/src/components/v2/modals/create-organization.tsx
+++ b/packages/web/app/src/components/v2/modals/create-organization.tsx
@@ -77,7 +77,7 @@ export const CreateOrganizationModal = ({
           className="grow"
         />
         {touched.name && (errors.name || mutation.error) && (
-          <div className="-mt-2 text-sm text-red-500">{errors.name || mutation.error.message}</div>
+          <div className="-mt-2 text-sm text-red-500">{errors.name || mutation.error?.message}</div>
         )}
         {mutation.data?.createOrganization.error?.inputErrors.name && (
           <div className="-mt-2 text-sm text-red-500">{mutation.data.createOrganization.error.inputErrors.name}</div>
diff --git a/packages/web/app/src/components/v2/modals/create-project.tsx b/packages/web/app/src/components/v2/modals/create-project.tsx
index f5ffeb40bc..fa1eb6b7d0 100644
--- a/packages/web/app/src/components/v2/modals/create-project.tsx
+++ b/packages/web/app/src/components/v2/modals/create-project.tsx
@@ -82,7 +82,7 @@ export const CreateProjectModal = ({
               }),
         },
       });
-      if (data.createProject.ok) {
+      if (data?.createProject.ok) {
         toggleModalOpen();
         push(`/${router.organizationId}/${data.createProject.ok.createdProject.cleanId}`);
       }
diff --git a/packages/web/app/src/components/v2/modals/create-target.tsx b/packages/web/app/src/components/v2/modals/create-target.tsx
index e8d32e2cbe..49d2699a3d 100644
--- a/packages/web/app/src/components/v2/modals/create-target.tsx
+++ b/packages/web/app/src/components/v2/modals/create-target.tsx
@@ -81,7 +81,7 @@ export const CreateTargetModal = ({
           className="grow"
         />
         {touched.name && (errors.name || mutation.error) && (
-          <div className="-mt-2 text-sm text-red-500">{errors.name || mutation.error.message}</div>
+          <div className="-mt-2 text-sm text-red-500">{errors.name || mutation.error?.message}</div>
         )}
         {mutation.data?.createTarget.error?.inputErrors.name && (
           <div className="-mt-2 text-sm text-red-500">{mutation.data.createTarget.error.inputErrors.name}</div>
diff --git a/packages/web/app/src/components/v2/modals/delete-organization.tsx b/packages/web/app/src/components/v2/modals/delete-organization.tsx
index 96c5191c19..3a97a5dc70 100644
--- a/packages/web/app/src/components/v2/modals/delete-organization.tsx
+++ b/packages/web/app/src/components/v2/modals/delete-organization.tsx
@@ -1,26 +1,24 @@
 import { ReactElement } from 'react';
 import { useRouter } from 'next/router';
-import { useMutation, useQuery } from 'urql';
+import { useMutation } from 'urql';
 
 import { Button, Heading, Modal } from '@/components/v2';
 import { TrashIcon } from '@/components/v2/icon';
-import { DeleteOrganizationDocument, OrganizationsDocument, OrganizationType } from '@/graphql';
+import { DeleteOrganizationDocument, OrganizationFieldsFragment } from '@/graphql';
 import { useRouteSelector } from '@/lib/hooks/use-route-selector';
 
 export const DeleteOrganizationModal = ({
   isOpen,
   toggleModalOpen,
+  organization,
 }: {
   isOpen: boolean;
   toggleModalOpen: () => void;
+  organization: OrganizationFieldsFragment;
 }): ReactElement => {
   const [, mutate] = useMutation(DeleteOrganizationDocument);
   const router = useRouteSelector();
   const { replace } = useRouter();
-  const [organizationsQuery] = useQuery({ query: OrganizationsDocument });
-  const personalOrganization = organizationsQuery.data?.organizations.nodes.find(
-    node => node.type === OrganizationType.Personal
-  );
 
   return (
     <Modal open={isOpen} onOpenChange={toggleModalOpen} className="flex flex-col items-center gap-5">
@@ -45,7 +43,7 @@ export const DeleteOrganizationModal = ({
               },
             });
             toggleModalOpen();
-            replace(`/${personalOrganization.cleanId}`);
+            replace(`/${organization.cleanId}`);
           }}
         >
           Delete
diff --git a/packages/web/app/src/components/v2/skeleton.tsx b/packages/web/app/src/components/v2/skeleton.tsx
index 19b31e72b6..5c4c50cd0f 100644
--- a/packages/web/app/src/components/v2/skeleton.tsx
+++ b/packages/web/app/src/components/v2/skeleton.tsx
@@ -9,7 +9,7 @@ type Props = {
   width?: CSSProperties['width'];
 };
 
-export const Skeleton = ({ className, visible, circle, width, ...props }: Props): ReactElement => {
+export const Skeleton = ({ className, visible, circle, width, ...props }: Props): ReactElement | null => {
   if (!visible) {
     return null;
   }
diff --git a/packages/web/app/src/components/v2/tabs.tsx b/packages/web/app/src/components/v2/tabs.tsx
index 3ff4558b17..2314d9800e 100644
--- a/packages/web/app/src/components/v2/tabs.tsx
+++ b/packages/web/app/src/components/v2/tabs.tsx
@@ -1,24 +1,17 @@
 import { FC, forwardRef } from 'react';
 import {
-  Content,
-  List,
+  Content as TabsContent,
+  List as TabsList,
   Root,
   TabsContentProps,
   TabsListProps,
-  TabsProps,
   TabsTriggerProps,
-  Trigger,
+  Trigger as TabsTrigger,
 } from '@radix-ui/react-tabs';
 import clsx from 'clsx';
 
-const Tabs: FC<TabsProps> & {
-  List?: FC<TabsListProps>;
-  Trigger?: FC<TabsTriggerProps & { hasBorder?: boolean }>;
-  Content?: FC<TabsContentProps>;
-} = Root;
-
-Tabs.List = ({ children, className, ...props }) => (
-  <List
+const List: FC<TabsListProps> = ({ children, className, ...props }) => (
+  <TabsList
     className={clsx(
       `
       relative
@@ -33,12 +26,12 @@ Tabs.List = ({ children, className, ...props }) => (
     {...props}
   >
     {children}
-  </List>
+  </TabsList>
 );
 
-Tabs.Trigger = forwardRef(
+const Trigger: FC<TabsTriggerProps & { hasBorder?: boolean }> = forwardRef(
   ({ children, className, hasBorder = true, ...props }, forwardedRef /* when has asChild prop */) => (
-    <Trigger
+    <TabsTrigger
       ref={forwardedRef as any}
       className={clsx(
         '!appearance-none', // unset button styles in Safari
@@ -57,14 +50,18 @@ Tabs.Trigger = forwardRef(
       {...props}
     >
       {children}
-    </Trigger>
+    </TabsTrigger>
   )
 );
 
-Tabs.Content = ({ children, className, ...props }) => (
-  <Content className={clsx('py-7', className)} {...props}>
+const Content: FC<TabsContentProps> = ({ children, className, ...props }) => (
+  <TabsContent className={clsx('py-7', className)} {...props}>
     {children}
-  </Content>
+  </TabsContent>
 );
 
-export { Tabs };
+export const Tabs = Object.assign(Root, {
+  Content,
+  Trigger,
+  List,
+});
diff --git a/packages/web/app/src/components/v2/time-ago.tsx b/packages/web/app/src/components/v2/time-ago.tsx
index 032dbf37b0..938a77d02d 100644
--- a/packages/web/app/src/components/v2/time-ago.tsx
+++ b/packages/web/app/src/components/v2/time-ago.tsx
@@ -3,7 +3,7 @@ import { TimeAgo as ReactTimeAgo } from '@n1ru4l/react-time-ago';
 import clsx from 'clsx';
 import { format } from 'date-fns';
 
-export const TimeAgo = ({ date, className }: { date?: string; className?: string }): ReactElement => {
+export const TimeAgo = ({ date, className }: { date?: string; className?: string }): ReactElement | null => {
   const { dateObj, formattedDate } = useMemo(() => {
     if (!date) {
       return {};
@@ -13,7 +13,7 @@ export const TimeAgo = ({ date, className }: { date?: string; className?: string
     return { dateObj, formattedDate };
   }, [date]);
 
-  if (!date) {
+  if (!date || !dateObj) {
     return null;
   }
 
diff --git a/packages/web/app/src/graphql/mutation.delete-alert-channels.graphql b/packages/web/app/src/graphql/mutation.delete-alert-channels.graphql
index a992bf523e..327636a254 100644
--- a/packages/web/app/src/graphql/mutation.delete-alert-channels.graphql
+++ b/packages/web/app/src/graphql/mutation.delete-alert-channels.graphql
@@ -1,5 +1,6 @@
 mutation deleteAlertChannels($input: DeleteAlertChannelsInput!) {
   deleteAlertChannels(input: $input) {
+    __typename
     id
   }
 }
diff --git a/packages/web/app/src/graphql/mutation.delete-alerts.graphql b/packages/web/app/src/graphql/mutation.delete-alerts.graphql
index 6adb723f91..bdc70eb240 100644
--- a/packages/web/app/src/graphql/mutation.delete-alerts.graphql
+++ b/packages/web/app/src/graphql/mutation.delete-alerts.graphql
@@ -1,5 +1,6 @@
 mutation deleteAlerts($input: DeleteAlertsInput!) {
   deleteAlerts(input: $input) {
+    __typename
     id
   }
 }
diff --git a/packages/web/app/src/graphql/mutation.delete-organization.graphql b/packages/web/app/src/graphql/mutation.delete-organization.graphql
index 980fb220ba..2a1d0ec0fd 100644
--- a/packages/web/app/src/graphql/mutation.delete-organization.graphql
+++ b/packages/web/app/src/graphql/mutation.delete-organization.graphql
@@ -4,6 +4,7 @@ mutation deleteOrganization($selector: OrganizationSelectorInput!) {
       organization
     }
     organization {
+      __typename
       id
     }
   }
diff --git a/packages/web/app/src/graphql/mutation.delete-persisted-operation.graphql b/packages/web/app/src/graphql/mutation.delete-persisted-operation.graphql
index 38f3cffe76..07b9cea858 100644
--- a/packages/web/app/src/graphql/mutation.delete-persisted-operation.graphql
+++ b/packages/web/app/src/graphql/mutation.delete-persisted-operation.graphql
@@ -1,6 +1,7 @@
 mutation deletePersistedOperation($input: PersistedOperationSelectorInput!) {
   deletePersistedOperation(selector: $input) {
     deletedPersistedOperation {
+      __typename
       id
       operationHash
     }
diff --git a/packages/web/app/src/graphql/mutation.delete-project.graphql b/packages/web/app/src/graphql/mutation.delete-project.graphql
index 08c558ba10..b25e23774e 100644
--- a/packages/web/app/src/graphql/mutation.delete-project.graphql
+++ b/packages/web/app/src/graphql/mutation.delete-project.graphql
@@ -5,6 +5,7 @@ mutation deleteProject($selector: ProjectSelectorInput!) {
       project
     }
     deletedProject {
+      __typename
       id
     }
   }
diff --git a/packages/web/app/src/graphql/mutation.delete-target.graphql b/packages/web/app/src/graphql/mutation.delete-target.graphql
index 3f73e99009..c8f356c4f7 100644
--- a/packages/web/app/src/graphql/mutation.delete-target.graphql
+++ b/packages/web/app/src/graphql/mutation.delete-target.graphql
@@ -6,6 +6,7 @@ mutation deleteTarget($selector: TargetSelectorInput!) {
       target
     }
     deletedTarget {
+      __typename
       id
     }
   }
diff --git a/packages/web/app/src/graphql/mutation.join-organization.graphql b/packages/web/app/src/graphql/mutation.join-organization.graphql
index 9e5ff79fbe..e5f52d7086 100644
--- a/packages/web/app/src/graphql/mutation.join-organization.graphql
+++ b/packages/web/app/src/graphql/mutation.join-organization.graphql
@@ -1,5 +1,6 @@
 mutation joinOrganization($code: String!) {
   joinOrganization(code: $code) {
+    __typename
     ... on OrganizationPayload {
       selector {
         organization
diff --git a/packages/web/app/src/graphql/query.get-github-integration-details.graphql b/packages/web/app/src/graphql/query.get-github-integration-details.graphql
index d8ef0b5eee..8b07759fd8 100644
--- a/packages/web/app/src/graphql/query.get-github-integration-details.graphql
+++ b/packages/web/app/src/graphql/query.get-github-integration-details.graphql
@@ -1,5 +1,4 @@
 query getGitHubIntegrationDetails($selector: OrganizationSelectorInput!) {
-  hasGitHubIntegration(selector: $selector)
   gitHubIntegration(selector: $selector) {
     repositories {
       nameWithOwner
diff --git a/packages/web/app/src/graphql/query.organization-invitation.graphql b/packages/web/app/src/graphql/query.organization-invitation.graphql
index 2a5173ea92..4794f2a438 100644
--- a/packages/web/app/src/graphql/query.organization-invitation.graphql
+++ b/packages/web/app/src/graphql/query.organization-invitation.graphql
@@ -1,5 +1,6 @@
 query organizationInvitation($code: String!) {
   organizationByInviteCode(code: $code) {
+    __typename
     ... on OrganizationInvitationPayload {
       name
     }
diff --git a/packages/web/app/src/lib/access/common.ts b/packages/web/app/src/lib/access/common.ts
index 9d9bc5f839..754669c4eb 100644
--- a/packages/web/app/src/lib/access/common.ts
+++ b/packages/web/app/src/lib/access/common.ts
@@ -125,7 +125,7 @@ export function useRedirect({
         as: string;
       }
     | undefined;
-  entity: any;
+  entity?: any;
 }) {
   const router = useRouteSelector();
   const redirectRef = React.useRef(false);
@@ -137,7 +137,9 @@ export function useRedirect({
     if (!canAccess && entity && !redirectRef.current) {
       redirectRef.current = true;
       const route = redirectTo(router);
-      router.push(route.route, route.as);
+      if (route) {
+        router.push(route.route, route.as);
+      }
     }
   }, [router, canAccess, redirectRef, redirectTo]);
 }
diff --git a/packages/web/app/src/lib/access/organization.ts b/packages/web/app/src/lib/access/organization.ts
index 9a2e792f08..b7fe399a25 100644
--- a/packages/web/app/src/lib/access/organization.ts
+++ b/packages/web/app/src/lib/access/organization.ts
@@ -5,7 +5,7 @@ export { OrganizationAccessScope } from '../../graphql';
 
 export function canAccessOrganization(
   scope: OrganizationAccessScope,
-  member: Pick<MemberFieldsFragment, 'organizationAccessScopes'>
+  member: Pick<MemberFieldsFragment, 'organizationAccessScopes'> | null | undefined
 ) {
   if (!member) {
     return false;
@@ -20,7 +20,7 @@ export function useOrganizationAccess({
   redirect = false,
 }: {
   scope: OrganizationAccessScope;
-  member: Pick<MemberFieldsFragment, 'organizationAccessScopes'>;
+  member: Pick<MemberFieldsFragment, 'organizationAccessScopes'> | null | undefined;
   redirect?: boolean;
 }) {
   const canAccess = canAccessOrganization(scope, member);
diff --git a/packages/web/app/src/lib/access/project.ts b/packages/web/app/src/lib/access/project.ts
index b01e7708cd..56f7f0c672 100644
--- a/packages/web/app/src/lib/access/project.ts
+++ b/packages/web/app/src/lib/access/project.ts
@@ -3,7 +3,10 @@ import { useRedirect } from './common';
 
 export { ProjectAccessScope } from '../../graphql';
 
-export function canAccessProject(scope: ProjectAccessScope, member: Pick<MemberFieldsFragment, 'projectAccessScopes'>) {
+export function canAccessProject(
+  scope: ProjectAccessScope,
+  member: Pick<MemberFieldsFragment, 'projectAccessScopes'> | null | undefined
+) {
   if (!member) {
     return false;
   }
@@ -17,7 +20,7 @@ export function useProjectAccess({
   redirect = false,
 }: {
   scope: ProjectAccessScope;
-  member: Pick<MemberFieldsFragment, 'projectAccessScopes'>;
+  member: Pick<MemberFieldsFragment, 'projectAccessScopes'> | null | undefined;
   redirect?: boolean;
 }) {
   const canAccess = canAccessProject(scope, member);
diff --git a/packages/web/app/src/lib/access/target.ts b/packages/web/app/src/lib/access/target.ts
index 695b4477b1..d431229eeb 100644
--- a/packages/web/app/src/lib/access/target.ts
+++ b/packages/web/app/src/lib/access/target.ts
@@ -3,7 +3,10 @@ import { MemberFieldsFragment, TargetAccessScope } from '../../graphql';
 
 export { TargetAccessScope } from '../../graphql';
 
-export function canAccessTarget(scope: TargetAccessScope, member: Pick<MemberFieldsFragment, 'targetAccessScopes'>) {
+export function canAccessTarget(
+  scope: TargetAccessScope,
+  member: Pick<MemberFieldsFragment, 'targetAccessScopes'> | null | undefined
+) {
   if (!member) {
     return false;
   }
@@ -17,7 +20,7 @@ export function useTargetAccess({
   redirect = false,
 }: {
   scope: TargetAccessScope;
-  member: Pick<MemberFieldsFragment, 'targetAccessScopes'>;
+  member: Pick<MemberFieldsFragment, 'targetAccessScopes'> | null | undefined;
   redirect?: boolean;
 }) {
   const canAccess = canAccessTarget(scope, member);
diff --git a/packages/web/app/src/lib/hooks/use-route-selector.ts b/packages/web/app/src/lib/hooks/use-route-selector.ts
index f35e22f817..4dab8800cf 100644
--- a/packages/web/app/src/lib/hooks/use-route-selector.ts
+++ b/packages/web/app/src/lib/hooks/use-route-selector.ts
@@ -48,7 +48,7 @@ export function useRouteSelector() {
 
   const update = useCallback(
     (params: Record<string, string | number>) => {
-      const routeParams = router.route.match(/\[[a-z]+\]/gi).map(p => p.replace('[', '').replace(']', ''));
+      const routeParams = router.route.match(/\[[a-z]+\]/gi)?.map(p => p.replace('[', '').replace(']', '')) ?? [];
       const query = {
         ...router.query,
         ...params,
diff --git a/packages/web/app/src/lib/mixpanel.ts b/packages/web/app/src/lib/mixpanel.ts
index dbaff7d4ce..9d34d60b13 100644
--- a/packages/web/app/src/lib/mixpanel.ts
+++ b/packages/web/app/src/lib/mixpanel.ts
@@ -22,7 +22,7 @@ export function track(eventName: string, data?: Record<string, any>) {
 
 export function identify(user: UserProfile) {
   if (enabled) {
-    mixpanel.identify(user.sub);
+    mixpanel.identify(user.sub ?? undefined);
     mixpanel.people.set({
       ...('name' in user
         ? {
diff --git a/packages/web/app/src/lib/urql-cache.ts b/packages/web/app/src/lib/urql-cache.ts
index a6977ccbf4..7e43e20198 100644
--- a/packages/web/app/src/lib/urql-cache.ts
+++ b/packages/web/app/src/lib/urql-cache.ts
@@ -29,15 +29,15 @@ import {
 } from '../graphql';
 
 function updateQuery<T, V>(cache: Cache, input: QueryInput<T, V>, recipe: (obj: T) => void) {
-  return cache.updateQuery(input, (data: T) => {
+  return cache.updateQuery(input, (data: T | null) => {
     if (!data) {
       console.error('Query Cache Updater: Empty data', {
         operationName: getOperationName(input.query as TypedDocumentNode),
         variables: input.variables,
       });
-    } else {
-      return produce(data, recipe);
+      return null;
     }
+    return produce(data, recipe);
   });
 }
 
@@ -167,7 +167,7 @@ const createToken: TypedDocumentNodeUpdateResolver<typeof CreateTokenDocument> =
   if (!createToken.ok) {
     return;
   }
-  const selector = createToken.ok.selector;
+  const { selector, createdToken } = createToken.ok;
 
   updateQuery(
     cache,
@@ -182,7 +182,7 @@ const createToken: TypedDocumentNodeUpdateResolver<typeof CreateTokenDocument> =
       },
     },
     data => {
-      data.tokens.nodes.unshift(createToken.ok.createdToken);
+      data.tokens.nodes.unshift(createdToken);
       data.tokens.total += 1;
     }
   );
@@ -219,6 +219,8 @@ const addAlertChannel: TypedDocumentNodeUpdateResolver<typeof AddAlertChannelDoc
     return;
   }
 
+  const { addedAlertChannel } = addAlertChannel.ok;
+
   updateQuery(
     cache,
     {
@@ -231,7 +233,7 @@ const addAlertChannel: TypedDocumentNodeUpdateResolver<typeof AddAlertChannelDoc
       },
     },
     data => {
-      data.alertChannels.unshift(addAlertChannel.ok.addedAlertChannel);
+      data.alertChannels.unshift(addedAlertChannel);
     }
   );
 };
@@ -290,10 +292,15 @@ const deleteSlackIntegration: TypedDocumentNodeUpdateResolver<typeof DeleteSlack
         },
       },
     },
-    data => ({
-      ...data,
-      hasSlackIntegration: false,
-    })
+    data => {
+      if (data === null) {
+        return null;
+      }
+      return {
+        ...data,
+        hasSlackIntegration: false,
+      };
+    }
   );
 };
 const deleteGitHubIntegration: TypedDocumentNodeUpdateResolver<typeof DeleteGitHubIntegrationDocument> = (
@@ -310,10 +317,15 @@ const deleteGitHubIntegration: TypedDocumentNodeUpdateResolver<typeof DeleteGitH
         },
       },
     },
-    data => ({
-      ...data,
-      hasGitHubIntegration: false,
-    })
+    data => {
+      if (data === null) {
+        return null;
+      }
+      return {
+        ...data,
+        hasGitHubIntegration: false,
+      };
+    }
   );
 };
 
diff --git a/packages/web/app/tsconfig.json b/packages/web/app/tsconfig.json
index 8a0347db35..c0452419d8 100644
--- a/packages/web/app/tsconfig.json
+++ b/packages/web/app/tsconfig.json
@@ -6,13 +6,7 @@
     "allowJs": true,
     "skipLibCheck": true,
 
-    "strict": false,
-    "useUnknownInCatchVariables": true,
-    "noImplicitThis": true,
-    "strictBindCallApply": true,
-    "alwaysStrict": true,
-    "noImplicitAny": true,
-    "strictFunctionTypes": true,
+    "strict": true,
 
     "forceConsistentCasingInFileNames": true,
     "noEmit": true,