Fix/1128: Individual proposal pages failing to load - refactored from rest to gql as an easy way to avoid wrong endpoints (#1131)

apps/token/src/routes/governance/components/proposal-terms-json/proposal-terms-json.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from 'react-i18next';
 import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import type { RestProposalResponse } from '../../proposal/proposal-container';
+import type { Proposal_proposal_terms } from '../../proposal/__generated__/Proposal';
 
 export const ProposalTermsJson = ({
   terms,
 }: {
-  terms: RestProposalResponse;
+  terms: Proposal_proposal_terms;
 }) => {
   const { t } = useTranslation();
   return (

apps/token/src/routes/governance/components/proposal/proposal.tsx

@@ -1,6 +1,8 @@
 import { ProposalHeader } from '../proposal-detail-header/proposal-header';
-import type { Proposal_proposal } from '../../proposal/__generated__/Proposal';
-import type { RestProposalResponse } from '../../proposal/proposal-container';
+import type {
+  Proposal_proposal,
+  Proposal_proposal_terms,
+} from '../../proposal/__generated__/Proposal';
 import { ProposalChangeTable } from '../proposal-change-table';
 import { ProposalTermsJson } from '../proposal-terms-json';
 import { ProposalVotesTable } from '../proposal-votes-table';
@@ -8,7 +10,7 @@ import { VoteDetails } from '../vote-details';
 
 interface ProposalProps {
   proposal: Proposal_proposal;
-  terms: RestProposalResponse;
+  terms: Proposal_proposal_terms;
 }
 
 export const Proposal = ({ proposal, terms }: ProposalProps) => {

apps/token/src/routes/governance/proposal/proposal-container.tsx

@@ -1,30 +1,13 @@
 import { gql, useQuery } from '@apollo/client';
-import { Callout, Intent, Splash } from '@vegaprotocol/ui-toolkit';
-import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useParams } from 'react-router-dom';
 
-import { SplashLoader } from '../../../components/splash-loader';
-import { useFetch } from '@vegaprotocol/react-helpers';
 import { Proposal } from '../components/proposal';
 import { PROPOSALS_FRAGMENT } from '../proposal-fragment';
 import type {
   Proposal as ProposalQueryResult,
   ProposalVariables,
 } from './__generated__/Proposal';
-import { ENV } from '../../../config/env';
-
-/**
- * TODO: how do we do this properly to ensure that it is kept up to date?
- */
-export interface RestProposalResponse {
-  data: {
-    proposal: {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      terms: any;
-    };
-  };
-}
 
 export const PROPOSAL_QUERY = gql`
   ${PROPOSALS_FRAGMENT}
@@ -36,16 +19,7 @@ export const PROPOSAL_QUERY = gql`
 `;
 
 export const ProposalContainer = () => {
-  const { t } = useTranslation();
   const params = useParams<{ proposalId: string }>();
-  const proposalUrl = React.useMemo(
-    () => new URL(`governance/proposal/${params.proposalId}`, ENV.restUrl).href,
-    [params.proposalId]
-  );
-
-  const {
-    state: { loading: restLoading, error: restError, data: restData },
-  } = useFetch<RestProposalResponse>(proposalUrl);
 
   const { data, loading, error } = useQuery<
     ProposalQueryResult,
@@ -57,23 +31,11 @@ export const ProposalContainer = () => {
     pollInterval: 5000,
   });
 
-  if (error || restError) {
-    return (
-      <Callout intent={Intent.Danger} title={t('Something went wrong')}>
-        <pre>{error?.message || restError?.message}</pre>
-      </Callout>
-    );
-  }
-
-  if (loading || !data || restLoading || !restData) {
-    return (
-      <Splash>
-        <SplashLoader />
-      </Splash>
-    );
-  }
-
   return (
-    <Proposal proposal={data.proposal} terms={restData?.data.proposal.terms} />
+    <AsyncRenderer loading={loading} error={error} data={data}>
+      {data && (
+        <Proposal proposal={data.proposal} terms={data.proposal.terms} />
+      )}
+    </AsyncRenderer>
   );
 };