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,13 +1,12 @@
 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';
 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,15 +1,14 @@
 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';
 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,