chore: codegen and types for apollo

codegen.yml

@@ -0,0 +1,13 @@
+overwrite: true
+schema: 'http://localhost:3000/api/v1'
+documents: 'src/graphql/**/*.ts'
+generates:
+  src/generated/graphql.tsx:
+    config:
+      withComponent: false
+      withHOC: false
+      withHooks: true
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'

package.json

@@ -13,7 +13,8 @@
     "release:push": "standard-version && git push --follow-tags origin master",
     "release:test": "standard-version --dry-run",
     "analyze": "cross-env ANALYZE=true next build",
-    "storybook": "start-storybook -p 6006 -c .storybook"
+    "storybook": "start-storybook -p 6006 -c .storybook",
+    "codegen": "graphql-codegen --config codegen.yml"
   },
   "keywords": [],
   "author": "",
@@ -62,6 +63,12 @@
     "@babel/core": "^7.9.0",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
+    "@graphql-codegen/cli": "^1.13.2",
+    "@graphql-codegen/introspection": "1.13.2",
+    "@graphql-codegen/typescript": "1.13.2",
+    "@graphql-codegen/typescript-operations": "^1.13.2",
+    "@graphql-codegen/typescript-react-apollo": "1.13.2",
+    "@graphql-codegen/typescript-resolvers": "1.13.2",
     "@next/bundle-analyzer": "^9.3.5",
     "@storybook/addon-actions": "^5.3.18",
     "@storybook/addon-knobs": "^5.3.18",

src/api/schemas/types/MutationType.ts

@@ -42,8 +42,8 @@ export const InvoiceType = new GraphQLObjectType({
   },
 });
 
-const RoutesType = new GraphQLObjectType({
-  name: 'routeType',
+const DecodeRoutesType = new GraphQLObjectType({
+  name: 'DecodeRoutesType',
   fields: () => ({
     baseFeeMTokens: { type: GraphQLString },
     channel: { type: GraphQLString },
@@ -64,14 +64,14 @@ export const DecodeType = new GraphQLObjectType({
       destination: { type: GraphQLString },
       expiresAt: { type: GraphQLString },
       id: { type: GraphQLString },
-      routes: { type: new GraphQLList(RoutesType) },
+      routes: { type: new GraphQLList(DecodeRoutesType) },
       tokens: { type: GraphQLInt },
     };
   },
 });
 
-const RouteType = new GraphQLObjectType({
-  name: 'RouteType',
+const PaymentRouteType = new GraphQLObjectType({
+  name: 'PaymentRouteType',
   fields: () => ({
     mTokenFee: { type: GraphQLString },
     channel: { type: GraphQLString },
@@ -96,7 +96,7 @@ export const ParsePaymentType = new GraphQLObjectType({
       isExpired: { type: GraphQLBoolean },
       mTokens: { type: GraphQLString },
       network: { type: GraphQLString },
-      routes: { type: new GraphQLList(RouteType) },
+      routes: { type: new GraphQLList(PaymentRouteType) },
       tokens: { type: GraphQLInt },
     };
   },

src/components/auth/checks/AdminCheck.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
 import { SingleLine, Sub4Title } from '../../generic/Styled';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { themeColors } from '../../../styles/Themes';
 import { XSvg, Check } from '../../generic/Icons';
-import { GET_CAN_ADMIN } from '../../../graphql/query';
+import { useGetCanAdminQuery } from '../../../generated/graphql';
 
 type AdminProps = {
   host: string;
@@ -14,7 +13,7 @@ type AdminProps = {
 };
 
 export const AdminCheck = ({ host, admin, cert, setChecked }: AdminProps) => {
-  const { data, loading } = useQuery(GET_CAN_ADMIN, {
+  const { data, loading } = useGetCanAdminQuery({
     skip: !admin,
     variables: { auth: { host, macaroon: admin, cert } },
     onError: () => {

src/components/auth/checks/ViewCheck.tsx

@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from 'react';
-import { useQuery } from '@apollo/react-hooks';
 import { SingleLine, Sub4Title, Separation } from '../../generic/Styled';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { themeColors } from '../../../styles/Themes';
@@ -7,7 +6,7 @@ import { Check, XSvg } from '../../generic/Icons';
 import { ColorButton } from '../../buttons/colorButton/ColorButton';
 import { AdminCheck } from './AdminCheck';
 import { Text } from '../../typography/Styled';
-import { GET_CAN_CONNECT } from '../../../graphql/query';
+import { useGetCanConnectQuery } from '../../../generated/graphql';
 
 type ViewProps = {
   host: string;
@@ -34,7 +33,7 @@ export const ViewCheck = ({
 }: ViewProps) => {
   const [confirmed, setConfirmed] = useState(false);
 
-  const { data, loading } = useQuery(GET_CAN_CONNECT, {
+  const { data, loading } = useGetCanConnectQuery({
     variables: { auth: { host, macaroon: viewOnly ?? admin ?? '', cert } },
     onCompleted: () => setConfirmed(true),
     onError: () => setConfirmed(false),

src/components/bitcoinInfo/BitcoinFees.ts

@@ -1,11 +1,10 @@
 import { useEffect } from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { GET_BITCOIN_FEES } from '../../graphql/query';
 import { useBitcoinDispatch } from '../../context/BitcoinContext';
+import { useGetBitcoinFeesQuery } from '../../generated/graphql';
 
 export const BitcoinFees = () => {
   const setInfo = useBitcoinDispatch();
-  const { loading, data, stopPolling } = useQuery(GET_BITCOIN_FEES, {
+  const { loading, data, stopPolling } = useGetBitcoinFeesQuery({
     onError: () => {
       setInfo({ type: 'error' });
       stopPolling();

src/components/bitcoinInfo/BitcoinPrice.ts

@@ -1,11 +1,10 @@
 import { useEffect } from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { GET_BITCOIN_PRICE } from '../../graphql/query';
 import { usePriceDispatch } from '../../context/PriceContext';
+import { useGetBitcoinPriceQuery } from '../../generated/graphql';
 
 export const BitcoinPrice = () => {
   const setPrices = usePriceDispatch();
-  const { loading, data, stopPolling } = useQuery(GET_BITCOIN_PRICE, {
+  const { loading, data, stopPolling } = useGetBitcoinPriceQuery({
     onError: () => setPrices({ type: 'error' }),
     pollInterval: 60000,
   });

src/components/connectionCheck/ConnectionCheck.tsx

@@ -3,9 +3,8 @@ import {
   useConnectionState,
   useConnectionDispatch,
 } from '../../context/ConnectionContext';
-import { useQuery } from '@apollo/react-hooks';
 import { useAccount } from '../../context/AccountContext';
-import { GET_CAN_CONNECT } from '../../graphql/query';
+import { useGetCanConnectQuery } from '../../generated/graphql';
 
 export const ConnectionCheck = () => {
   const { connected } = useConnectionState();
@@ -18,7 +17,7 @@ export const ConnectionCheck = () => {
     cert,
   };
 
-  const { data, loading } = useQuery(GET_CAN_CONNECT, {
+  const { data, loading } = useGetCanConnectQuery({
     variables: { auth },
     skip: connected || !loggedIn,
     onError: () => {

src/components/modal/closeChannel/CloseChannel.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { useMutation, useQuery } from '@apollo/react-hooks';
+import React, { useState } from 'react';
+import { useMutation } from '@apollo/react-hooks';
 import {
   Separation,
   SingleLine,
@@ -17,8 +17,8 @@ import {
   SingleButton,
 } from '../../buttons/multiButton/MultiButton';
 import { Input } from '../../input/Input';
-import { GET_BITCOIN_FEES } from '../../../graphql/query';
 import { CLOSE_CHANNEL } from '../../../graphql/mutation';
+import { useBitcoinState } from '../../../context/BitcoinContext';
 
 interface CloseChannelProps {
   setModalOpen: (status: boolean) => void;
@@ -47,23 +47,7 @@ export const CloseChannel = ({
   const [amount, setAmount] = useState<number>(0);
   const [isConfirmed, setIsConfirmed] = useState<boolean>(false);
 
-  const [fast, setFast] = useState(0);
-  const [halfHour, setHalfHour] = useState(0);
-  const [hour, setHour] = useState(0);
-
-  const { data: feeData } = useQuery(GET_BITCOIN_FEES, {
-    onError: error => toast.error(getErrorContent(error)),
-  });
-
-  useEffect(() => {
-    if (feeData && feeData.getBitcoinFees) {
-      const { fast, halfHour, hour } = feeData.getBitcoinFees;
-      setAmount(fast);
-      setFast(fast);
-      setHalfHour(halfHour);
-      setHour(hour);
-    }
-  }, [feeData]);
+  const { fast, halfHour, hour } = useBitcoinState();
 
   const [closeChannel] = useMutation(CLOSE_CHANNEL, {
     onCompleted: data => {

src/components/nodeInfo/NodeCard.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useInView } from 'react-intersection-observer';
 import 'intersection-observer'; // Polyfill
-import { useQuery } from '@apollo/react-hooks';
 import { SingleLine, DarkSubTitle, ResponsiveLine } from '../generic/Styled';
 import { themeColors } from '../../styles/Themes';
 import ScaleLoader from 'react-spinners/ScaleLoader';
@@ -9,7 +8,7 @@ import { Price } from '../price/Price';
 import Modal from '../modal/ReactModal';
 import { StatusDot, StatusLine, QuickCard } from './NodeInfo.styled';
 import { NodeInfoModal } from './NodeInfoModal';
-import { GET_NODE_INFO } from '../../graphql/query';
+import { useGetNodeInfoQuery } from '../../generated/graphql';
 
 export const getStatusDot = (status: boolean) => {
   return status ? <StatusDot color="#95de64" /> : <StatusDot color="#ff4d4f" />;
@@ -20,22 +19,6 @@ interface NodeCardProps {
   accountId: string;
 }
 
-interface QueryData {
-  getNodeInfo: {
-    active_channels_count: number;
-    closed_channels_count: number;
-    alias: string;
-    pending_channels_count: number;
-    is_synced_to_chain: boolean;
-  };
-  getChannelBalance: {
-    confirmedBalance: number;
-    pendingBalance: number;
-  };
-  getChainBalance: number;
-  getPendingChainBalance: number;
-}
-
 export const NodeCard = ({ account, accountId }: NodeCardProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -51,7 +34,7 @@ export const NodeCard = ({ account, accountId }: NodeCardProps) => {
     cert,
   };
 
-  const { data, loading, error } = useQuery<QueryData>(GET_NODE_INFO, {
+  const { data, loading, error } = useGetNodeInfoQuery({
     variables: { auth },
     skip: !inView,
     pollInterval: 10000,

src/components/statusCheck/StatusCheck.tsx

@@ -1,11 +1,10 @@
 import { useConnectionState } from '../../context/ConnectionContext';
-import { useQuery } from '@apollo/react-hooks';
 import { useAccount } from '../../context/AccountContext';
 import { useStatusDispatch } from '../../context/StatusContext';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../utils/error';
-import { GET_NODE_INFO } from '../../graphql/query';
+import { useGetNodeInfoQuery } from '../../generated/graphql';
 
 export const StatusCheck = () => {
   const { connected } = useConnectionState();
@@ -18,7 +17,7 @@ export const StatusCheck = () => {
     cert,
   };
 
-  const { data, loading, error, stopPolling } = useQuery(GET_NODE_INFO, {
+  const { data, loading, error, stopPolling } = useGetNodeInfoQuery({
     variables: { auth },
     skip: !connected || !loggedIn,
     pollInterval: 10000,
@@ -51,9 +50,9 @@ export const StatusCheck = () => {
         alias,
         syncedToChain: is_synced_to_chain,
         version: versionNumber[0],
-        mayorVersion: numbers[0],
-        minorVersion: numbers[1],
-        revision: numbers[2],
+        mayorVersion: Number(numbers[0]),
+        minorVersion: Number(numbers[1]),
+        revision: Number(numbers[2]),
         chainBalance: getChainBalance,
         chainPending: getPendingChainBalance,
         channelBalance: confirmedBalance,

src/graphql/mutation.ts

@@ -22,7 +22,7 @@ export const CLOSE_CHANNEL = gql`
 `;
 
 export const OPEN_CHANNEL = gql`
-  mutation openChannel(
+  mutation OpenChannel(
     $amount: Int!
     $partnerPublicKey: String!
     $auth: authType!
@@ -51,7 +51,7 @@ export const PAY_INVOICE = gql`
 `;
 
 export const CREATE_INVOICE = gql`
-  mutation PayInvoice($amount: Int!, $auth: authType!) {
+  mutation CreateInvoice($amount: Int!, $auth: authType!) {
     createInvoice(amount: $amount, auth: $auth) {
       request
     }
@@ -91,7 +91,7 @@ export const PAY_ADDRESS = gql`
 `;
 
 export const DECODE_REQUEST = gql`
-  mutation decodeRequest($auth: authType!, $request: String!) {
+  mutation DecodeRequest($auth: authType!, $request: String!) {
     decodeRequest(auth: $auth, request: $request) {
       chainAddress
       cltvDelta
@@ -113,7 +113,7 @@ export const DECODE_REQUEST = gql`
 `;
 
 export const UPDATE_FEES = gql`
-  mutation updateFees(
+  mutation UpdateFees(
     $auth: authType!
     $transactionId: String
     $transactionVout: Int

src/graphql/query.ts

@@ -16,7 +16,7 @@ export const GET_NETWORK_INFO = gql`
 `;
 
 export const GET_CAN_CONNECT = gql`
-  query GetNodeInfo($auth: authType!) {
+  query GetCanConnect($auth: authType!) {
     getNodeInfo(auth: $auth) {
       chains
       color
@@ -32,7 +32,7 @@ export const GET_CAN_CONNECT = gql`
 `;
 
 export const GET_CAN_ADMIN = gql`
-  query AdminCheck($auth: authType!) {
+  query GetCanAdmin($auth: authType!) {
     adminCheck(auth: $auth)
   }
 `;
@@ -267,7 +267,7 @@ export const GET_FORWARDS = gql`
 `;
 
 export const GET_CONNECT_INFO = gql`
-  query GetNodeInfo($auth: authType!) {
+  query GetCanConnectInfo($auth: authType!) {
     getNodeInfo(auth: $auth) {
       public_key
       uris
@@ -310,7 +310,7 @@ export const RECOVER_FUNDS = gql`
 `;
 
 export const CHANNEL_FEES = gql`
-  query GetChannelFees($auth: authType!) {
+  query ChannelFees($auth: authType!) {
     getChannelFees(auth: $auth) {
       alias
       color

src/layouts/navigation/nodeInfo/NodeInfo.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { GET_NODE_INFO } from '../../../graphql/query';
 import { useSettings } from '../../../context/SettingsContext';
 import {
   Separation,
@@ -26,6 +24,7 @@ import { getPrice } from '../../../../src/components/price/Price';
 import { AnimatedNumber } from '../../../../src/components/animated/AnimatedNumber';
 import { useStatusState } from '../../../context/StatusContext';
 import { usePriceState } from '../../../context/PriceContext';
+import { useGetNodeInfoQuery } from '../../../generated/graphql';
 
 const Closed = styled.div`
   display: flex;
@@ -89,7 +88,7 @@ export const NodeInfo = ({ isOpen, isBurger }: NodeInfoProps) => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_NODE_INFO, {
+  const { loading, data } = useGetNodeInfoQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/chain/transactions/ChainTransactions.tsx

@@ -5,12 +5,11 @@ import {
   CardWithTitle,
 } from '../../../components/generic/Styled';
 import { useAccount } from '../../../context/AccountContext';
-import { GET_CHAIN_TRANSACTIONS } from '../../../graphql/query';
-import { useQuery } from '@apollo/react-hooks';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
 import { TransactionsCard } from './TransactionsCard';
+import { useGetChainTransactionsQuery } from '../../../generated/graphql';
 
 export const ChainTransactions = () => {
   const [indexOpen, setIndexOpen] = useState(0);
@@ -21,7 +20,7 @@ export const ChainTransactions = () => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_CHAIN_TRANSACTIONS, {
+  const { loading, data } = useGetChainTransactionsQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/chain/utxos/ChainUtxos.tsx

@@ -5,12 +5,11 @@ import {
   CardWithTitle,
 } from '../../../components/generic/Styled';
 import { useAccount } from '../../../context/AccountContext';
-import { GET_UTXOS } from '../../../graphql/query';
-import { useQuery } from '@apollo/react-hooks';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
 import { UtxoCard } from './UtxoCard';
+import { useGetUtxosQuery } from '../../../generated/graphql';
 
 export const ChainUtxos = () => {
   const [indexOpen, setIndexOpen] = useState(0);
@@ -21,7 +20,7 @@ export const ChainUtxos = () => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_UTXOS, {
+  const { loading, data } = useGetUtxosQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/channels/channels/Channels.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { GET_CHANNELS } from '../../../graphql/query';
 import { Card } from '../../../components/generic/Styled';
 import { ChannelCard } from './ChannelCard';
 import { useAccount } from '../../../context/AccountContext';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
+import { useGetChannelsQuery } from '../../../generated/graphql';
 
 export const Channels = () => {
   const [indexOpen, setIndexOpen] = useState(0);
@@ -18,7 +17,7 @@ export const Channels = () => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_CHANNELS, {
+  const { loading, data } = useGetChannelsQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/channels/closedChannels/ClosedChannels.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { GET_CLOSED_CHANNELS } from '../../../graphql/query';
 import { Card } from '../../../components/generic/Styled';
 import { ClosedCard } from './ClosedCard';
 import { useAccount } from '../../../context/AccountContext';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
+import { useGetClosedChannelsQuery } from '../../../generated/graphql';
 
 export const ClosedChannels = () => {
   const [indexOpen, setIndexOpen] = useState(0);
@@ -18,7 +17,7 @@ export const ClosedChannels = () => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_CLOSED_CHANNELS, {
+  const { loading, data } = useGetClosedChannelsQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/channels/pendingChannels/PendingChannels.tsx

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
-import { useQuery } from '@apollo/react-hooks';
-import { GET_PENDING_CHANNELS } from '../../../graphql/query';
 import { Card } from '../../../components/generic/Styled';
 import { PendingCard } from './PendingCard';
 import { useAccount } from '../../../context/AccountContext';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
+import { useGetPendingChannelsQuery } from '../../../generated/graphql';
 
 export const PendingChannels = () => {
   const [indexOpen, setIndexOpen] = useState(0);
@@ -18,7 +17,7 @@ export const PendingChannels = () => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_PENDING_CHANNELS, {
+  const { loading, data } = useGetPendingChannelsQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/home/connect/Connect.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
 import { useAccount } from '../../../context/AccountContext';
-import { GET_CONNECT_INFO } from '../../../graphql/query';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
@@ -18,6 +16,7 @@ import { Radio, Copy } from '../../../components/generic/Icons';
 import styled from 'styled-components';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import { mediaWidths } from '../../../styles/Themes';
+import { useGetCanConnectInfoQuery } from '../../../generated/graphql';
 
 const Key = styled.div`
   overflow: hidden;
@@ -63,7 +62,7 @@ export const ConnectCard = () => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_CONNECT_INFO, {
+  const { loading, data } = useGetCanConnectInfoQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/home/networkInfo/NetworkInfo.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
 import {
   Card,
   CardWithTitle,
@@ -15,7 +14,7 @@ import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../utils/error';
 import { LoadingCard } from '../../../components/loading/LoadingCard';
 import { Price } from '../../../components/price/Price';
-import { GET_NETWORK_INFO } from '../../../graphql/query';
+import { useGetNetworkInfoQuery } from '../../../generated/graphql';
 
 const Tile = styled.div`
   display: flex;
@@ -72,7 +71,7 @@ export const NetworkInfo = () => {
     cert,
   };
 
-  const { loading, data } = useQuery(GET_NETWORK_INFO, {
+  const { loading, data } = useGetNetworkInfoQuery({
     variables: { auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/home/reports/flow/index.tsx

@@ -10,13 +10,12 @@ import {
 import { ButtonRow } from '../forwardReport/Buttons';
 import { FlowReport } from './FlowReport';
 import { useAccount } from '../../../../context/AccountContext';
-import { useQuery } from '@apollo/react-hooks';
 import { FlowPie } from './FlowPie';
 import { InvoicePie } from './InvoicePie';
 import { toast } from 'react-toastify';
 import { getErrorContent } from '../../../../utils/error';
 import { LoadingCard } from '../../../../components/loading/LoadingCard';
-import { GET_IN_OUT } from '../../../../graphql/query';
+import { useGetInOutQuery } from '../../../../generated/graphql';
 // import { getWaterfall } from './Helpers';
 
 export const ChannelRow = styled.div`
@@ -89,7 +88,7 @@ export const FlowBox = () => {
     macaroon: viewOnly !== '' ? viewOnly : sessionAdmin,
     cert,
   };
-  const { data, loading } = useQuery(GET_IN_OUT, {
+  const { data, loading } = useGetInOutQuery({
     variables: { time: isTime, auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/home/reports/forwardReport/ForwardChannelReport.tsx

@@ -4,7 +4,6 @@ import {
   ColorButton,
   SingleLine,
 } from '../../../../components/generic/Styled';
-import { useQuery } from '@apollo/react-hooks';
 import { useAccount } from '../../../../context/AccountContext';
 import { CardContent } from '.';
 import { toast } from 'react-toastify';
@@ -19,7 +18,7 @@ import { LoadingCard } from '../../../../components/loading/LoadingCard';
 import { getPrice } from '../../../../components/price/Price';
 import { useSettings } from '../../../../context/SettingsContext';
 import { usePriceState } from '../../../../context/PriceContext';
-import { GET_FORWARD_CHANNELS_REPORT } from '../../../../graphql/query';
+import { useGetForwardChannelsReportQuery } from '../../../../generated/graphql';
 
 const ChannelRow = styled.div`
   font-size: 14px;
@@ -80,7 +79,7 @@ export const ForwardChannelsReport = ({ isTime, isType, color }: Props) => {
     cert,
   };
 
-  const { data, loading } = useQuery(GET_FORWARD_CHANNELS_REPORT, {
+  const { data, loading } = useGetForwardChannelsReportQuery({
     variables: { time: isTime, order: isType, auth, type },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/home/reports/forwardReport/ForwardReport.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Sub4Title } from '../../../../components/generic/Styled';
-import { useQuery } from '@apollo/react-hooks';
 import numeral from 'numeral';
 import { useSettings } from '../../../../context/SettingsContext';
 import { useAccount } from '../../../../context/AccountContext';
@@ -21,7 +20,7 @@ import { getErrorContent } from '../../../../utils/error';
 import { LoadingCard } from '../../../../components/loading/LoadingCard';
 import { getPrice } from '../../../../components/price/Price';
 import { usePriceState } from '../../../../context/PriceContext';
-import { GET_FORWARD_REPORT } from '../../../../graphql/query';
+import { useGetForwardReportQuery } from '../../../../generated/graphql';
 
 interface Props {
   isTime: string;
@@ -46,7 +45,7 @@ export const ForwardReport = ({ isTime, isType }: Props) => {
     cert,
   };
 
-  const { data, loading } = useQuery(GET_FORWARD_REPORT, {
+  const { data, loading } = useGetForwardReportQuery({
     variables: { time: isTime, auth },
     onError: error => toast.error(getErrorContent(error)),
   });

src/views/home/reports/liquidReport/LiquidReport.tsx

@@ -4,7 +4,6 @@ import {
   SubTitle,
   Card,
 } from '../../../../components/generic/Styled';
-import { useQuery } from '@apollo/react-hooks';
 import { useAccount } from '../../../../context/AccountContext';
 import {
   VictoryChart,
@@ -22,7 +21,7 @@ import {
 import { LoadingCard } from '../../../../components/loading/LoadingCard';
 import { getPrice } from '../../../../components/price/Price';
 import { usePriceState } from '../../../../context/PriceContext';
-import { GET_LIQUID_REPORT } from '../../../../graphql/query';
+import { useGetLiquidReportQuery } from '../../../../generated/graphql';
 
 export const LiquidReport = () => {
   const { host, viewOnly, cert, sessionAdmin } = useAccount();
@@ -36,7 +35,7 @@ export const LiquidReport = () => {
   const priceContext = usePriceState();
   const format = getPrice(currency, priceContext);
 
-  const { data, loading } = useQuery(GET_LIQUID_REPORT, {
+  const { data, loading } = useGetLiquidReportQuery({
     variables: { auth },
   });
 

src/views/trading/Modal/FilterModal.tsx

@@ -2,16 +2,17 @@ import React, { useState, useEffect } from 'react';
 import { SubTitle } from '../../../components/generic/Styled';
 import { SortOptions, NewOptions } from '../OfferConfigs';
 import { FilterType } from '../OfferFilters';
-import { useQuery } from '@apollo/react-hooks';
-import {
-  GET_HODL_COUNTRIES,
-  GET_HODL_CURRENCIES,
-} from '../../../graphql/hodlhodl/query';
 import { themeColors } from '../../../styles/Themes';
 import ScaleLoader from 'react-spinners/ScaleLoader';
 import { FilteredList } from './FilteredList';
 import { OptionsLoading } from '../OfferCard.styled';
 import { toast } from 'react-toastify';
+import {
+  useGetCountriesQuery,
+  useGetCurrenciesQuery,
+  GetCountriesQuery,
+  GetCurrenciesQuery,
+} from '../../../generated/graphql';
 
 interface FilterProps {
   type: string;
@@ -50,9 +51,10 @@ export const FilterModal = ({
   const [options, setOptions] = useState(newOptions ?? []);
   const [title, setTitle] = useState(final?.['title'] || '');
 
-  const query = type === 'Country' ? GET_HODL_COUNTRIES : GET_HODL_CURRENCIES;
+  const useQuery =
+    type === 'Country' ? useGetCountriesQuery : useGetCurrenciesQuery;
 
-  const { loading, data, error } = useQuery(query, {
+  const { loading, data, error } = useQuery({
     skip: skipable,
     onError: () => toast.error('Error Loading Options. Please try again.'),
   });
@@ -73,16 +75,18 @@ export const FilterModal = ({
   }, [type]);
 
   useEffect(() => {
-    if (!loading && data && data.getCountries) {
-      const countryOptions = data.getCountries.map((country: CountryType) => {
-        const { code, name, native_name } = country;
-        return { name: code, title: `${name} (${native_name})` };
-      });
+    if (!loading && data && (data as GetCountriesQuery).getCountries) {
+      const countryOptions = (data as GetCountriesQuery).getCountries.map(
+        (country: CountryType) => {
+          const { code, name, native_name } = country;
+          return { name: code, title: `${name} (${native_name})` };
+        }
+      );
 
       setOptions(countryOptions);
     }
-    if (!loading && data && data.getCurrencies) {
-      const filtered = data.getCurrencies.filter(
+    if (!loading && data && (data as GetCurrenciesQuery).getCurrencies) {
+      const filtered = (data as GetCurrenciesQuery).getCurrencies.filter(
         (currency: CurrencyType) => currency.type === 'fiat'
       );
 

tslint.json

@@ -1,4 +1,7 @@
 {
+  "linterOptions": {
+    "exclude": ["src/generated/*.tsx"]
+  },
   "extends": ["tslint-config-airbnb", "tslint-react-hooks"],
   "rules": {
     "no-conditional-assignment": true,