refactor: rewrite useInvoices with RQ

packages/backend/src/graphql/queries/get-invoices.ee.js

@@ -1,19 +0,0 @@
-import Billing from '../../helpers/billing/index.ee.js';
-
-const getInvoices = async (_parent, _params, context) => {
-  const subscription = await context.currentUser.$relatedQuery(
-    'currentSubscription'
-  );
-
-  if (!subscription) {
-    return;
-  }
-
-  const invoices = await Billing.paddleClient.getInvoices(
-    Number(subscription.paddleSubscriptionId)
-  );
-
-  return invoices;
-};
-
-export default getInvoices;

packages/backend/src/graphql/query-resolvers.js

@@ -9,7 +9,6 @@ import getDynamicData from './queries/get-dynamic-data.js';
 import getDynamicFields from './queries/get-dynamic-fields.js';
 import getFlow from './queries/get-flow.js';
 import getFlows from './queries/get-flows.js';
-import getInvoices from './queries/get-invoices.ee.js';
 import getNotifications from './queries/get-notifications.js';
 import getPermissionCatalog from './queries/get-permission-catalog.ee.js';
 import getRole from './queries/get-role.ee.js';
@@ -37,7 +36,6 @@ const queryResolvers = {
   getDynamicFields,
   getFlow,
   getFlows,
-  getInvoices,
   getNotifications,
   getPermissionCatalog,
   getRole,

packages/backend/src/graphql/schema.graphql

@@ -26,7 +26,6 @@ type Query {
   getBillingAndUsage: GetBillingAndUsage
   getCurrentUser: User
   getConfig(keys: [String]): JSONObject
-  getInvoices: [Invoice]
   getPermissionCatalog: PermissionCatalog
   getRole(id: String!): Role
   getRoles: [Role]
@@ -658,14 +657,6 @@ type Usage {
   task: Int
 }
 
-type Invoice {
-  id: Int
-  amount: Float
-  currency: String
-  payout_date: String
-  receipt_url: String
-}
-
 type ListSamlAuthProvider {
   id: String
   name: String

packages/web/src/components/Invoices/index.ee.jsx

@@ -7,12 +7,17 @@ import CardContent from '@mui/material/CardContent';
 import Divider from '@mui/material/Divider';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
+
 import useInvoices from 'hooks/useInvoices.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+
 export default function Invoices() {
   const formatMessage = useFormatMessage();
-  const { invoices, loading } = useInvoices();
-  if (loading || invoices.length === 0) return <React.Fragment />;
+  const { data, isLoading: isInvoicesLoading } = useInvoices();
+  const invoices = data?.data;
+
+  if (isInvoicesLoading || invoices?.length === 0) return <React.Fragment />;
+
   return (
     <React.Fragment>
       <Card sx={{ mb: 3, p: 2 }}>
@@ -47,7 +52,7 @@ export default function Invoices() {
 
           <Divider sx={{ mt: 2 }} />
 
-          {invoices.map((invoice, invoiceIndex) => (
+          {invoices?.map((invoice, invoiceIndex) => (
             <React.Fragment key={invoice.id}>
               {invoiceIndex !== 0 && <Divider sx={{ mt: 2 }} />}
 

packages/web/src/graphql/queries/get-invoices.ee.js

@@ -1,12 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_INVOICES = gql`
-  query GetInvoices {
-    getInvoices {
-      id
-      amount
-      currency
-      payout_date
-      receipt_url
-    }
-  }
-`;

packages/web/src/hooks/useInvoices.ee.js

@@ -1,9 +1,18 @@
-import { useQuery } from '@apollo/client';
-import { GET_INVOICES } from 'graphql/queries/get-invoices.ee';
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
 export default function useInvoices() {
-  const { data, loading } = useQuery(GET_INVOICES);
-  return {
-    invoices: data?.getInvoices || [],
-    loading: loading,
-  };
+  const query = useQuery({
+    queryKey: ['invoices'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/users/invoices', {
+        signal,
+      });
+
+      return data;
+    },
+  });
+
+  return query;
 }